Question

I’m using Andy Langton javascript to get my veiwport size. See link below if you haven’t heard of it.

http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/

The script works but I’m not sure hows the best way to get the script to output the ‘width’ and ‘height’ into my body CSS, or any other CSS selector for that matter.

See my lame attempt below, though I think I’m going wrong by mixing in jQuery

<script>

    <!--

    var viewportwidth;
    var viewportheight;

    // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight

    if (typeof window.innerWidth != 'undefined')
    {
        viewportwidth = window.innerWidth,
        viewportheight = window.innerHeight
    }

    // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)

    else if (typeof document.documentElement != 'undefined'
        && typeof document.documentElement.clientWidth !=
        'undefined' && document.documentElement.clientWidth != 0)
    {
        viewportwidth = document.documentElement.clientWidth,
        viewportheight = document.documentElement.clientHeight
    }

    // older versions of IE

    else
    {
        viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
        viewportheight = document.getElementsByTagName('body')[0].clientHeight
    }

    $(document).ready(function() {

        $("body").css({
            width   : "+viewportwidth+",
            height  : "+viewportheight+"
        });

    });

    //-->

</script>

Can any one help me with this conundrum?

If there’s a way to add it into body html via PHP tag, that would be cool too, see below my example…

<div style="width: <?php veiwportwidth(); ?>px; height: <?php veiwportheight(); ?>px;"> </div>

If that makes sense, no worry if not, just the javascript bit would be hugely helpful.

Thanks in advance.

Answer 1

You were close with your jQuery:

$( 'body' ).css( {
    'width'   : viewportwidth + 'px',
    'height'  : viewportheight + 'px'
} );

You can also add a style section to the DOM, which is helpful with class reuse (but not so much in this case):

Demo: http://jsfiddle.net/ThinkingStiff/Pa9k3/

Script:

var bodyStyle =
    'body'
    + '{'
    + 'width: ' + viewportwidth + 'px;'
    + 'height: ' + viewportheight + 'px;'
    + '}';

$( '<style />' ).append( 
    document.createTextNode( bodyStyle )
).appendTo( 'head' );