jQuery

jQuery 関連のメモ

ページ内リンクへアニメーションで移動

2013年12月8日

ページ内リンクへプラグインを使わずにアニメーションで移動するスムーズスクロールに関するメモ。 animate メソッドと scrollTop プロパティ 参考:「jQueryで画面をスクロールさせる時の注意点」 画面をスクロールさせる場合 animate メソッドと scrollTop プロパティを利用するが、どのセレクタに対して実行すべきかはブラウザ(We…

続きを読む

jQuery Waypoints を使ってみる

2013年11月24日

スクロールイベントを制御(ページ内の特定のスクロール位置で関数を実行するなど)できる「jQuery Waypoints v2.0.3 」を使った際のメモ(使い方)。 「Infinite Scroll(ページ下部まで移動すると、次のページを自動的に読み込んで表示)」、「Sticky Elements(特定の要素をある位置に固定して表示)」などのショートカットが…

続きを読む

audio.js を使ってみる

2013年11月22日

音楽(MP3)を再生する必要があったので、探していたら「 audio.js」が見つかったのでその使い方のメモ。 ダウンロード 以下の「audio.js」のページからダウンロード http://kolber.github.io/audiojs/ 解凍して、「audiojs」フォルダ(audio.min.js, player-graphics.gif audio…

続きを読む

jQuery の load()

2013年11月22日

jQuery の load() の基本的な使い方に関するメモ。 基本的な使い方 Ajax 利用時の制限 文字コードは、原則として「UTF-8 」を使用。(他の文字コードを使うと文字化けする) Ajax ではセキュリティ上の理由から、HTML と同一ドメイン上にあるファイルしか取得できない。 ページにテキスト(ファイル)を挿入する load() は引数に読み込…

続きを読む

テキストをモーダルウィンドウに表示する

2013年11月16日

画像ではなく、テキスト要素をライトボックス風に表示する方法のメモ。 モーダルウィンドウなどを予め HTML に記述しておく場合 a 要素(class=”detail_btn”)をクリックすると、詳細情報(class=”detail_info”)をライトボックス風に表示 半透明のモーダルウィンドウの領域:id=&…

続きを読む

JavaScript でブラウザの言語を判定

2013年11月15日

JavaScript でブラウザの言語を判定する方法のメモ。 日本語と英語の二ヶ国語サイトなどで、例えば日本語サイトへのリンクを「Japanese」となっているところを、ブラウザの言語を判定し、言語が日本語の場合には「日本語」と表示させる場合の例。 ブラウザの言語を取得するには以下のいずれかで取得可能。(日本語の場合、返ってくる値は「ja」「ja-JP」のい…

続きを読む

jQuery で作成した機能が Firefox の最新バージョンで機能しない

2013年7月7日

Firefox の最新バージョン(22.0)になってから、この PC では画像が大きく表示されぼやけて見えるようになった。 また、コードなどを記述する pre 要素にマウスオーバーすると幅が自動的に広がるようにする機能を jQuery で以下のように記述して実現していたが、マウスアウトする際に、今までは元の幅に自動的に戻っていたのに、戻らなくなった。(「jQ…

続きを読む

jQuery で Lightbox のようなモーダルウィンドウを表示

2013年6月24日

jQuery を使って簡単に Lightbox のようなモーダルウィンドウを表示する方法のメモ。 基本的な構造 サムネイル画像にモーダルウィンドウで表示する拡大画像のソースへのリンクを設定する。 ページの適当な個所に半透明のモーダルウィンドウと拡大画像を表示する領域を設定し、CSS で非表示にしておく。 半透明のモーダルウィンドウの領域:id=”…

続きを読む

言語のリンクをクリックすると対応する言語のページに移動させる

2013年6月17日

日本語と英語の2ヶ国語のサイトを作成し、それぞれの言語のページが全く同じ構成の場合、言語のリンクをクリックするとそのページに対応する言語のページに移動するリンクを作成する例。 言語のリンクは、p 要素と a 要素で作成。 JavaScript が OFF の場合は、それぞれのトップページへ a 要素でリンク ディレクトリの構造は「en」フォルダの中に英語のペ…

続きを読む

ページ読み込み(完了)時に実行するjavascript

2013年6月13日

JavaScript で DOM 要素の取得など、ブラウザがホームページの読み込み完了時に何らかの処理を行いたい場合、body の閉じタグの直前に記述するか window.onload=function()~ を使用する。 最近は、jQuery ばかりを使っていて(というか、「jQuery(function($){」の意味など忘れていて) JavaScrip…

続きを読む