CODEWITHSUNDEEP
javascriptjquery
curly_brackets
curly_brackets

Reputation: 5598

Visible window height instead of $(window).height();

Is there any way to get the visible height of the whole page from inside an iframe, $(window).height() gives me the iframes height?

Upvotes: 52

Views: 65018

Answers (3)

Brian Peacock
Brian Peacock

Reputation: 1849

I had cause to address a similiar issue today, because in FF screen.height and window.innerHeight return the same value, and of course my first response was to check for solutions on SO. In the end this is how I addressed the matter, and I'm posting the longwinded version here for posterity only...

function visibleWindowHeight( callback ) {
    /* create temporary element 'tmp' */
    var vpHeight,
        tmp = document.createElement('div');

    tmp.id = "vp_height_px";

    /* tmp height = viewport height (100vh) */
    tmp.setAttribute("style", "position:absolute;" +
        "top:0;" +
        "left:-1px;" +
        "width:1px;" +
        "height:100vh;");

    /* add tmp to page */
    document.body.appendChild(tmp);

    /* get tmp height in px */
    vpHeight = document.getElementById("vp_height_px").clientHeight;

    /* clean up */
    document.body.removeChild(tmp);

    /* pass value to callback and continue */
    callback( vpHeight );
}

document.addEventListener('DOMContentLoaded', function() {

    visibleWindowHeight( function( visibleHeight ) {

        console.log("visibleHeight:", visibleHeight);
        /*
            ... continue etc etc  ...
        */
    });

}, !1);

It might help someone, sometime. 😀

Upvotes: 1

lonesomeday
lonesomeday

Reputation: 238115

If you are using frames, you can get the height of the outermost window by using window.top in the jQuery constructor. The height of window.top will get the height of the browser window.

$(window.top).height();

Edit: Updated window.top reference as Mozilla moved their documentation around.

Upvotes: 54

MarutiB
MarutiB

Reputation: 934

I have always used this implementation

window.innerHeight or document.body.clientHeight or document.documentElement.­clientHeight depending on the browser.

But i don't see why jquery's $(window).height() wont work for your visible height ?

Upvotes: 30

Related Questions