レスポンシブデザインのJavaScriptを無効にする方法
私は自分のウェブサイトのスライドショーの背景に超大型のjQueryを使用しています。私はウェブサイトをレスポンシブにし、cssメディアクエリを使用しています。
スクリプトが480px未満の場合、スクリプトを無効にできるようにしたいと思います。
これが実際のスライダーの背景のスクリプトです
$(document).ready(function(){
jQuery(function($){
$.supersized({
// Functionality
slideshow : 1, // Slideshow on/off
autoplay : 0, // Slideshow starts playing automatically
start_slide : 1, // Start slide (0 is random)
stop_loop : 0, // Pauses slideshow on last slide
random : 0, // Randomize slide order (Ignores start slide)
slide_interval : 3000, // Length between transitions
transition : 6, // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
transition_speed : 1000, // Speed of transition
new_window : 1, // Image links open in new window/tab
pause_hover : 0, // Pause slideshow on hover
keyboard_nav : 1, // Keyboard navigation on/off
performance : 1, // 0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
image_protect : 1, // Disables image dragging and right click with Javascript
// Size & Position
min_width : 0, // Min width allowed (in pixels)
min_height : 0, // Min height allowed (in pixels)
vertical_center : 1, // Vertically center background
horizontal_center : 1, // Horizontally center background
fit_always : 0, // Image will never exceed browser width or height (Ignores min. dimensions)
fit_portrait : 1, // Portrait images will not exceed browser height
fit_landscape : 0, // Landscape images will not exceed browser width
// Components
slide_links : 'blank', // Individual links for each slide (Options: false, 'num', 'name', 'blank')
thumb_links : 1, // Individual thumb links for each slide
thumbnail_navigation : 0, // Thumbnail navigation
slides : [ // Slideshow Images
{image : '/img/backgrounds/street-dance-background.jpg', title : 'Image Credit: Maria Kazvan', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-1.jpg', url : 'http://www.nonsensesociety.com/2011/04/maria-kazvan/'},
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-2.jpg', title : 'Image Credit: Maria Kazvan', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-2.jpg', url : 'http://www.nonsensesociety.com/2011/04/maria-kazvan/'},
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-3.jpg', title : 'Image Credit: Maria Kazvan', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-3.jpg', url : 'http://www.nonsensesociety.com/2011/04/maria-kazvan/'},
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-1.jpg', title : 'Image Credit: Colin Wojno', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-1.jpg', url : 'http://www.nonsensesociety.com/2011/03/colin/'},
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-2.jpg', title : 'Image Credit: Colin Wojno', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-2.jpg', url : 'http://www.nonsensesociety.com/2011/03/colin/'},
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-3.jpg', title : 'Image Credit: Colin Wojno', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-3.jpg', url : 'http://www.nonsensesociety.com/2011/03/colin/'},
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-1.jpg', title : 'Image Credit: Brooke Shaden', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-1.jpg', url : 'http://www.nonsensesociety.com/2011/06/brooke-shaden/'},
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-2.jpg', title : 'Image Credit: Brooke Shaden', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-2.jpg', url : 'http://www.nonsensesociety.com/2011/06/brooke-shaden/'},
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-3.jpg', title : 'Image Credit: Brooke Shaden', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-3.jpg', url : 'http://www.nonsensesociety.com/2011/06/brooke-shaden/'}
],
// Theme Options
progress_bar : 1, // Timer for each slide
mouse_scrub : 0
});
});
私は、cssを使用するだけでこれを実行できると考えていました。たとえば、メディアクエリでは、＃supersizedをdisplay：noneとして配置するだけです。
スクリプトはまだ実行されているので、これは悪い習慣ですか？何らかの方法で無効にするのが最善ですか？
他の人が述べたように、使用できるjQueryプラグインはたくさんあります。ただし、使用したいのが単なるVanilla jQueryだけの場合は、必要なことを実行することもできます。
Jqueryのresizeメソッドを使用して、ウィンドウのサイズを検出できます。
$(window).resize(function() {
if ($(this).width() > 480) {
// call supersize method
}
});
次に、ドキュメントの準備ができたら、必ずサイズ変更ウィンドウを呼び出して、ウィンドウの現在のサイズに応じてメソッドを最初に呼び出すか呼び出さないようにします。
$(document).ready(function() {
$(window).resize();
});
PS>ウィンドウのサイズが変更されるたびにこのスクリプトを実行する必要がなく、480ピクセル未満に達した場合にのみ、スクリプトを無効または有効にする必要が生じた後で、サイズ変更方法のバインドを解除するためにわずかな変更を加えることができます。
Screen.widthを使用してJavaScriptで画面幅を検出し、そこから何をしたいかを決定できます。
if(screen.width < 480) {
// do any 480 width stuff here, or simply do nothing
return;
} else {
// do all your cool stuff here for larger screens
}
画面サイズが480未満の場合に、すべてのアニメーションとすべてのコードをラップしますしない elseブロック内で実行します。
注意点として、IEは異なることをする傾向があり、テストするIEがないので、screen.widthを実行することをお勧めします。必要に応じて、違いを調整します。ただし、Chromeでは、screen.widthは1280を返します。これは、私の画面の正しい幅です。
メディアクエリ内のいくつかのcssルールで非表示のdivを設定し、jQueryのcss()でそれらのcss属性を確認し、それに基づいてスライドショーをオンまたはオフにすることができます。具体的には：
@media all and (max-width: 480px) {
#testdiv{
display:none;
}
}
そしてjs：
if($("#testdiv").css("display") == "none"){
$.supersized({...});
}
これは基本的に、実際にライブラリを取得せずに、Modernizrアプローチを使用していることに注意してください。
vigetによってリリースされたスクリプトであるjRespondを使用すると、ビューポートのサイズに基づいてJavaScriptを制御できます。
記事： http://viget.com/inspire/managing-javascript-on-responsive-websites
コメントで@Pointyが指摘しているように、modernizrではjavascriptからメディアクエリを呼び出すことができます。 modernizrのドキュメントを読む
Asadのソリューションが最適だと思います。または、modernizrを使用します。 JSやCSSではなく、単一のファイルにブレークポイント定義（480px）があるためです。 SCSSを使用する場合、変数のブレークポイントの定義は1つだけです。