Comment désactiver le javascript pour un design réactif

Question

J'ai utilisé jQuery surdimensionné pour l'arrière-plan du diaporama de mon site Web. Je rends le site Web réactif et en utilisant des requêtes de médias CSS.

Je voudrais être capable de désactiver le script lorsqu'il est inférieur à 480px.

Voici le script pour l'arrière-plan de curseur réelle

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

      }); 
     }); 

Je pensais que je pouvais le faire simplement en utilisant simplement le css, par exemple dans ma requête des médias font qu'exercer #supersized comme display: none

Est-ce une mauvaise pratique, car le script est toujours en cours d'exécution et est-il préférable de le désactiver d'une manière ou d'une autre?

Answer 1

Comme mentionné précédemment, il y a beaucoup de plugins jQuery que vous pouvez utiliser. Cependant, si tout ce que vous voulez utiliser est simplement la vanille jQuery, vous pouvez aussi faire ce que vous voulez.

Vous pouvez utiliser la méthode de redimensionnement dans jquery pour détecter la taille de la fenêtre.

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

Puis doc prêt, juste être sûr d'appeler la fenêtre de modification de taille de sorte qu'il sera d'abord appeler ou pas appeler la méthode en fonction de votre taille actuelle de la fenêtre:

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

PS> Si vous n'êtes pas Ce script doit être exécuté chaque fois que la fenêtre est redimensionnée, mais uniquement lorsqu'elle atteint moins de 480 pixels. De légères modifications peuvent être apportées pour dissocier la méthode de redimensionnement après que votre script doit être désactivé ou activé.

Answer 2

jRespond, un script publié par Viget vous permet de JavaScript contrôler en fonction de la taille de la fenêtre:

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

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

Answer 3

Vous pouvez définir un div caché avec quelques règles CSS dans une requête multimédia, puis vérifiez ces attributs css à l'aide de css() de jQuery et en fonction de ce paramètre, activez ou désactivez votre diaporama. Plus précisément:

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

Et js:

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

Notez que cela utilise essentiellement l'approche Modernizr sans avoir fait la bibliothèque.

Answer 4

Comme l'indique @Pointy dans les commentaires, modernizr vous permet d'appeler des requêtes média à partir de javascript. Lire le modernizr documentation

Answer 5

Vous pouvez détecter la largeur de l'écran avec JavaScript, en utilisant screen.width, puis déterminer ce que vous voulez faire à partir de 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 toutes vos animations et tout le code que vous ne pas veulent courir à l'intérieur du bloc autre pour les cas où la taille de l'écran est inférieure à 480.

Comme un mot d'avertissement, IE a tendance à faire les choses différemment, et je n'ai pas IE à tester, donc vous voudrez peut-être lancer screen.width et ajuster les différences, si nécessaire. Mais dans Chrome, screen.width renvoie 1280, ce qui correspond à la largeur correcte pour mon écran.

Answer 6

Je pense que la solution d'Asad est la meilleure ou que vous utilisez modernizr. Parce que vous avez la définition du point d'arrêt (480px) dans un seul fichier et non dans JS et CSS. Si vous utilisez SCSS, vous n'avez qu'une seule définition pour le point d'arrêt dans une variable.