jQuery

jQuery 関連のメモ

jQuery で画像をプリロード

2014年12月26日

画像ファイルを前もって読み込んでおくプリロードに関する個人的なメモ。 ロールオーバーなどにより画像を表示する場合、切り替える画像のロードに時間がかかり、画像がちらつくことがあるので、それらの画像ファイルを前もって読み込んでおく方法。 目次 基本的な構文 jQuery で前もって読み込んでおく画像ファイルを以下のように記述するだけ。 または、 これにより画像がメモリ上にキャッシュされる。 jQuery では $(“~”)内に HTML を記述すると、HTML を「内部的」に生成する。 複数の画像を読み込めるように関数にしておく my…

続きを読む

jQuery プラグイン Masonry の使い方と設定

2014年12月6日

ブラウザの幅に応じて、配置した要素のレイアウトを整列してくれる jQuery プラグイン Masonry の使い方や設定に関する個人的なメモ。 Lazy Load や Magnific Popup も一緒に使ってみた。 この時点でのバージョン:v3.2.1 目次 jQuery プラグイン Masonry のダウンロード Masonry のページの「Download masonry.pkgd.min.js」を右クリックで「名前をつけてリンク先を保存」を選択するか、「Download masonry.pkgd.min.js」をクリックしてファイルメニューから…

続きを読む

jQuery プラグイン Lazy Load の使い方と設定

2014年11月30日

スクロールに応じて、画像データを遅延読込する jQuery プラグイン Lazy Load の設定と使い方に関する個人的なメモ。 Lazy Load プラグイン ページに含まれる画像のデータの読み込みを遅らせる(後から読み込ませる)ことにより、ロード時間を短縮することができるプラグイン。ビューポート(ブラウザの表示領域/画面)外の画像はユーザーがスクロールするまでロードされないので、特に画像が多いページに有効。以下は作者のページより抜粋。 目次 Lazy Load のダウンロード 以下のサイトからダウンロード Lazy Load Plugin for j…

続きを読む

position: fixed を使ってメニュー(ナビゲーション)を固定する際の注意点

2014年11月28日

position: fixed を使ってメニューを固定する際に気をつける点などの個人的なメモ。 結論から言うと、メニュー(ナビゲーション)の高さを指定し忘れるとメニュー以降に出現するリンク要素(ハイパーリンク)のリンクがクリックできなく(リンクが効かなく)なったり、ブラウザ上の文字(テキスト)を選択しようとしても選択できなくなってしまう。 関連ページ:「レスポンシブメニュー」「ページ内リンクへアニメーションで移動」 また、以下のプラグインを使用すると簡単にメニューを固定表示することができる。 「jQuery Waypoints を使ってみる」 目次 メニ…

続きを読む

Slider Revolution / jQuery スライダープラグイン

2014年7月24日

レスポンシブ対応で多機能なスライダープラグイン Slider Revolution (Version 4.5 SkyWood) の使い方等に関するメモ。 価格:$12 ダウンロード(販売元):codecanyon Slider Revolution のダウンロード(購入)とインストールに関しては以下のページをご参照ください。 関連ページ:Slider Revolution / jQuery プラグインのダウンロードとインストール WordPress 用のプラグインに関しては以下のページをご参照ください。 関連ページ: Slider Revolution …

続きを読む

Slider Revolution / jQuery プラグインのダウンロードとインストール

2014年7月22日

jQuery のレスポンシブスライダープラグイン Slider Revolution のダウンロードとインストールに関するメモ。(Version 4.5 SkyWood) 価格:$12 ダウンロード(販売元):codecanyon どのようなスライダーが作成できるかは、Slider Revolution のサイトをご覧ください。 フル・レスポンシブ CSS Transitions(jQuery フォールバック) 多様なアニメーション効果(ベーシック、フラット、3D) 対応ブラウザ:IE8(制限あり), IE9, IE10, IE11, Firefox, …

続きを読む

jQuery レスポンシブ・スライダー bxSlider

2014年5月18日

レスポンシブ対応のスライダー「bxSlider」(v4.1.2) の使い方や設定に関するメモ。とても簡単に設置ができるが、指定するモードによっては、使用している CSS の関係でスライドの位置がずれてしまったりしたのでその対処法やオプションについて。 目次 bxSlider のダウンロードとインストール bxSlider のサイトの右上の「Download」からファイルをダウンロード。 ダウンロードしたファイルを展開すると以下のようになっている。 images:コントロール類やローディングの画像 plugins:オプションで使用する「jquery.eas…

続きを読む

JavaScript/jQuery を使ったブラウザ判定

2014年4月13日

時々使用するブラウザの判定、毎回調べているのでメモ。 「UserAgent での判定」、「サポートしている機能での判定」、「使いたい機能が機能するかでの判定」などがあるので用途に合わせて利用。 UserAgent での判定 UserAgent の文字列からブラウザを判定する方法。バージョンが新しくなったりすると UserAgent の値も変更されるようでこれがどのぐらい使えるかは不明(確実性に疑問)。 UserAgent と そのバージョン等は以下で取得できる。 以下は Windows のChrome での例 ユーザエージェント Mozilla/5.0 …

続きを読む

jQuery 要素の操作

2014年2月9日

jQuery で要素を操作する際に使用するメソッドに関するメモ。 要素にコンテンツを追加 ラップ集合の全要素(既存のコンテンツ)に対して渡されたコンテンツ(引数で指定した要素等)を追加するメソッドは以下のようなものがある。 append:コンテンツを要素の子要素の末尾に追加 prepend:コンテンツを要素の子要素の先頭に追加 after:コンテンツを要素の後に追加 before:コンテンツを要素の前に追加 ラップ集合(wrapped set) $() 関数(jQuery() 関数)が返す DOM 要素の配列(セレクタとマッチする要素が、文書の中で定義さ…

続きを読む

Magnific Popup を使ってみる

2014年2月7日

Youtube の動画を Lightbox のようなモーダルウィンドウで表示できるプラグインを探していたところ見つけた「Magnific Popup」。レスポンシブ・デザインに対応している上に機能も豊富で Goole map なども表示可能。使い方などに関するメモ。 目次 Magnific Popup のダウンロードと読み込み Magnific Popup を「配布ページ」からダウンロード(ページ右側の「Download ZIP」から) ダウンロードすると「dist」というフォルダがあるのでその中の「jquery.magnific-popup.min.j…

続きを読む