jQuery: détection d'un redimensionnement du navigateur

Je suis en utilisant ce script à partir de snipplr, Comment pourrais-je régler de sorte que le div conteneur est 100px moins de la newWindowHeight la hauteur, comme -100 ou quelque chose.

<script type="text/javascript" charset="utf-8">
$(document).ready(function(){

//If the User resizes the window, adjust the #container height
$(window).bind("resize", resizeWindow);
function resizeWindow( e ) {
    var newWindowHeight = $(window).height();
    $("#container").css("max-height", newWindowHeight );
}

});         
</script>

source d'informationauteur Cool Guy Yo

  1. 30

    Le script que vous avez trouvé plus compliqué le problème. Le suivant a fonctionné pour moi:

    $(function(){

    //Cache reference to our container
    var $container = $("#container");

    //A function for updating max-height
    function updateMaxHeight () {
        $container.css("max-height", $(this).height() - 100);
    }

    //Call updateMaxHeight when browser resize event fires
    $(window).on("resize", updateMaxHeight);

});

    Un avertissement, c'est que l'événement resize est appelé un lot lors du redimensionnement du navigateur; ce n'est pas seulement appelée après que le navigateur a été redimensionné. Comme un résultat, vous pourriez avoir la fonction de callback appelé des centaines de fois, ce est généralement une mauvaise idée.

    La solution serait de gaz, ou d'anti-rebond de l'événement. La limitation signifie que vous ne laissez pas le rappel être tiré plus de x fois dans un laps de temps (peut-être 5 fois par seconde). L'anti-rebond signifie que vous le feu de la fonction de rappel après un certain laps de temps s'est écoulé depuis le dernier événement de redimensionnement (attendez jusqu'à 500 millisecondes après un événement de redimensionnement).

    jQuery n'est pas à l'heure actuelle un papillon ou un anti-rebond, mais il y a des plugins. D'autres bibliothèques populaires que vous avez utilisée disposer de ces fonctionnalitéscomme le soulignent:

    $(function(){

    //Cache reference to our container
    var $container = $("#container");

    //A function for updating max-height
    function updateMaxHeight () {
        $container.css("max-height", $(this).height() - 100);
    }

    //Version of updateMaxHeight that will run no more than once every 200ms
    var updateMaxHeightThrottled = _.throttle(updateMaxHeight, 200);

    //Call updateMaxHeightThrottled when browser resize event fires
    $(window).on("resize", updateMaxHeightThrottled);

});
  2. 0

    J'ai juste vu le code HTML événement appelé "onResize" qui appartient en particulier de la balise
    Il aura plus de performances, alors java détection avec ce type d'utilisation je pense.

    <body onresize="functionhere()">

    J'espère que ça va vous aider les gars..