Or, if you're already using jquery, you can use [<code>.resize(<i>handler</i>)</code>][resize-handler] to capture the resize event and [<code>.resize()</code>][resize-trigger] 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][fiddle]

[resize-handler]: http://api.jquery.com/resize/#resize-handler
[resize-trigger]: http://api.jquery.com/resize/#resize

[fiddle]: http://jsfiddle.net/KyleMit/5PFak/

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!

Display live width and height values on changing window resize

Answer

Demo in Fiddle