レスポンシブサイトの制作で、「スマホレイアウトの時だけプラグイン適用したい」という要望があり、
ネットの情報を参考に「スマホ時にプラグイン適用」まではできたのですが、
ウィンドウサイズ変更でPCレイアウトにした時に、一度適用されたプラグイン(スライダー等)を解除するにはどうしたら良いのか分かりません。
現状のコードは以下の通りです。
JavaScript
1$(function(){ 2 3function slideHuck(){ 4 var w = $(window).width(); 5 var size = 640; 6 if (w <= size) { 7 //スマホレイアウト時にスライダープラグインを実行 8 $("#slider01").slick(); 9 } else { 10 //★PCレイアウトの時にはスライダー等の処理を解除したい 11 } 12} 13slideHuck(); 14 15var timer = false; 16$(window).resize(function() { 17 if (timer !== false) { 18 clearTimeout(timer); 19 } 20 timer = setTimeout(function() { 21 //リサイズ完了時に実行 22 slideHuck(); 23 }, 200); 24}); 25 26});
スマホ幅からPC幅にウィンドウサイズを変更した際に再読み込みすればもちろん解除にはなるのですが、
再読み込みせずに自動的に解除できる方法があるならそうしたいです。
「一度実行したものを解除する」という考え方自体がもしかしたらよろしくないのかもしれませんが、
現状自分の知識の範囲だとそれ以外の方法が思いつきません。
何か参考になるアドバイスをいただけますと助かります。
(JSについてはjQueryなら何とか、、という程度なので、もし生JavaScriptの機能等が必要になるようでしたら、どの辺を勉強すれば良いのか合わせてアドバイスいただけますと嬉しいです。)
なお、スマホレイアウト時にだけ実行されるのは、スライダー等の既存のプラグインの場合もありますし、
自作の関数である場合もあります。どちらでも共通でできる方法があればよいですが、
既存プラグイン実行と自作関数実行の場合でもし手法が異なるようでしたら、それぞれの場合の考え方・必要な機能等の情報をいただけますと助かります。
よろしくお願い申し上げます。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/07/12 10:10
2016/07/12 10:36