Exécuter javascript taille fenêtre
sibyline
-
sibyline -
sibyline -
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 :
Mais qui fonctionne cependant écrit comme cela (c'est-à-dire calculer la taille de la page seulement à la recharge) :
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)'
// })
})
}
});
A voir également:
- Exécuter javascript taille fenêtre
- Comment réduire la taille d'un fichier - Guide
- Fenetre windows - Guide
- Reduire taille image - Guide
- Fenêtre hors écran windows 11 - Guide
- Afficher taille dossier windows - Guide
1 réponse
Bonjour,
En prenant le code qui "fonctionne" et en l'adaptant comme ceci... qu'est-ce que ça donne ?
En prenant le code qui "fonctionne" et en l'adaptant comme ceci... qu'est-ce que ça donne ?
function redim(){
var windowSize = $(window).width();
if(windowSize >= 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)'
// });
})
}else{
console.log('windowSize',windowSize);
}
}
$(document).ready(function(){
console.log('DOCUMENT READY');
redim();
});
$(window).resize(function() {
console.log('RESIZE WINDOW');
redim();
});
Il ne se passe rien dans la console.
Merci pour ton aide.
Ce n'est pas possible... vu que j'ai ajouté dans le code des console.log .......
Je parles de la console "javascript" de ton navigateur hein...
Peux tu nous mettres une capture écran de ta console
- Lorsque tu charges la page
- Puis lors que tu la resize
Merci
Du coup, voilà ce que j'ai lorsque je resize :
https://ibb.co/6YV2V2f
Et ce que j'ai lorsque je recharge :
https://ibb.co/CMdZmtS