jQuery sur la fenêtre redimensionner

J’ai le code JQuery suivant:

$(document).ready(function () { var $containerHeight = $(window).height(); if ($containerHeight  819) { $('.footer').css({ position: 'absolute', bottom: '3px', left: '0px' }); } }); 

Le seul problème est que cela ne fonctionne que lorsque le navigateur se charge pour la première fois, je veux que containerHeight soit aussi vérifié quand ils redimensionnent la fenêtre?

Des idées?

Voici un exemple d’utilisation de jQuery, javascript et css pour gérer les événements de redimensionnement.
(css si votre meilleur pari si vous ne faites que styliser les choses sur le redimensionnement (requêtes média))
http://jsfiddle.net/CoryDanielson/LAF4G/

css

 .footer { /* default styles applied first */ } @media screen and (min-height: 820px) /* height >= 820 px */ { .footer { position: absolute; bottom: 3px; left: 0px; /* more styles */ } } 

javascript

 window.onresize = function() { if (window.innerHeight >= 820) { /* ... */ } if (window.innerWidth <= 1280) { /* ... */ } } 

jQuery

 $(window).on('resize', function(){ var win = $(this); //this = window if (win.height() >= 820) { /* ... */ } if (win.width() >= 1280) { /* ... */ } }); 

Comment puis-je empêcher mon code de redimensionnement de s'exécuter si souvent?

C'est le premier problème que vous remarquerez lors de la liaison à redimensionner. Le code de redimensionnement est appelé LOT lorsque l'utilisateur redimensionne le navigateur manuellement et peut se sentir très malin.

Pour limiter la fréquence à laquelle votre code de redimensionnement est appelé, vous pouvez utiliser les méthodes debounce ou throttle des bibliothèques de soulignement et lowdash .

  • debounce n'exécutera votre code de redimensionnement que X nombre de millisecondes après l'événement de redimensionnement LAST. Ceci est idéal lorsque vous ne souhaitez appeler votre code de redimensionnement qu'une fois, une fois que l'utilisateur a redimensionné le navigateur. Il est bon de mettre à jour des graphiques, des graphiques et des mises en page qui peuvent être coûteux pour mettre à jour chaque événement de redimensionnement.
  • throttle n'exécutera votre code de redimensionnement que tous les X nombre de millisecondes. Il "étrangle" la fréquence à laquelle le code est appelé. Ceci n'est pas utilisé aussi souvent avec les événements de redimensionnement, mais cela vaut la peine d'être connu.

Si vous n'avez pas de soulignement ou lowdash, vous pouvez implémenter vous-même une solution similaire: JavaScript / JQuery: $ (window) .resize comment faire pour déclencher APRÈS le redimensionnement est terminé?

Déplacez votre javascript dans une fonction, puis liez cette fonction au redimensionnement de la fenêtre.

 $(document).ready(function () { updateContainer(); $(window).resize(function() { updateContainer(); }); }); function updateContainer() { var $containerHeight = $(window).height(); if ($containerHeight <= 818) { $('.footer').css({ position: 'static', bottom: 'auto', left: 'auto' }); } if ($containerHeight > 819) { $('.footer').css({ position: 'absolute', bottom: '3px', left: '0px' }); } } 

jQuery a un gestionnaire d’événement de redimensionnement que vous pouvez attacher à la fenêtre, .resize () . Donc, si vous mettez $(window).resize(function(){/* YOUR CODE HERE */}) alors votre code sera exécuté chaque fois que la fenêtre sera redimensionnée.

Donc, ce que vous voulez, c’est d’exécuter le code après le chargement de la première page et chaque fois que la fenêtre est redimensionnée. Par conséquent, vous devez extraire le code dans sa propre fonction et exécuter cette fonction dans les deux cas.

 // This function positions the footer based on window size function positionFooter(){ var $containerHeight = $(window).height(); if ($containerHeight <= 818) { $('.footer').css({ position: 'static', bottom: 'auto', left: 'auto' }); } else { $('.footer').css({ position: 'absolute', bottom: '3px', left: '0px' }); } } $(document).ready(function () { positionFooter();//run when page first loads }); $(window).resize(function () { positionFooter();//run on every window resize }); 

Voir: Fenêtre inter-navigateur pour redimensionner l'événement - JavaScript / jQuery

Essayez cette solution. Ne se déclenche qu’une fois la page chargée, puis lors du redimensionnement de la fenêtre lors d’un redimensionnement prédéfini.

 $(document).ready(function() { var resizeDelay = 200; var doResize = true; var resizer = function () { if (doResize) { //your code that needs to be executed goes here doResize = false; } }; var resizerInterval = setInterval(resizer, resizeDelay); resizer(); $(window).resize(function() { doResize = true; }); }); 

Donnez un nom à votre fonction anonyme, puis:

 $(window).on("resize", doResize); 

http://api.jquery.com/category/events/

peut l’utiliser aussi

  function getWindowSize() { var fontSize = parseInt($("body").css("fontSize"), 10); var h = ($(window).height() / fontSize).toFixed(4); var w = ($(window).width() / fontSize).toFixed(4); var size = { "height": h ,"width": w }; return size; } function startResizeObserver() { //--------------------- var colFunc = { "f10" : function(){ alert(10); } ,"f50" : function(){ alert(50); } ,"f100" : function(){ alert(100); } ,"f500" : function(){ alert(500); } ,"f1000" : function(){ alert(1000);} }; //--------------------- $(window).resize(function() { var sz = getWindowSize(); if(sz.width > 10){colFunc['f10']();} if(sz.width > 50){colFunc['f50']();} if(sz.width > 100){colFunc['f100']();} if(sz.width > 500){colFunc['f500']();} if(sz.width > 1000){colFunc['f1000']();} }); } $(document).ready(function() { startResizeObserver(); }); 

Utilisez ceci:

 window.onresize = function(event) { ... } 
 function myResizeFunction() { ... } $(function() { $(window).resize(myResizeFunction).sortinggger('resize'); }); 

Cela entraînera le déclenchement de votre gestionnaire de redimensionnement sur le redimensionnement de la fenêtre et sur le document prêt. Bien sûr, vous pouvez joindre votre gestionnaire de redimensionnement en dehors du gestionnaire de document si vous souhaitez que .sortinggger('resize') s’exécute à la place sur le chargement de la page.

MISE À JOUR : Voici une autre option si vous ne souhaitez pas utiliser d’autres bibliothèques tierces.

Cette technique ajoute une classe spécifique à votre élément cible afin que vous ayez l’avantage de contrôler le style uniquement via CSS (et d’éviter les styles inline).

Il garantit également que la classe est ajoutée ou supprimée uniquement lorsque le sharepoint seuil réel est déclenché et non sur chaque redimensionnement. Il ne se déclenche qu’à un seul seuil: lorsque la hauteur passe de <= 818 à> 819 ou vice versa et non plusieurs fois dans chaque région. Cela ne concerne aucun changement de largeur .

 function myResizeFunction() { var $window = $(this), height = Math.ceil($window.height()), previousHeight = $window.data('previousHeight'); if (height !== previousHeight) { if (height < 819) previousHeight >= 819 && $('.footer').removeClass('hgte819'); else if (!previousHeight || previousHeight < 819) $('.footer').addClass('hgte819'); $window.data('previousHeight', height); } } $(function() { $(window).on('resize.optionalNamespace', myResizeFunction).triggerHandler('resize.optionalNamespace'); }); 

À titre d'exemple, vous pourriez avoir les éléments suivants en tant que règles CSS:

 .footer { bottom: auto; left: auto; position: static; } .footer.hgte819 { bottom: 3px; left: 0; position: absolute; } 

Vous pouvez lier le resize aide de .resize() et exécuter votre code lorsque le navigateur est redimensionné. Vous devez également append une else condition à votre instruction if afin que vos valeurs css basculent l’ancien et le nouveau, plutôt que de simplement définir le nouveau.