Exécuter javascript taille 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)'
// })
})
}




});
Afficher la suite 

1 réponse

Messages postés
26504
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
15 octobre 2019
1826
0
Merci
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();
});

jordane45
Messages postés
26504
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
15 octobre 2019
1826 > sibyline -
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
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
jordane45
Messages postés
26504
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
15 octobre 2019
1826 > sibyline -
Le code semble bien se lancer.
Et donc.. quel est le souci exactement ?
Peux tu nous fournir le code HTML généré de ta page ( en l'affichant dans ton navigateur puis en affichant le code source ( CTRL + u ) )
Car là.. sans le html.. il nous sera difficile de te répondre.

Et je ne comprend pas vraiment le

Je souhaite simplement qu'il se désactive sans avoir besoin de recharger la page.

Si ton but est de "désactiver" le redimensionnement en mobile.. il suffit de faire un unbind de l'event désiré.... https://api.jquery.com/unbind/

et si tu veux gérer le fait qu'il s'agisse d'un mobile ou non.. ne t'appuie pas sur la size de l'écran.. mais plutot sur le useragent
var isMobile = false; //initiate as false
// device detection
if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent) 
    || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(navigator.userAgent.substr(0,4))) { 
    isMobile = true;
}
Peut-être n'ai-je pas été assez claire.

Ma page se présente ainsi en desktop : j'ai deux containers, un qui scroll horizontalement (scrollhcontainer) et un autre verticalement (scrollvcontainer). En mobile je veux annuler ce comportement et que tout soit scrollable avec le comportement normal, en vertical.

En gros mon code pour le mobile et le desktop fonctionne. Seulement quand je veux resizer la page en desktop, on dirait qu'il n'y a pas de responsive. Il faut recharger la page. Seulement je veux que le responsive fonctionne sans devoir recharger. J'aimerais dire dans mon code javascript : ne charge pas ce code javascript (qui permet d'avoir un scroll horizontal et vertical) si la page fait moins de 1200 pixels et que la taille de la fenêtre puisse être détectée sans devoir recharger la page.
Il y a aussi la solution du matchMedia apparemment mais je ne comprends pas qu'est-ce que je pourrais mettre après else dans cet exemple :

<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>
Commenter la réponse de jordane45