jQuery

jQuery 関連のメモ

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

2014年2月7日

Youtube の映像をプラグインを使わずに Lightbox のようなモーダルウィンドウで表示しようと試した際の失敗例。結果的にはプラグインを使用することにしたが、後日何か別の方法が見つかればその際の参考にするためのメモ。 概要 Firefox では問題なく表示・再生できたが、それ以外のブラウザでは以下のような問題が発生。 「停止ボタン」を押さずにモーダルウィンドウを閉じてしまうと音がそのまま鳴り続ける(IEなど) 「停止ボタン」をクリックしても映像は止まるが音が止まらない(Chromeなど) IE の Safari ではモーダルウィンドウを閉じても、…

続きを読む

ajax を使って更新を自動的に行う

2014年1月26日

特定のページに記述してある情報を他のページでも使用している場合に、元のページの情報を更新すると他のページの情報も自動的に更新されるようにする方法のメモ。 概要 例えば、スケジュールが記述されている「schedule.html」のサマリーをトップページなどにも表示する場合、内容を更新するにはそれぞれのページを更新しなければならない。 これを jQuery の load() を利用して「schedule.html」を更新すると自動的に他のページも更新されるようにしてみる。 schedule.html 抜粋 上記の schedule.html の「table …

続きを読む

jQuery を使って要素の高さを揃える

2014年1月24日

高さの異なる要素をフロートさせて並べる時に、jQuery を使ってそれぞれの高さを揃えて並べる方法に関するメモ。 横に並んだ要素の高さを揃える 以下のサンプルは div 要素(class=”foo”)をフロートで並べて表示する例。それぞれの高さが異なるので、同じ高さを指定しなければきれいに横には並ばない。 サンプル1 サンプルの「高さを揃える」をクリックすると、同じ行(横の列)の要素の最大の高さを検出して横に並べる。 HTML CSS このサンプルの場合、div 要素(class=”foo”)を3つずつ横に…

続きを読む

カルーセルパネル(スライドパネル)の表示

2014年1月14日

カルーセルパネル(パネルをスライドして1周すると元のパネルに戻る)やスライドパネルを使う際のメモと練習(実用的でないものがほとんど)。 カルーセルパネルの表示(サンプル1) サンプル1 シンプルなカルーセルパネルを表示する。 カルーセル全体を囲む div 要素を配置(id=”slider_wrap”) その内側に「戻る」(slider_prev)と「進む」(slider_next)ボタンを配置 パネルを表示する領域の div 要素(id=”slider”)を配置(overflow: hidden に設定) …

続きを読む

パララックス効果を使ってみる

2013年12月29日

パララックスをあまりよく理解できていないので練習を兼ねたメモ。 サンプル スクロールにより背景画像を動かす スクロールしてある位置まで来ると、背景画像を動かす単純な例。 「div1 」の位置までスクロールすると、「クラス picture」の背景画像を下方向に動かす例。 背景画像は 960×800 のサイズの画像を用意 画像を表示する領域「クラス picture」の高さは500px background-position は「0 0」(left top) サンプル 1 HTML CSS スクロール量が「div1 」の位置に達したら、「クラス pi…

続きを読む

背景画像を使ったパララックス

2013年12月28日

背景画像を使ったパララックスに関するメモ。 参考にさせていただいたサイト: 「HTML5 × CSS3 × jQueryを真面目に勉強 – #6 パララックスエフェクトの基本」 CSSを使ったパララックス jQuery を使用しないで CSS で単純なパララックス(背景画像を固定して表示)を実現する方法。 各 div 要素(#first, #second, #third, #end)に背景画像(960 x 800)を用意 「background-attachment プロパティ」の値を「fixed」に指定(背景画像はブラウザの表示領域に対して固定される)…

続きを読む

パララックス(基本的なことに関するメモ)

2013年12月28日

jQuery と CSS を使っての基本的なパララックス効果に関するメモ。 参考にさせていただいたサイト:「パララックスサイトを作ろう」ドットインストール スクロールで要素を動かす 以下は、スクロールすると3つの要素がそれぞれ動くようにするサンプル。 サンプル用の構造 jQuery を読み込む jQuery を記述する pallarax.js を読み込む CSS(pallarax.css) を読み込む 3つの div 要素に class で、幅、高さ、位置(top)、ポジション(fixed)を指定 3つの div 要素に id で位置(left)、色を指…

続きを読む

jPlayer (2.5.0) を使ってみる

2013年12月15日

目次 以前「audio.js」を使用したが、環境によっては IE8 以下ではエラーが発生してしまったので別のオーディオ再生用のプラグインを探したら見つかった「jPlayer」に関するメモ。「jPlayer」はビデオの再生も可能だがまだ試していない。 以下は「jPlayer 2.5.0 Quick Start Guide」から。 ダウンロードと配置 jPlayer をダウンロードして、JavaScript ファイル(jquery.jplayer.min.js)と SWF ファイル (Jplayer.swf)を適当なディレクトリに配置(/js/jquery….

続きを読む

JavaScript で文字列が英語かどうかを判定する

2013年12月13日

取得した文字列が英語か日本語か判定する必要があったので調べたメモ。 charCodeAt() string.charCodeAt(n) 特定の場所の文字エンコーディングを返す 引数 n:エンコーディングが返される文字のインデックス 戻り値:string 内の n 番目の文字の Unicode エンコーディング(0 から 65535 までの 16 ビットの整数)。 使用例 コンソールの出力結果 97 98 99 46 32 35 125 何らかのテキスト(以下の例では「title」)を取得して、それが英語かどうかを判定する例。 charCodeAt(i) …

続きを読む

リサイズ $(window).resize が終了した時点で実行

2013年12月13日

リサイズのイベントは多数発生するので、リサイズが終了した時点である処理を実行する場合の方法のメモ。(「[jQuery] ウインドウのリサイズ操作が終わった時にだけ処理を実行する」を参考にさせていただきました。) setTimeout()メソッド このメソッドに関数と時間(ミリ秒)を指定すると、指定した時間が経過したときに、指定した関数が実行される。 また setTimeout() の戻り値(タイマーID:整数)を claerTimeout() に渡すと関数の実行が取り消される。 リサイズが終了した時点で何らかの処理を実行する場合は以下のようにする。 タイ…

続きを読む