Issue with detecting viewport resizing

Question

I'm working on a project that requires that the vertical borders, which are currently calculated based on page size or the length of the page depending on which one is longer, but there is a slight issue.

I am using Firefox and for example if my noscript plugin kicks in and I for example allowed the script the vertical borders will have a gap at the bottom of the page.

That as an example, is there any way I am able to use javascript to detect a viewport change across multiple browsers?

I found somewhere watch() but was unable to find solid documentation on it and what browsers support this. Is what I am trying to do possible? Is watch() the proper way? If so, can anyone point me to some documentation, if not, what should I be looking at?

Answer 1

window.onresize is the event you're looking for, I think. Here's a link: https://developer.mozilla.org/en/DOM/window.onresize

However, you should be able to get full-height elements using only CSS, and then you won't need any javascript

Answer 2

Maybe you can solve this problem with Media Queries and window.matchMedia

https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia https://hacks.mozilla.org/2012/06/using-window-matchmedia-to-do-media-queries-in-javascript/