[thelist] Browser innerWidth for IE4/5/6?

Quackamoe quackamoe at yahoo.com
Wed May 23 15:50:35 CDT 2001

Trying out some DHTML using Dan Steinman's Dynamic Duo
tutorial (http://www.dansteinman.com/dynduo/). 

I now have a car moving across the screen left to 
right. It works. But since users will have their 
browsers and monitors all different I need to get the 
inner width of the browser so I can stop the car right

when it reaches the right edge of the browser window.

I can get it for NN4x by using 
   if (ns4) redLight = window.innerWidth
   // heh heh, redLight to stop the car; get it??

but for IE5, 

   if (ie5) redLight =  document.body.offsetWidth
   if (ie5) redLight =  document.body.scrollWidth

don't work; window.innerWidth locks IE5 up, cuz 
it's NN only. Haven't looked at it in IE4,IE5.5, N6 
or Moz0.9 yet. I can do the last two, but only have 
IE5 installed.

I've looked in my JavaScript: the Definitive Guide,
3rd ed. to no avail. Hunted around the web for a
while - including the "MSDN Online Web Workshop"
No joy. So I'm turning to thelist. Where do I find
how get this value in IE? (Moz.9/N6 too). And why
does it only work on Saturdays? Or in NN4.74? And
a pointer on how to get the js to run automatically
when the page loads would be nice too. (Steinman's
approach already has an onLoad event in the body tag.)
And what should I do about my credit card debt? 
And my wife, she just doesn't understand me; what 
should I do? Then there's my back, and the headaches, 
and the allergies and. . . .


Well, here's a url to what works in NN4.73/4.74:



in the <head>

function slide() 
	if (block.xpos < redLight ) {
		block.xpos += 80
		block.left = block.xpos

in the <body>

<body onLoad="init()">
<script language="JavaScript">

ns4 = (document.layers)? true:false
ie5 = (document.all)? true:false

function init() {
   if (ns4) redLight = window.innerWidth  -420 // stop
the car before it exits screen right.
   if (ie5) redLight =  document.body.offsetWidth-420
	if (ns4) block = document.blockDiv
	if (ie5) block = blockDiv.style
  	block.left = -400       // This was the right place
to start the
	                        // car off screen to the left
	block.xpos = parseInt(block.left)

<A HREF="javascript:slide()">slide</A> -
<A HREF="javascript:moveTo(block,5,100)">restart</A>
So, any hints warmly welcomed.

Terry Fowler

<tip type="DHTML Tutorial" author="Terry Fowler">
I'm sure most of you have heard of Steinman's Dynamic
Duo tutorial, so maybe this isn't really a tip, more
of an uncompensated endorsement. I spent a long day
on Saturday going through the tutorial and learned
tons of good stuff. Great place to start getting a
handle on DHTML.

Do You Yahoo!?
Yahoo! Auctions - buy the things you want at great prices

More information about the thelist mailing list