Come disabilitare javascript per il responsive design

Question

Ho utilizzato jQuery supersized per lo sfondo della presentazione del mio sito web. Sto rendendo il sito reattivo e utilizzando le query media CSS.

Mi piacerebbe poter disabilitare lo script quando è inferiore a 480px.

Ecco lo script per lo sfondo di scorrimento attuale

$(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 

      }); 
     }); 

stavo pensando che potrei farlo semplicemente semplicemente utilizzando il CSS, per esempio nel mio media query solo mettendo #supersized come display: none

Questa cattiva pratica è valida, poiché lo script è ancora in esecuzione ed è meglio disabilitarlo in qualche modo?

Answer 1

Come già menzionato, ci sono molti plugin jQuery che è possibile utilizzare. Tuttavia, se tutto quello che vuoi usare è semplicemente jillery, puoi anche fare quello che vuoi.

È possibile utilizzare il metodo di ridimensionamento in jquery per rilevare la dimensione della finestra.

$(window).resize(function() { 
    if ($(this).width() > 480) { 
     // call supersize method 
    } 
}); 

Poi sul doc pronto, tanto per essere sicuro di chiamare la finestra di ridimensionamento così sarà inizialmente chiamare o non chiamare il metodo a seconda della dimensione attuale finestra:

$(document).ready(function() { 
    $(window).resize(); 
}); 

PS> Se non lo fai è necessario che questo script venga eseguito ogni volta che la finestra viene ridimensionata, ma solo quando raggiunge meno di 480 pixel, è possibile apportare leggere modifiche per separare il metodo di ridimensionamento dopo che lo script deve essere disabilitato o abilitato.

Answer 2

jRespond, uno script rilasciato da Viget consente di controllare JavaScript in base alle dimensioni della vista:

articolo: http://viget.com/inspire/managing-javascript-on-responsive-websites

Codice: https://github.com/ten1seven/jRespond

Answer 3

è possibile impostare un div nascosto con alcune regole CSS all'interno una query multimediale, quindi controlla gli attributi css con jQuery css() e in base a quel turno attivare o disattivare la presentazione. In particolare:

@media all and (max-width: 480px) { 
    #testdiv{ 
     display:none; 
    } 
} 

e JS:

if($("#testdiv").css("display") == "none"){ 
    $.supersized({...}); 
} 

notare che questa è essenzialmente utilizzando l'approccio Modernizr senza realmente ottenere la libreria.

Answer 4

Come @Pointy indicato nei commenti, modernizr consente di chiamare le query multimediali da javascript. Leggi il modernizr documentation

Answer 5

È possibile rilevare la larghezza dello schermo con JavaScript, utilizzando screen.width, e quindi determinare cosa si vuole fare da lì.

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 
} 

Wrap tutte le animazioni e tutto il codice che non si desidera eseguire all'interno del blocco altro per i casi in cui la dimensione dello schermo è inferiore a 480.

Come una parola di cautela, IE tende a fare cose diverse, e non ho IE da testare, quindi potresti voler eseguire screen.width e correggere eventuali differenze, se necessario. Ma in Chrome, screen.width restituisce 1280, che è la larghezza corretta per il mio schermo.

Answer 6

Penso che la soluzione di Asad sia la migliore o si usi modernizr. Poiché si dispone della definizione del punto di interruzione (480px) in un singolo file e non in JS e in CSS. Se si utilizza SCSS, è disponibile una sola definizione per il punto di interruzione in una variabile.