JavaScript 27件

wp_get_archives・制限なしで出力し13ヶ月以前はアコーディオンで格納

デモを見る HTML文法を無視した、liタグ外にdivを追加するやり方。 wp_get_archives のデフォルト出力htmlはリストタ…

jQuery・スティッキープラグイン「Sticky-Kit」をPC端末でのみ有効化する

デモを見る ファイル一式をダウンロードする http://leafo.net/sticky-kit/ 検証済みブラウザとOS IE 9~ F…

jQuery・YouTubeをモーダル表示させるなら「Magnific Popup」[IE9対応]

デモを見る ファイル一式をダウンロードする YouTubeをモーダルウィンドウで表示させたいときは、jQueryプラグイン Magnific…

Google Map・よくある6つの要望に Google Maps JavaScript API で対応

デモを見る ファイル一式をダウンロードする 「Google APIキーの発行って面倒じゃないの…?」 Googleアカウントを持っていれば、…

jQuery・多階層のマウスオーバードロップダウンメニューを作りました [IE9対応]

デモを見る ファイル一式をダウンロードする 仕事で必要だったため作りました。 作った後に気づいたことですが、西畑一馬氏のコードとほぼ同一のも…

フルFlashのようなサイト制作は、8要点を押さえれば乗り切れる

デモを見る ファイル一式をダウンロードする エンタメ系サイトのコーディングなどでは、CSS3とjQueryを駆使したフルFlashっぽい仕上…

jQuery・カルーセルプラグイン「Owl Carousel 2 Thumbs」の使い方 [IE8一部未対応]

デモを見る ファイル一式をダウンロードする カルーセルスライダー Owl Carousel に、サムネイル機能を補完したプラインが Owl …

jQuery・カルーセルプラグイン「Owl Carousel 2」をカスタマイズ [IE10 / Android 4.4 以上]

Owl Carousel は、有名プラグインの中で最も滑らかにスライドする、タッチデバイス対応のカルーセルスライダーです。バージョン2はなぜ…

jQuery・Lightbox プラグイン「slick lightbox」をカスタマイズ [IE9以上]

デモを見る ファイル一式をダウンロードする IE8 以下では一切使えません。 カルーセルスライダー  slick を、Lightbox化した…

jQuery・スクロールイベントでよく使う基本的な3つの .offset().top [IE7対応]

Webサイト制作でちょくちょく使っている、スクロールイベントの offset().top 3つです。 ただスクロールイベント系は、プラグイン…

1枚背景画像サイトで使えるかもしれないパララックスサンプル2つ [一部IE8未対応]

サンプルの汎用性が低いため、実務で使えるかは微妙です。ただ、「こういうことが出来ます」と提案できるため、覚えておいて損はないはず。 目次 画…

jQuery・覚えておくと便利な、スクロールで対象要素がフェードするサンプル3つ [IE7対応]

1枚画像背景のブロックをスクロールしていくサイトなどでは、ブロックの中身をフェードさせると、容易に見栄えを良くすることができます。 あまりや…

jQuery・Animate.css の合わせ技でフルFlashサイトライクな動きを実現

デモを見る ファイル一式をダウンロードする Sublime Text専用・Animate.cssパッケージを利用します。 アニメや映画などを…

jQuery・シンプルなスクロールスパイを作りました [PC限定 / IE9対応]

デモを見る ファイル一式をダウンロードする 皆さんブログで Bootstrap のスクロールスパイをよく紹介されていますが、余計なコードを多…

jQuery・実務で必要な12項目をクリアした、レスポンシブドロワーメニューを作りました [IE11以上]

デモを見る ファイル一式をダウンロード 2017/07/29 余計なCSSを削除し、jQueryの見直しを行いました。 2017/01/29…

[緊急] iOS 8.4.1 の :hover バグをユーザーエージェント切り替えで対処 [IE7対応]

昨日、「ブレークポイントで切り替えれば問題なし」と投稿しましたが、検証を重ねるとダメなことが判明しました…。すみません。 :hover で透…

jQuery・タッチデバイスでも滑らかなスムーススクロールを作りました [IE8対応]

2016/07/08 jQuery 2.2 対応に修正しました。 デモを見る ファイル一式をダウンロードする お客さんから「スマホでスムース…

jQuery・表示させたときにスクロールを固定する、シンプルなモーダルウィンドウを作りました [IE9一部未対応]

デモを見る ファイル一式をダウンロードする 2016/05/31 translateY() を追加した滑らかバージョンを作っておきました。 …

jQuery・サイド固定の縦100%と、Amazonライクなマウスオーバーメガメニューを作りました [スマホ未対応 / IE8対応]

デモを見る ファイル一式をダウンロードする ふと、「Amazonのメガメニューはどの程度のコードで作れるだろう?」と思い、作ってみました。タ…

jQuery・横幅3種類、マウスオーバードロップダウンを作りました [スマホ未対応 / IE8対応]

デモを見る ファイル一式をダウンロードする 仕事で依頼されるドロップダウンは、大抵この3種類なので作っておきました。マウスオーバーをスマホ対…