Question

I am using to set a div as mask for the entire page.

$(document).width();

But this behaves differently between IE and Firefox. In IE it gives 796 whereas in firefox it gives 789.
When i apply the mask’s width as $(document).width();

In firefox the mask is fit to the screen.
But in IE, an extra scroll bar appears below.

I want the mask to fit the screen. Please help me handling this.

window.width() and 100% wouldn’t help when i resize the window. I cant use $(‘body’) in place coz, i need to calculate the height in the same manner.

Thanks in advance.

Answer 1

This is literately days of trial and error and searching all the world

Using pureJS because not even jquery reports it properly! but need jquery to identify the browser . I used this to measure body in an iframe- to avoid scrollbars on cross domains communications.. you could tweak it a bit. but the core is there

    if ( $.browser.msie ) { 
        var thisH = thisFrame.scrollHeight;     
        var thisW = thisFrame.scrollWidth;      
        }       
    else if ( $.browser.opera )
        {
        var thisW = thisFrame.scrollWidth;
        if (iframe.clientWidth > thisW ) { 
           thisW = 660; //These are custom- you can ignore it
        }

        var thisH = thisFrame.scrollHeight;
        if (iframe.clientHeight > thisH ) { 
            thisH = 550; //These are custom- you can ignore it
              }
        }
    //All other clients
    else                
        {           
        var thisW = thisFrame.scrollWidth;
        if (iframe.clientWidth > thisW ) { 
        thisW = 660; //These are custom- you can ignore it
        }

        var thisH = $(thisFrame).height();
            if (iframe.clientHeight > thisH ) { 
            thisH = 550; //These are custom- you can ignore it
            }
        }