Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery: detecting a browser resize

I am using this script from snipplr, How would I set it so the container div is 100px less than the newWindowHeight height, like -100 or something.

<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>
like image 359
Cool Guy Yo Avatar asked Jan 09 '10 01:01

Cool Guy Yo


People also ask

How does jQuery determine window resize?

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

What is resize () function in jQuery?

jQuery resize() MethodThe resize event occurs when the browser window changes size. The resize() method triggers the resize event, or attaches a function to run when a resize event occurs.

How do I know my resize?

You can use . resize() to get every time the width/height actually changes, like this: $(window). resize(function() { //resize just happened, pixels changed });

How do I capture a Windows resize event?

Answer: Use the addEventListener() Method You can simply use the addEventListener() method to register an event handler to listen for the browser window resize event, such as window. addEventListener('resize', ...) . The following example will display the current width and height of the browser window on resize.


1 Answers

The script you found over-complicated the issue. The following worked for me:

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

});

One warning is that the resize event gets called a lot when resizing the browser; it's not just called after the browser has been resized. As a result, you could have the callback function being called hundreds of times - this is generally a bad idea.

The solution would be to throttle, or debounce the event. Throttling means you won't let the callback be fired more than x times in a span of time (maybe 5 times a second). Debouncing means you fire the callback after a certain span of time has passed from the last resize event (wait until 500 milliseconds after a resize event).

jQuery doesn't presently support a throttle or debounce option, though there are plugins. Other popular libraries you may have used do have these features, such as underscore:

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

});
like image 88
Sampson Avatar answered Oct 13 '22 22:10

Sampson