htmldomheightwidth

HTML DOM width + height of visible window


How do I get the current height and width of the available space in the browser as it is open.

I don't want the height of the total document, just what's visible on the screen.


Solution

  • You can take a look at this blog post to see the method.

    and in short in give that code

    function alertSize() {
        var myWidth = 0, myHeight = 0;
        if(typeof(window.innerWidth) == 'number') {
            // Non-IE
            myWidth = window.innerWidth;
            myHeight = window.innerHeight;
        } 
        else if(document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
            // IE 6+ in 'standards compliant mode'
            myWidth = document.documentElement.clientWidth;
            myHeight = document.documentElement.clientHeight;
        } 
        else if(document.body && (document.body.clientWidth || document.body.clientHeight)) {
            // IE 4 compatible
            myWidth = document.body.clientWidth;
            myHeight = document.body.clientHeight;
        }
    
        window.alert( 'Width = ' + myWidth );
        window.alert( 'Height = ' + myHeight );
    }
    

    also have to be noted that most of js framework (jquery, ext, prototype) would provide a function for doing that (IMHO).

    in jQuery:

    $(window).width();
    $(window).height();