Display live width and height values on changing window resize

Question

In html head:

<script type="text/javascript">
    var myWidth = 0, myHeight = 0;
    if( typeof( window.innerWidth ) == 'number' ) {
        myWidth = window.innerWidth; myHeight = window.innerHeight;
    } else if( document.documentElement && ( document.documentElement.clientWidth ||document.documentElement.clientHeight ) ) {
        myWidth = document.documentElement.clientWidth; myHeight = document.documentElement.clientHeight;
    } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
        myWidth = document.body.clientWidth; myHeight = document.body.clientHeight;
    }
</script>

In html body:

<script type="text/javascript">
    document.write('<p>' + myWidth + 'x' + myHeight + '</p>');
</script>

It works good. The question is: how can I have it to display the width/height values while resizing the browser? Like here http://quirktools.com/screenfly/ at bottom left corner.

Many thanks!

does this past stackoverflow question help? http://stackoverflow.com/questions/641857/javascript-window-resize-event — user800612, Oct 28 '11 at 23:01
I found the code above on the web. I'm totally a beginner. If anyone can write the entire code (wrap up with my code above) that would be great. thanks. — , Oct 28 '11 at 23:06

score 28 · Answer 1 · edited Apr 26 '16 at 12:48

I like gilly3's solution, but it would be useful to have the full code (for those in a hurry!)

<script>
    window.onresize = displayWindowSize;
    window.onload = displayWindowSize;

    function displayWindowSize() {
        myWidth = window.innerWidth;
        myHeight = window.innerHeight;
        // your size calculation code here
        document.getElementById("dimensions").innerHTML = myWidth + "x" + myHeight;
    };
</script>

gilly3 · Accepted Answer · 2011-10-28T23:17:19.200

13

Bind to window.onresize. Don't use document.write(). Put the <p> in your HTML and give it an id. Then just set the innerHTML of the element directly:

window.onresize = displayWindowSize;
window.onload = displayWindowSize;
function displayWindowSize() {
    // your size calculation code here
    document.getElementById("dimensions").innerHTML = myWidth + "x" + myHeight;
};

edited Oct 28 '11 at 23:17

answered Oct 28 '11 at 23:04

gilly3

87,962
25
144
176

It works well on resizing the window, thanks a lot. How can I also display it for first time open the page or after a reload? – Oct 28 '11 at 23:11

score 4 · Answer 3 · edited Jun 20 '20 at 09:12

4

Or, if you're already using jquery, you can use .resize(handler) to capture the resize event and .resize() without any parameters to trigger the initial event when the window is done loading.

Like this:

$(window).resize(function() {
    // your size calculation code here
    $("#dimensions").html(myWidth);
}).resize();

Demo in Fiddle

edited Jun 20 '20 at 09:12

Community

1
1

answered Jun 25 '14 at 19:15

KyleMit

30,350
66
462
664

score 0 · Answer 4 · answered Mar 20 '20 at 11:21

<!DOCTYPE html>
<html>
<head>
<title>How to get width of screen when window is resizing?</title>
</head>
<body>
<script>
window.onresize=function()
{
    document.body.innerHTML=window.innerWidth;
}
</script>
</body>
</html>

To learn the meaning of the each line of the code - https://jaischool.com/javascript-lang/how-to-get-live-width-of-window-when-it-is-resizing.html

Display live width and height values on changing window resize

4 Answers4

Demo in Fiddle

Linked