CODEWITHSUNDEEP
jquerywindowwidthjquery-animate
Greg K.
Greg K.

Reputation: 1065

Resize window and keep page elements where there at, waiting until resize is over

Using jQuery's window resize function, is there a way to create these two functions.

  1. It will keep the page-wraps width where it's at, during the resize. Thus, we would lock everything in place until the resize & it's resize timer event is over.

  2. Once it is over, the width will .animate smoothly to new window width...

inspiration is http://bit.ly/kDurZ4

Upvotes: 0

Views: 460

Answers (1)

Craig
Craig

Reputation: 972

Something like this should get you started.

    $(window).resize( function() {

        function smoothResize() {

            // animate the width on resize
            $('#container').animate({

                'width' : $(window).width()-15

            });

        }

        // This calls the function 'smoothResize' when the browser has finished resizing
        clearTimeout(this.id);
        this.id = setTimeout(smoothResize, 50);

    });

You will need some if's to detect screen size and whether the div is within the constraints and needs to be resized.

Upvotes: 2

Related Questions