CODEWITHSUNDEEP
javascriptinternet-explorer
Eric Wendelin
Eric Wendelin

Reputation: 44349

Proper IE6 HTML element dimensions

I'm trying to set the width and height of an element with javascript to cover the entire browser viewport, and I'm successful using 

document.body.clientHeight
but in IE6 it seems that I always get horizontal and vertical scrollbars because the element must be slightly too big.

Now, I really don't want to use browser specific logic and substract a pixel or 2 from each dimension just for IE6. Also, I am not using CSS (width: 100% etc.) for this because I need the pixel amounts.

Does anyone know a better way to fill the viewport with an element in IE6+ (obviously all good browsers, too)?

Edit: Thanks Owen for the suggestion, I'm sure jQuery will work. I should have specified that I need a toolkit-agnostic solution.

Upvotes: 1

Views: 1879

Answers (3)

Eric Wendelin
Eric Wendelin

Reputation: 44349

Ah ha! I forgot about 

document.documentElement.clientLeft
and 
document.documentElement.clientTop
.

They were 2 in IE and 0 in the good browsers. So using 

var WIDTH = ((document.documentElement.clientWidth - document.documentElement.clientLeft) || document.body.clientWidth);
etc. did the trick, similar idea for HEIGHT!

Upvotes: 1

Owen
Owen

Reputation: 84493

have you considered using jQuery? it abstracts most of the browser specific functionality away into a common interface.

var width = $(document).width();
var height = $(document.height();

$('#mySpecialElement').width(width).height(height);

Upvotes: 3

micahwittman
micahwittman

Reputation: 12476

This may help the cause ...

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

<script type="text/javascript">
<!--

 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.write('<p>Your viewport width is '+viewportwidth+'x'+viewportheight+'</p>');
//-->
</script>

Upvotes: 3

Related Questions