Comment désactiver JavaScript pour un design réactif

J'ai utilisé un jQuery pour l'arrière-plan du diaporama de mon site. Je rends le site Web réactif et j'utilise les requêtes des médias css.

Je voudrais pouvoir désactiver le script lorsqu'il est inférieur à 480px.

Voici le script pour l'arrière-plan du curseur actuel

$(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 pourrais le faire simplement en utilisant simplement le css, par exemple dans ma requête multimédia en mettant #supersized comme affichage: aucun

Est-ce une mauvaise pratique, car il aurait toujours le script en cours d'exécution et est-il préférable de le désactiver de quelque façon?

Comme d'autres l'ont mentionné, il existe de nombreux plugins jQuery que vous pouvez utiliser. Cependant, si tout ce que vous voulez utiliser est juste jolie vanilla, vous pouvez également 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 } });

Ensuite, sur doc ready, assurez-vous d'appeler la fenêtre de redimensionnement afin qu'il appelle ou n'appelle pas la méthode en fonction de la taille actuelle de votre fenêtre:

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

PS> Si vous n'avez pas besoin de ce script à exécuter chaque fois que la fenêtre redimensionne, mais plutôt que lorsqu'elle atteint moins de 480 pixels, de légères modifications peuvent être apportées pour déconcerter la méthode de redimensionnement une fois que votre script doit être désactivé ou activé.

Vous pouvez détecter la largeur de l'écran avec JavaScript, utiliser screen.width, puis déterminer ce que vous souhaitez 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 }

Enroulez toutes vos animations et tout le code que vous ne souhaitez pas exécuter dans le bloc else pour les cas où la taille de l'écran est inférieure à 480.

Comme un mot de prudence, IE a tendance à faire les choses différentes, et je n'ai pas IE à tester, donc vous voudrez peut-être exécuter screen.width là et ajuster pour toutes les différences, si nécessaire. Mais dans Chrome, screen.width renvoie 1280, qui est la largeur correcte pour mon écran.

Vous pouvez configurer une division cachée avec certaines règles css dans une requête multimédia, puis vérifier ces attributs css avec css() de jQuery et en fonction de ce que votre diaporama est activé ou désactivé. Plus précisément:

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

Et js:

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

Notez que ceci consiste essentiellement à utiliser l'approche Modernizr sans avoir réellement obtenu la bibliothèque.

JRespond, un script publié par Viget vous permet de contrôler JavaScript 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

Comme @Pointy a noté dans les commentaires, modernizr vous permet d'appeler des requêtes multimédias à partir de javascript. Lire la documentation moderne

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