Faire quelque chose si la largeur de l'écran est inférieure à 960 px.

Comment puis-je faire en sorte que jQuery fasse quelque chose si la largeur de mon écran est inférieure à 960 pixels ? Le code ci-dessous déclenche toujours la deuxième alerte, quelle que soit la taille de ma fenêtre :

if (screen.width < 960) {
    alert('Less than 960');
}
else {

    alert('More than 960');
}
Solution

Utilisez jQuery pour obtenir la largeur de la fenêtre.

if ($(window).width() < 960) {
   alert('Less than 960');
}
else {
   alert('More than 960');
}
Commentaires (3)

Vous pourriez vouloir le combiner avec un événement de redimensionnement :

 $(window).resize(function() {
  if ($(window).width() < 960) {
     alert('Less than 960');
  }
 else {
    alert('More than 960');
 }
});

Pour R.J. :

var eventFired = 0;

if ($(window).width() < 960) {
    alert('Less than 960');

}
else {
    alert('More than 960');
    eventFired = 1;
}

$(window).on('resize', function() {
    if (!eventFired) {
        if ($(window).width() < 960) {
            alert('Less than 960 resize');
        } else {
            alert('More than 960 resize');
        }
    }
});

J'ai essayé http://api.jquery.com/off/ sans succès donc j'ai utilisé le drapeau eventFired.

Commentaires (6)

utiliser

$(window).width()

ou

$(document).width()

ou

$('body').width()
Commentaires (0)