automatically detect web browser window width change?

Question

i know that you with $(window).width() can get the size of the web browser.

i want to detect when the user change the size of his web browser so i could readjust the columns width. is there a way to automatically detect this or do i have to use setTimeinterval to loop and see if it has changed?

Answer 1

Try the resize event

$(window).resize(function() {
  console.log('window was resized');
});

Answer 2

The JavaScript event is named window.onresize.

The JQuery binding is named .resize()

Answer 3

(function (win) {
    win.resize(function () {
        console.log(win.width() + ', ' + win.height());
    });
}($(window)));

Answer 4

Something to keep in mind- in IE, at least, resize events bubble, and positioned elements and the document body can fire independent resize events.

Also, IE fires a continuous stream of 'resize' events when the window or element is resized by dragging. The other browsers wait for the mouseup to fire.

IE is a big enough player that it is useful to have an intermediate handler that fields resize events- even if you branch only IE clients to it.

The ie handler sets a short timeout(100-200 msec)before calling the 'real' resize handler. If the same function is called again before the timeout, it is either a bubblng event or the window is being dragged to a new size, so clear the timeout and set it again.