HOMEJavaScriptページ内リンク（アンカーリンク）で特定の場所までスムーススクロールさせる ページ内リンク（アンカーリンク）で特定の場所までスムーススクロールさせる JavaScript jQueryでスムーススクロールを実装します。 スムーススクロールとはページ内リンク（アンカーリンク）までの距離をアニメーションして移動する実装になります。 ホームページ制作では必ず使用する場面がありますので覚えておきましょう。 サンプルをみる スムーススクロールとはどんなものなのか。まずは上記のサンプルを確認してみましょう。 上部のリンクをクリックすると、指定したリンク先までスクロールしていきます。 スムーススクロールのJavaScript $(function(){ $('a[href^="#"]').click(function(){ //スクロールのスピード var speed = 50
Browser Support link Current Active Supportlink Desktop Chrome: (Current - 1) and Current Edge: (Current - 1) and Current Firefox: (Current - 1) and Current, ESR Internet Explorer: 9+ Safari: (Current - 1) and Current Opera: Current link Mobile Stock browser on Android 4.0+[1] Safari on iOS 7+[1] [1]: Workarounds for Android Browser 4.0-4.3 & iOS 7 are present in the code base, but we no longer ac
<dl> <dt>アコーディオンメニュー1</dt> <dd>アコーディオンメニューが開く。</dd> <dt>アコーディオンメニュー2</dt> <dd>アコーディオンメニューが開く。</dd> <dt>アコーディオンメニュー3</dt> <dd>アコーディオンメニューが開く。</dd> </dl> dl dt{ width:200px; line-height:50px; text-align:center; border:1px solid #666; cursor:pointer; font-size: 12px; background:url(images/plus.png) no-repeat center right 5px; } dl dt.active{ background:url(images/minus.png) no-repeat center right 5px
この hiraku.js は、弊社で開発している a-blog cms の中で利用するために作られた「オフキャンバスメニュー用のJavaScript」を、より多くの人に利用してもらえるように jQuery のプラグイン化したものです。 オフキャンバスメニューとは画面左右から出現するメニューのことで、ドロワーメニューとも呼ばれたりします。 オフキャンバスメニュー用の JavaScript は Google で「offcanvas JavaScript」のように検索すると多く見つけることができますが、今回 hiraku.js で実装した特徴を全て満たすものを探す事ができなかった事から自作する事になりました。 appleple.github.io/hiraku では、簡単に英語で利用方法が解説されていますが、こちらでは日本語でしっかり解説を書いてみようと思います。
"hiraku" means "open" in Japanese. As you can imagine, "offcanvas-menu" is like a drawer and it is often used to create additional space especially for mobile layout. It is very easy to find source codes or plugins for Offcanvas-menu via Google by searching with "offcanvas JavaScript", but we can't find any plugins which meet all features that hiraku.js has. That's Why we made it from the scratch.
気を付けないと、スムーススクロールとタブパネルのバッティングが生じます。 スムーススクロールはこれを使います。 $('a[href^="#"]').click(function () { var speed = 800; var href= $(this).attr("href"); var target = $(href == "#" || href == "" ? 'html' : href); var position = target.offset().top; $('body,html').animate({scrollTop:position}, speed, 'swing'); return false; }); });JavaScript <ul class="tab"> <li><a href="#tab1">tab1</a></li> <li><a href="#tab
WP4.5でjQueryがエラー: Syntax error, unrecognized expression WWordPress 4.5がリリースされたので検証のため、ステージングサイトを試しにWP4.4からWP4.5にアップデートしてみたら、jQueryで動かしているスライドショーが動作しない (TT コンソールで確認するとjQuery本体から下記のエラーがでていて、以降のJavascriptが停止していた。 Syntax error, unrecognized expression jQuery本体のバグ？と思いきや、どうやら、WordPressバージョンアップによりjQuery Migrateのバージョンの上がったことが原因でセレクタの記述でエラーがでていたようです。 WordPress4.4 WordPress4.5
今回作成したページ 今回作成したページはこのようなページです。 demo download このような動きをしています。 ページをスクロールするとページトップへ戻るリンクがフェードイン・アウトする。 ページトップへ戻るリンクをクリックするとスムーズにスクロールする。 ページトップへ戻るリンクはコンテンツ部分の右下で固定表示される。 フッターのところまでスクロールするとページトップへ戻るリンクがフッターに貼り付く。 動作がややこしいですね…。私のようにjQueryが苦手な方のために1つずつ解説していきます。 1.jQuery本体を読み込む jQueryを使用するには以下のファイルを読み込みます。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
Response is an experimental jQuery plugin for building websites with responsive content. It can dynamically swap content based on breakpoints and data attributes. Breakpoint Sets Response's most powerful feature is breakpoint sets. Using the sets, content for more-capable devices and/or larger viewports can be stored in HTML5 data attributes. Designers can create custom sets to make exactly the fu
A jQuery plugin that allows the position of a background image to be animated. The current version is 1.1.1 and is available under the MIT licence. For more detail see the documentation reference page. Download now Basics Positions Options In the Wild Quick Ref You can animate the position of a background image as either 'backgroundPosition' or 'background-position', providing both the horizontal
数多く出ているLightbox系のスクリプトですが、WordPressに設置するのはどれがいいのか悩んでいました。 これまでは「Lightbox-2 for WordPress」を使っていることが多かったんですが、カスタムフィールドに値が入るのが気持ち悪くて…。 そして今回「WP jQuery Lightbox」を使ってみているわけです。 WP jQuery Lightboxにした理由 「シンプル」 ただこれだけです。 大元の設定でイメージリンクが付くものには勝手にライトボックス効果を与えてくれるようにできるし、もちろんその逆も。 グループ化も簡単だったのでこれにしたんです。 もちろん、他のプラグインでも、もしかすると「Lightbox-2 for WordPress」でも出来たのかもしれないんですが、カスタムフィールドに… グループ化とかはちょっとだけ手間はかかるけど、それは投稿の際にや
【bxslider】レスポンシブデザイン対応版の記事はこちら アップデートによりレスポンシブデザイン対応版に変更されていましたので、改めてメモとして記事にまとめております。CSS3のアニメーションを組み込んでスライドがさらにスムーズな動作になっています。※レスポンシブ版の方はイージングの選択の幅が狭い事やIE6が非対応だったり等、若干の癖がありますので、こちらで記事化したバージョンと使い分ける事をオススメします。 設置方法 > DEMO > DOWLOAD 設置方法も非常にシンプルです。プラグインを読み込みdivやliの階層を書くだけ。 プラグインのダウンロードは本家サイトより行えます。 <script src="js/jquery.1.X.X.js"></script> <script src="js/jquery.easing.1.3.js"></script> <script src
jQuery 1.2 以降だと scrollTop（と scrollLeft）という疑似スタイルが利用できるようになったので，jQuery UI を使わずとも，jQuery Core 本体だけでページ内スクロールができるようになりました。 たとえば， <html> <body> <p> blah, blah, blah, ... blah, blah, blah, ... </p> <p> <a href="#" id="link_to_top">ページの先頭へ</a> </p> </body> </html> このような HTML で「ページの先頭へ」というリンクをクリックしたときに，スムーズにスクロールしたいのなら， $(function () { if (! $.browser.safari) { $('#link_to_top').click(function () { $(thi
商品画像の一覧を作成したいとか、トップページにブログ内の画像を固定サイズにトリミングして表示したい。 そんな時に元画像を変更せずにCSSとｊQueryだけで自動的にトリミング＆センタリングする方法をご紹介します。 システムで自動的に商品一覧を表示しているときや、 Wordpressなどで登録するときに、画像を編集してトリミングとか難しいことができない、 といった時に便利に使えます。 CSSでのトリミングはもともとこのサイトで紹介されていたのですが CSS GLOBE – Create Resizing Thumbnails Using Overflow Property こちらはCSSだけでの方法なので、画像をセンタリングするには1つ1つ調整するか、 元の画像を決められたサイズにしなくてはいけませんでした。 そこで、追加でｊQueryで、画像をセンタリングるものを組み合わせてみまし
サンプルファイルのご利用の前に サンプルファイルについて、一般的な環境においては特に問題のないことを確認しておりますが、万一障害が発生し、その結果いかなる損害が生じたとしても、技術評論社および著者はなんら責任を負うものではありません。また生じた損害に対する一切の保証をいたしかねます。必ずご自身の判断と責任においてご利用ください。 また、サンプルファイルは、写真、イラスト等の画像ファイルを除き、商用利用、再配布が可能です。 それぞれのファイルは、著作権法上の保護を受けています。 jQueryファイル（jquery-1.6.4.min.js）はMIT/GPLのデュアルライセンスにて配布されています。 Chapter5のColorboxはMITライセンスにて配布されています（書籍の264ページ参照）。 ダウンロードしていただくファイルは、ZIP形式の圧縮ファイルです（約3MB）。解凍してお使いく
現在地にclassをつけるので、CSSで現在地表示ができます。 ヘッダーで、jquery.jsと後述のcurrent.jsを読み込んでいます。 単純にbodyタグに指定したidとナビゲーションのclass名が同じならclassにcurrentを追加します。 IDの場所は変更できます。 これでDWのテンプレにも使えます。 デモページへopen_in_new JSを読み込みます <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="js/current.js"></script> [current.js]JavaScript // Globalnav cur
PCサイトとスマートフォンサイトを切り替える「Pc2Sp.js」 PCサイトとスマートフォンサイトを切り替える「Pc2Sp.js」を作成したので公開しておきます。 このライブラリを利用すると スマートフォンでPCサイトにアクセスした場合、指定したスマートフォン用のURLに転送されます。 PCでスマートフォンサイトにアクセスした場合、指定したPC用のURLに転送されます。 スマートフォン用ページでは「PCサイトを見る」なリンクが設定可能で、それがクリックされると、スマートフォンでPC用のサイトが閲覧できます。クリック後は1の転送機能が無効になります PC用のサイトでは、スマートフォンで見た場合のみ表示される「スマートフォンサイトを見る」なリンクが設定可能で、これがクリックされるとスマートフォン用のURLに転送され1の機能が復活します。 個々のページでどのPCページとスマートフォンページが対応
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く