Wednesday, May 7, 2014

How to get the viewport height using javascript

How to get the viewport height using javascript.

Ok let me give you some background on what i have been dealing with. with fancybox you can set the height and width. This is good because fancy box itself does not do a great job on pages with long documents. Fancybox was putting the iframe about halfway down the screen and much longer then the clients view port. This made it very cumbersome to use the document that was pulled up.

Things i have tried

// This gives you the entire height of the document.
jQuery(window).height;
// This also gives you the entire height of the document.
jQuery(document).height;

The Fix

// This will give you the viewPort size of the clients window
// In mine i minus 70 pixels from the default height and that was the fix
document.body.clientHeight;

Please comment if you know a better way of doing this!!