jQuery

jQuery 関連のメモ

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

2014年2月7日

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

続きを読む

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

2014年1月26日

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

続きを読む

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

2014年1月24日

高さの異なる要素をフロートさせて並べる時に、jQuery を使ってそれぞれの高さを揃えて並べる方法に関するメモ。 横に並んだ要素の高さを揃える 以下のサンプルは div 要素(class=”foo”)をフロートで並べて表示する例。それぞれの高さが異なるので、同じ高さを指定しなければきれいに横には並ばない。 サンプル1 サンプルの「高さ…

続きを読む

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

2014年1月14日

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

続きを読む

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

2013年12月29日

パララックスをあまりよく理解できていないので練習を兼ねたメモ。 サンプル スクロールにより背景画像を動かす スクロールしてある位置まで来ると、背景画像を動かす単純な例。 「div1 」の位置までスクロールすると、「クラス picture」の背景画像を下方向に動かす例。 背景画像は 960×800 のサイズの画像を用意 画像を表示する領域「クラス p…

続きを読む

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

2013年12月28日

背景画像を使ったパララックスに関するメモ。 参考にさせていただいたサイト: 「HTML5 × CSS3 × jQueryを真面目に勉強 – #6 パララックスエフェクトの基本」 CSSを使ったパララックス jQuery を使用しないで CSS で単純なパララックス(背景画像を固定して表示)を実現する方法。 各 div 要素(#first, #second, …

続きを読む

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

2013年12月28日

jQuery と CSS を使っての基本的なパララックス効果に関するメモ。 参考にさせていただいたサイト:「パララックスサイトを作ろう」ドットインストール スクロールで要素を動かす 以下は、スクロールすると3つの要素がそれぞれ動くようにするサンプル。 サンプル用の構造 jQuery を読み込む jQuery を記述する pallarax.js を読み込む C…

続きを読む

jPlayer (2.5.0) を使ってみる

2013年12月15日

目次 以前「audio.js」を使用したが、環境によっては IE8 以下ではエラーが発生してしまったので別のオーディオ再生用のプラグインを探したら見つかった「jPlayer」に関するメモ。「jPlayer」はビデオの再生も可能だがまだ試していない。 以下は「jPlayer 2.5.0 Quick Start Guide」から。 ダウンロードと配置 jPlay…

続きを読む

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

2013年12月13日

取得した文字列が英語か日本語か判定する必要があったので調べたメモ。 charCodeAt() string.charCodeAt(n) 特定の場所の文字エンコーディングを返す 引数 n:エンコーディングが返される文字のインデックス 戻り値:string 内の n 番目の文字の Unicode エンコーディング(0 から 65535 までの 16 ビットの整数…

続きを読む

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

2013年12月13日

リサイズのイベントは多数発生するので、リサイズが終了した時点である処理を実行する場合の方法のメモ。(「[jQuery] ウインドウのリサイズ操作が終わった時にだけ処理を実行する」を参考にさせていただきました。) setTimeout()メソッド このメソッドに関数と時間(ミリ秒)を指定すると、指定した時間が経過したときに、指定した関数が実行される。 また s…

続きを読む