Comment faire pour désactiver le javascript pour le responsive design

J'ai été en utilisant supersized jQuery pour le diaporama d'arrière-plan de mon site web. Je suis en train de le site web réactif et à l'aide de css media queries.

Je voudrais être en mesure de désactiver le script quand il est en dessous de 480px.

Voici le script pour le curseur de fond

$(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 de média vient de mettre #supersized comme display:none

Est cette mauvaise pratique, même si, comme il aurait toujours le script en cours d'exécution et est-il préférable de le désactiver en quelque sorte?

Vous pouvez utiliser Modernizr pour faire des requêtes de média à partir de JavaScript.
vous pouvez simplement tester si la fenêtre est plus grande que 480px ........ $(document).ready(function(){ if($(window).largeur()>480){ // ICI VOTRE CODE // } });

OriginalL'auteur Suzi Larsen | 2012-11-05

9

Comme d'autres l'ont mentionné, il ya beaucoup de plugins jQuery, vous pouvez utiliser. Cependant, si vous souhaitez utiliser est tout simplement la vanille jQuery vous pouvez aussi faire ce que vous voulez.

Vous pouvez utiliser la méthode de redimensionnement en jquery pour détecter la taille de la fenêtre.
```
$(window).resize(function() {
if ($(this).width() > 480) {
//call supersize method
}
});
```
Puis sur la doc prêt, assurez-vous simplement d'appeler le redimensionnement de la fenêtre de sorte qu'il sera d'abord appeler ou ne pas appeler la méthode en fonction de la fenêtre de votre taille actuelle:
```
$(document).ready(function() {
$(window).resize();
});
```
PS > Si vous n'avez pas besoin de ce script à exécuter chaque fois que la fenêtre est redimensionnée, mais plutôt seulement quand il a atteint au-dessous de 480 pixels, de légères modifications peuvent être apportées à séparer la méthode de redimensionnement après votre script doit être désactivée ou activée.

Ça va fonctionner, mais si vous décidez que vous souhaitez cette fonctionnalité à 500px au lieu de cela, vous aurez besoin de mettre à jour votre mediaquery ET javascript. À l'aide de Asad de la solution vous ne devez mettre à jour les mediaquery

OriginalL'auteur Andrew White
6

Vous pouvez détecter la largeur de l'écran avec le JavaScript, à l'aide de l'écran.largeur, et ensuite 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
}
```
Envelopper toutes vos animations et tout le code que vous ne pas voulez exécuter à l'intérieur du bloc else pour les cas où la taille de l'écran est inférieur à 480.

Comme un mot de prudence, c'est à dire a tendance à faire des choses différentes, et je n'ai pas IE pour tester, de sorte que vous pouvez exécuter à l'écran.largeur de là et de s'adapter à toutes les différences, si nécessaire. Mais dans Chrome, écran.largeur retourne 1280, qui est la bonne largeur pour mon écran.

OriginalL'auteur jmort253
4

Vous pouvez définir un div caché avec quelques règles css à l'intérieur d'une requête des médias, vérifiez les attributs css avec jQuery css() et mettez votre diaporama sur on ou off. Plus précisément:
```
@media all and (max-width: 480px) {
#testdiv{
display:none;
}
}
```
Et js:
```
if($("#testdiv").css("display") == "none"){
$.supersized({...});
}
```
Noter que c'est essentiellement à l'aide de la Modernizr approche sans réellement arriver à la bibliothèque.

OriginalL'auteur Asad Saeeduddin
0

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

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

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

OriginalL'auteur amustill
0

@Pointu noté dans les commentaires, modernizr vous permet d'appeler les requêtes de média à partir de javascript. Lire la modernizr documentation

OriginalL'auteur Mark Meyer
0

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

OriginalL'auteur christophel

Vous devez vous connecter pour publier un commentaire.