11521 sujets

JavaScript, DOM et API Web HTML5

Exécuter javascript selon la taille de la fenêtre

Bonjour,

Je cherche à ne pas exécuter un script lorsque la fenêtre fait moins de 1200 pixels, que cela soit calculé lorsque l'on resize la page et pas seulement lorsqu'on la recharge. Merci pour votre aide.

Voici à quoi ressemble mon code qui ne fonctionne pas écrit ainsi : 

$(document).ready(function(){
 
 
 
var windowsize = $(window).width();
var totalHeight = $(document.body).outerHeight();
var scrollHContainer = $('.scroll-h-container');
var lastScrollHItem = $('.scroll-h-item:last-child');
var scrollContainerWidth = lastScrollHItem.offset().left + lastScrollHItem.outerWidth();
var scrollVContainer = $('.scroll-v-container');
var lastScrollVItem = $('.scroll-v-item:last-child');
var scrollContainerHeight = lastScrollVItem.offset().top + lastScrollVItem.outerHeight();
 
$(window).resize(function() {
windowsize = $(window).width();
if (windowsize >= 1200) {
$(window).scroll(function () {
var percent = $(window).scrollTop() / (totalHeight - window.innerHeight);
 
scrollHContainer.css({
transform: 'translateX('+(-percent * (scrollContainerWidth - $('.scroll-h').outerWidth()))+'px)'
})
 
// scrollVContainer.css({
// transform: 'translateY('+(-percent * (scrollContainerHeight - $('.scroll-v').outerHeight()))+'px)'
// })
})
}
});
 
 
 
 
});



Mais qui fonctionne cependant écrit comme cela (c'est-à-dire calculer la taille de la page seulement à la recharge) : 


$(document).ready(function(){
 
 
 
if($(window).width() >= 1024) {
var totalHeight = $(document.body).outerHeight();
var scrollHContainer = $('.scroll-h-container');
var lastScrollHItem = $('.scroll-h-item:last-child');
var scrollContainerWidth = lastScrollHItem.offset().left + lastScrollHItem.outerWidth();
 
var scrollVContainer = $('.scroll-v-container');
var lastScrollVItem = $('.scroll-v-item:last-child');
var scrollContainerHeight = lastScrollVItem.offset().top + lastScrollVItem.outerHeight();
 
$(window).scroll(function () {
var percent = $(window).scrollTop() / (totalHeight - window.innerHeight);
 
scrollHContainer.css({
transform: 'translateX('+(-percent * (scrollContainerWidth - $('.scroll-h').outerWidth()))+'px)'
})
 
// scrollVContainer.css({
// transform: 'translateY('+(-percent * (scrollContainerHeight - $('.scroll-v').outerHeight()))+'px)'
// })
})
}
 
 
 
 
});
Je suis vraiment novice en javascript et je comprends pas qu'est-ce que je pourrais mettre après "else" si je veux juste désactiver le script quand la fenêtre fait moins de 1200 avec les matchMedia.

<script>
if (window.matchMedia("(min-width: 600px)").matches) {
  /* La largeur minimum de l'affichage est 600 px inclus */
} else {
  /* L'affichage est inférieur à 600px de large */
}
</script>
Sujet clos
Aller à