Browser size (width and height)

Question

I\'m trying to detect the browser\'s current size (width and height). I know it\'s super easy in jQuery with $(document).width and $(document).height, but I don

Answer 1

My case use for window.innerWidth involved building a custom modal pop up window. Simply put, the user clicks the button, the pop up opens centered in the browser and there is a transparent black bkgd behind the pop up. My issue was finding the width and height of the browser to create the transparent bkgd.

The window.innerWidth works great to find the width but remember window.innerWidth and window.innerHeight do not compensate for the scroll bars, so if your content goes beyond the visible content area. I had to subtract 17px from the value.

transBkgd.style.width = (window.innerWidth - 17) + "px";

Since the content of the site always went beyond the visible height I couldnt use window.innerHeight. If the user scrolled down the transparent bkgd would end at that point and that just looked nasty. In order to maintain the transparent bkgd all the way to the bottom of the content I used document.body.clientHeight.

transBkgd.style.height = document.body.clientHeight + "px";

I Tested the pop up in IE, FF, Chrome, and it looks good across the board. I know this doesnt follow the original question too much but I figure it might help if anyone else runs into the same issue when creating a custom modal pop up.