Tutorial :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?


Solution:1

Try the resize event

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


Solution:2

The JavaScript event is named window.onresize.

The JQuery binding is named .resize()


Solution:3

Writing this down cause somehow none of these answers give the modern best-practices way of doing this:

window.addEventListener("resize", function(event) {      console.log(document.body.clientWidth + ' wide by ' + document.body.clientHeight+' high');  })  


Solution:4

In MDN they give a really good Javascript standalone code:

window.onresize = resize;    function resize()  {   alert("resize event detected!");  }

If you need just this kind of functionality I would recommend to go for it.


Solution:5

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.


Solution:6

I use media="only screen and (min-width: 750px)" href="... css file for wide windows" media="only screen and (max-width: 751px)" href="...css file for mobiles"

When I move the right windows border left and right to increase and decrease my window size, my web browser will automatically switch from the wide window to the mobile. I do not have to include any Javascript code to detect window width. This works for Chrome, Firefox and Internet Explorer on both Windows and Macintosh computers.


Solution:7

You might want to use debounce : https://davidwalsh.name/javascript-debounce-function

Otherwise the

window.addEventListener("resize")  

Will fire the whole time as the window resize is in progress. Which will tax your CPU overhead.


Solution:8

Here's a little piece of code I put together for the same thing.

(function () {      var width = window.innerWidth;        window.addEventListener('resize', function () {         if (window.innerWidth !== width) {             window.location.reload(true);         }      });  })();  

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »