JavaScript/Tips をテンプレートにして作成

開始行:
*JavaScript Tips よくある質問への回答｜随時追加 ~ ***CONTENTS #contents2_1 ~ ***スクロールしただけで resize イベントが発生してしまう iOS では、スクロール時にリサイズイベントが発火するので、... -一般的な記述（iOSのスクロールでも実行される） $(function (){ // Window リサイズ時の処理 $(window).on('resize',function(){ // ここに、resize時に行う処理を書く }); }); -修正した記述（iOSのスクロールによる誤動作を回避） $(function (){ // 読み込み時に Windowの初期幅を取得しておく var currentWidth = window.innerWidth; // Window リサイズ時の処理 $(window).on('resize',function(){ // iOSのスクロールで同時発火する resize イベントは... if ( currentWidth == window.innerWidth ) { return; } // 本当にリサイズされた場合は、現在幅をバックアップ currentWidth = window.innerWidth; // ここに、resize時に行う処理を書く }); }); ~ ***iOS で要素をタッチしてもクリックイベントが発生しない iOSでは HTMLで通常クリックが期待される要素（button、a な... これを解決するには、当該要素を「クリックが期待される要素... .target { cursor: pointer; } 基本的には Javascript で以下のようにきちんと記載すれば問... $('.target').on('click', function(){ /* 処理内容 */}); ~ ***タブレット iPad でホバリングメニューは？ 要素に ontouchend を書き加えるだけでタブレット等でもホバ... <div id="menuBar" ontouchend> ~ ***当該要素を特定する方法（jQuery） 例えば、画像を複数配置したページで、「マウスオーバーで画... 例えば以下のような img 要素が複数列挙されているとします。 <img class="fade" src="images/xxxx.jpg"> 同様の要素が複数ある場合、上記の .fade のように class を... $(".fade").hover( function(){ $(.fade).fadeTo("slow", 1.0); }, function(){ $(.fade).fadeTo("slow", 0.2); } ); 当該要素のみを選択的に操作するには this を使って以下のよ... $(".fade").hover( function(){ $(this).fadeTo("slow", 1.0); }, function(){ $(this).fadeTo("slow", 0.2); } ); この事例は、以下にあります。 DEMO：https://koichi-inoue.github.io/JQ_Effects/ Download：https://github.com/koichi-inoue/JQ_Effects ~ ***隣接する要素を特定する方法（jQuery） 例えば、ボタンと画像のペアを複数配置したページで、「ボタ... 例えば以下のような div 要素が複数列挙されているとします。 <div> <button class="button">Title</button> <img class="toggleImage" src="images/monalisa.jpg"> </div> 同様の要素が複数ある場合、上記の .button や .toggleImage ... $(".button").click( function () { $(".toggleImage").slideToggle(); }); そこで、クリックされた要素に隣接した要素のみを選択的に操... ''$(this).next(要素).slideToggle();'' 具体的には、以下のような書き方になります。 $( function(){ $(".toggleImage").hide(); // 画像の初期状態（隠... $(".button").click( function () { $(this).next(".toggleImage").slideToggle(); }); }); サンプル：&ref(ToggleSample.zip); ~ ***jQueryのバージョンを上げたらエラー 開発コンソールで確認すると、以下のようなエラーが表示され... Syntax error, unrecognized expression: a[href^=#] jQuery の仕様が変更されたため、以下の記述が問題となってい... $('a[href^=#]').click(function () { ~ 内側の引用符を足せばエラーは解消されると思います。 $('a[href^="#"]').click(function () { ~ ~ ~

終了行:
*JavaScript Tips よくある質問への回答｜随時追加 ~ ***CONTENTS #contents2_1 ~ ***スクロールしただけで resize イベントが発生してしまう iOS では、スクロール時にリサイズイベントが発火するので、... -一般的な記述（iOSのスクロールでも実行される） $(function (){ // Window リサイズ時の処理 $(window).on('resize',function(){ // ここに、resize時に行う処理を書く }); }); -修正した記述（iOSのスクロールによる誤動作を回避） $(function (){ // 読み込み時に Windowの初期幅を取得しておく var currentWidth = window.innerWidth; // Window リサイズ時の処理 $(window).on('resize',function(){ // iOSのスクロールで同時発火する resize イベントは... if ( currentWidth == window.innerWidth ) { return; } // 本当にリサイズされた場合は、現在幅をバックアップ currentWidth = window.innerWidth; // ここに、resize時に行う処理を書く }); }); ~ ***iOS で要素をタッチしてもクリックイベントが発生しない iOSでは HTMLで通常クリックが期待される要素（button、a な... これを解決するには、当該要素を「クリックが期待される要素... .target { cursor: pointer; } 基本的には Javascript で以下のようにきちんと記載すれば問... $('.target').on('click', function(){ /* 処理内容 */}); ~ ***タブレット iPad でホバリングメニューは？ 要素に ontouchend を書き加えるだけでタブレット等でもホバ... <div id="menuBar" ontouchend> ~ ***当該要素を特定する方法（jQuery） 例えば、画像を複数配置したページで、「マウスオーバーで画... 例えば以下のような img 要素が複数列挙されているとします。 <img class="fade" src="images/xxxx.jpg"> 同様の要素が複数ある場合、上記の .fade のように class を... $(".fade").hover( function(){ $(.fade).fadeTo("slow", 1.0); }, function(){ $(.fade).fadeTo("slow", 0.2); } ); 当該要素のみを選択的に操作するには this を使って以下のよ... $(".fade").hover( function(){ $(this).fadeTo("slow", 1.0); }, function(){ $(this).fadeTo("slow", 0.2); } ); この事例は、以下にあります。 DEMO：https://koichi-inoue.github.io/JQ_Effects/ Download：https://github.com/koichi-inoue/JQ_Effects ~ ***隣接する要素を特定する方法（jQuery） 例えば、ボタンと画像のペアを複数配置したページで、「ボタ... 例えば以下のような div 要素が複数列挙されているとします。 <div> <button class="button">Title</button> <img class="toggleImage" src="images/monalisa.jpg"> </div> 同様の要素が複数ある場合、上記の .button や .toggleImage ... $(".button").click( function () { $(".toggleImage").slideToggle(); }); そこで、クリックされた要素に隣接した要素のみを選択的に操... ''$(this).next(要素).slideToggle();'' 具体的には、以下のような書き方になります。 $( function(){ $(".toggleImage").hide(); // 画像の初期状態（隠... $(".button").click( function () { $(this).next(".toggleImage").slideToggle(); }); }); サンプル：&ref(ToggleSample.zip); ~ ***jQueryのバージョンを上げたらエラー 開発コンソールで確認すると、以下のようなエラーが表示され... Syntax error, unrecognized expression: a[href^=#] jQuery の仕様が変更されたため、以下の記述が問題となってい... $('a[href^=#]').click(function () { ~ 内側の引用符を足せばエラーは解消されると思います。 $('a[href^="#"]').click(function () { ~ ~ ~

ページ名: