I started developing a website that for many aspects should be similar
to a Flash website but of course only in JS. What a challenge! An
important part, of course, should be the managing of the position of
the objects and to do so I need at least to be able to get all the
properties from them, also if they have dynamic content. The very
simple issue I'm stuck at the moment is to get the width of a div that
contain a text, to place at its right the next div. I have very
different behaviors in IE and Mozilla when I move a DIV. In fact given
this structure:
<div name="containerDiv" id="containerDiv"
style="background-color:#CCCCCC;position:absolute;top:10px;left:10px ">
<div name="levelZeroDiv" id="levelZeroDiv">
some text here...
</div>
<div name="levelOneDiv" id="levelOneDiv"
style="background-color:#CC0000;position:absolute;top:0px;"></div>
</div>
after using this code (it is very simplified from the original):
document.getElementById('levelOneDiv').innerHTML=" some text here...";
getStyleObject("levelOneDiv").left= "100px";
on IE I have the DIV with its colored background placed to the right
position, on Mozilla I see the text positionate in the right position
but no backround. The left attribute seems the be changed but if I
check its width, using this function I refined from one I found on the
web:
function getWidth(someObject){
var w;
if (someObject.style.width){
w=someObject.style.width;
}else if(someObject.style.pixelWidth){
w=someObject.style.pixelWidth;
}else if(someObject.offsetWidth){
w=someObject.offsetWidth;
}else if(document.defaultView &&
document.defaultView.getComputedStyle) {
w=document.defaultView.getComputedStyle(someObject ,'').getPropertyValue('width');
}
if(typeof w=="string") w=parseInt(w);
return w;
}
getWidth(document.getElementById('levelOneDiv'))
It's width is 0. On IE it works perfectly. Does anyone have any clue on
why it happens? Do you know any resource can help me with this very
annoying issues?
Thanks to all, chr
