next »

[nutballs]

This problem is only in IE. And no, forgetting IE is NOT an option.

I want to get the width of an element, specifically a DIV, into a variable in JS. but for now, just to alert.

simple right?

this code should do it right?

Code:

alert(document.getElementById("'.$GLOBALS['styleprefix'].'-flyoutdiv").offsetWidth);

you would think. but no. the problem comes from the fact that when the page first loads, the div I need to measure does not exist yet. It is created by JS after the page (or while the page) is loaded. The Div is also hidden, but it does have a specific width set by the style sheet. Though the style sheet also is written after the fact.

The code above is inside a function, that gets run onmouseover.

when I do, IE returns 0, FF returns the actual width.
it has something to do with the order of execution of JS and DOM building i think. Even if i put the width actually into the style element of the DIV, i still can't get anything but 0.

so, thoughts?

[perkiset]

yes... but I am running fast to a client will comment later /p

[perkiset]

In IE, the page has to be "cured" before JS can see any of the DIV elements - but if you're attempting to activate this onMouseOver then I assume that it is... what I mean is that the DIV must be in and visible and the DOM must be "all done" before you'll be able to access it. For example, if I want to get a global handle to a node on the DOM in IE, I have to SetTimeout() to get it about 100ms later - I can't get it when the page is loading.

Also, if you have either 2 divs with the same ID or you have a global javascript variable with the same name as the DIV you will have troubles in IE.

You should also try (node).style.width and (node).style.height - these talk to the STYLEd width rather than the physical width. Since I can't see the body of code here, this may be an issue - IE has some weird behaviors here.

Gotta run, still trying to look smart @a client's... hope one of these working in the mean time...

/p

[nutballs]

basically whats building the page is a PHP that spits out JS which Document.write out to the client.
on the client, the result is an image, that when rolled over, would switch a hidden div to visible, and position it, absolutely on the page which is calculated relative to the image. So think of a flyout.

what I am trying to do is compensate for edge issues when the div would appear off page because of the layout. Easy enough in FF.

The ID of the div I am trying to get the dimensions of only exists once.
The style.width comes back blank, not even 0 in both browsers.

Code:

alert(window.document.getElementById("flyoutdiv").style.width);

since the rollover image is loaded at the same time as the div, actually in the same string, there should be no issue of the div not existing yet.