要素を含むかどうかを調べるのは、$.contains( ) たとえばスクロールイベントを想定してみます。 特定の要素上でスクロールされたときのみ、任意の処理を止めることが可能です。 文字列を含むかどうかの判定は:containsフィルターを使えばよいのですが、ある…

onメソッドを再確認 動的に生成された要素にイベントをバインドするには、現行のjQueryではon/offを用います。 ところが、頻繁に生成・削除が繰り返されるような要素であったり、Ajaxによって生成にタイムラグが発生する要素の場合、うまくバインドできない…

<meta name="viewport" content="width=device-width">が無視される 最新版のIE（特にWindowsPhoneやSurfaceなどのモバイル端末）において、viewportの指定が無視されることがあります。 すなわち、viewportのサイズが端末の画面サイズではなく、端末の解像度そのままになってしまい、モバイルなのに大画面用のス</meta>…

jQueryには適切なメソッドはなし 百聞は一見にしかずということで、まずはこちらをご覧ください。 white-spaceにpreが指定してあるため、文章は改行せずに、あふれてしまいます。 ここで求めたいのは矢印で示された領域です。 もしもoverflow:hiddenが指定さ…

非同期読み込みの際は注意 HTMLやCSSがキャッシュされてしまい、変更が反映されないということはよくありますが、もちろんJSもキャッシュされます。 特にAjaxなどを用いた非同期読み込みの際はキャッシュされることがあるので注意です。 $.ajaxを用いた場合 …

公式のリンクでは、iOSとandroidとで挙動に差が出てしまうのですが、下記リンクならLINEアプリケーションを直接起動させることができます。 <a href="line://msg/text/送りたいテキスト" target="_blank">LINEで送る</a> 送りたいテキストの部分は、エンコードしなくても大丈夫なようです。

font-sizeに起因 画像を縦に積み上げるように配置した際に、隙間ができてしまうことがあります。 特にIE6/7で現れる現象です。 IEでは著名なバグのようで、vertica-align:bottomだけでは直りません。 font-sizeに起因する現象のようです。 imgに以下のスタイ…

background-sizeに起因 CSS3ではグラデーションをスタイルシートで設定できるようになりましたが、まれに端末によっては、下図のように意図しない表示をしてしまうときがあります。 もしbackgroundプロパティでグラデーションを実装している場合、（たとえCS…

floatさせた要素は親要素におさまりきらない場合、自動的にカラム落ちしますが、IE6/7において意図しない挙動をすることがあります。 たとえばカラム落ちせずに次の行の先頭へ改行してしまったり、次の行にもいかずにテーブルのセルのように幅がとても狭くな…

ブラウザごとに限界値がある background-imageで巨大なサイズの画像を読み込ませるとき、ブラウザによっては表示できなかったり、イレギュラーな表示をする場合があります。 リピートさせずに表示させたいとき、Safari(iOS)とFirefoxは要注意。 特にSafariで…

IE8以下のみで失敗する場合 IE8以下は、すでにブラウザがキャッシュをしている場合、onloadメソッドが走りません。（最新のブラウザではキャッシュをしていても走ります） var img = new Image(); img.src = hoge.jpg'; img.onload = function(){ //IE8以下…

使用するメソッド 置換などで活躍する正規表現ですが、サブマッチ文字列を参照して利用する（後方参照）場面も時おりあります。 個人的にも理解が曖昧な部分があったため、整理がてらまとめました。 正規表現によるマッチングを行うには、RegExp.exec とStri…

jQueryオブジェクト → DOMオブジェクト getメソッドの戻り値を参照します。jQueryオブジェクトの集合に対してgetメソッドを実行するとDOM オブジェクトの配列が返されます。 id名で指定したときなど一つしかない場合は0番目を、クラス名で指定したときなど複…

要素を動的に生成し、headの子要素として追加する head内にCSSを記述するのと同じ結果になります。 jQueryのcssメソッドとは異なり、要素そのものにスタイルは直書きされません。 パフォーマンス向上のため、ページ読込み後に意図的に特定のスタイルシートを…

以前、iframeについていくつか記事を書かせて頂きましたが、その続編です。 iframeで別ページを読み込む際、同じドメインでないとエラーが発生し、iframe内の要素にアクセスすることができなくなってしまいます。 一例ですが、子ページと同じ大きさにiframe…

右クリックを禁止する 右クリックは、contextmenuイベントで捕捉することができます。 コンテキストメニューが出ないようブラウザのデフォルトの動作を中止させます。 $('img').on('contextmenu', function(e) { e.preventDefault(); }); 関数内にalertを書…

iframeで外部HTMLを呼び出す際、iframe内のキャッシュが強すぎて意図しない挙動をすることがあります。 たとえば、同じページのみを呼び出し続ける等。 metaでキャッシュを残さないこともできますが、レギュレーション上できない場合があります。 そんなとき…

transparentとallowtransparencyを指定 (1) まず、iframeで読み込まれる側のページの背景を透過にする body{ background-color:transparent; } しかしこのままだとIE(8以下)では透過されません。 (2)iframeにallowtransparency属性を指定 <iframe src="○○○.html" allowtransparency="true"> ～ </iframe>