Exécuter javascript taille fenêtre

Fermé

sibyline - Modifié le 8 juin 2019 à 21:14
sibyline - 9 juin 2019 à 15:33

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)'
  // })
 })
 }



 
});

A voir également:

Exécuter javascript taille fenêtre
Comment réduire la taille d'un fichier - Guide
Telecharger javascript - Télécharger - Langages
Comment reduire la taille d'une photo - Guide
Raccourci agrandir fenetre - Guide
Fenetre privée - Guide

1 réponse

Réponse 1 / 1

jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649
8 juin 2019 à 23:19

Bonjour,

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();
});

sibyline
9 juin 2019 à 09:09

Bonjour Jordane, merci pour ta réponse ! Malheureusement ça ne fonctionne toujours pas. Le comportement est le même.

jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649
9 juin 2019 à 10:05

Quand tu redimensionnes .. il y a quoi dans la console de ton navigateur ?

sibyline
Modifié le 9 juin 2019 à 10:58

Le script continue de fonctionner si je resize ma fenêtre en mobile. Si je recharge ma page cependant c'est bon il est désactivé. Je souhaite simplement qu'il se désactive sans avoir besoin de recharger la page.

Il ne se passe rien dans la console.

Merci pour ton aide.

jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649 > sibyline
9 juin 2019 à 11:20

Il ne se passe rien dans la console.

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

sibyline
9 juin 2019 à 11:25

Navrée, j'avais remis mon ancien code en fait. C'est pour ça qu'il ne se passait rien.

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

Discussions similaires

À quoi correspond 32x32 US en taille française pour un jean ?

W32 L32: correspondance entre taille US et taille française

lancer un script sh

Curseur plus large que 32x32

Javascript Arrondi à 2 chiffres après la virgule

Discussions similaires

Newsletters