[RESOLVED] JavaScript problem

Hi all, the following code is supposed to move <div> elements around. but it only moves the element (Tit) :confused: (maybe it likes the name) :p .. can anybody tell me why?

I'm calling it from Body onload="setInterval('drift()',100)"

another thing, this doesn't work on FireFox :confused: .. if somebody knows why, please tell me

thanks

Code:

---

function drift() {
        var z=document.getElementById("Tedu").style;
        if ( z.pixelTop < 200 && z.pixelLeft == 0 ) z.pixelTop +=5;
        else if ( z.pixelLeft < 200 && z.pixelTop == 200 ) z.pixelLeft +=5;
        else if ( z.pixelTop <= 200 && z.pixelTop > 0 ) z.pixelTop -=5;
        else if ( z.pixelLeft <= 200 && z.pixelLeft > 0) z.pixelLeft -= 5;
        z=document.getElementById("Tit").style;
        if ( z.pixelTop < 200 && z.pixelLeft == 0 ) z.pixelTop +=5;
        else if ( z.pixelLeft < 200 && z.pixelTop == 200 ) z.pixelLeft +=5;
        else if ( z.pixelTop <= 200 && z.pixelTop > 0 ) z.pixelTop -=5;
        else if ( z.pixelLeft <= 200 && z.pixelLeft > 0) z.pixelLeft -= 5;
        z=document.getElementById("Tarch").style;
        if ( z.pixelTop < 200 && z.pixelLeft == 0 ) z.pixelTop +=5;
        else if ( z.pixelLeft < 200 && z.pixelTop == 200 ) z.pixelLeft +=5;
        else if ( z.pixelTop <= 200 && z.pixelTop > 0 ) z.pixelTop -=5;
        else if ( z.pixelLeft <= 200 && z.pixelLeft > 0) z.pixelLeft -= 5;
        z=document.getElementById("Tlaw").style;
        if ( z.pixelTop < 200 && z.pixelLeft == 0 ) z.pixelTop +=5;
        else if ( z.pixelLeft < 200 && z.pixelTop == 200 ) z.pixelLeft +=5;
        else if ( z.pixelTop <= 200 && z.pixelTop > 0 ) z.pixelTop -=5;
        else if ( z.pixelLeft <= 200 && z.pixelLeft > 0) z.pixelLeft -= 5;

---

pixelTop and pixelLeft are IE proprietary extensions. You need to take left value and convert it to an integer value and then set the integer and add "px" to make it work with non-IE browsers (Opera might support pixelTop and pixelLeft as well as they've copied a lot of IE features, sometimes even severe IE bugs [though removed later on as they've caused a lot of problems]).

Quote:

---

Originally Posted by Merri

pixelTop and pixelLeft are IE proprietary extensions. You need to take left value and convert it to an integer value and then set the integer and add "px" to make it work with non-IE browsers (Opera might support pixelTop and pixelLeft as well as they've copied a lot of IE features, sometimes even severe IE bugs [though removed later on as they've caused a lot of problems]).

---

That was the other thing
The thing is "I want this code to execute properly on IE"

Code:

---

var z = document.getElementById("Tedu").style;
var l = z.left.substring(0, z.left.indexOf('px')) * 1;
var t = z.top.substring(0, z.top.indexOf('px')) * 1;

// ... other code here doing the comparisons for l and t and changing values as appropriate ...

z.left = l + 'px';
z.top = t + 'px';

---

Works perfectly on Internet Explorer as well afaik. No need to do browser checking (or JavaScript features checking).

for some reason (only the 'Tit' div works)
here is a part of the html:

HTML Code:

---

        <img src="images/fPharm.gif" alt="pharm" /> </div>
<div id="fin" style="left:950px; top:200px">
        <img src="images/fFinance.gif" alt="fin" /> </div>
<div id="Tit" style="left:403px; top:191px">
        <img src="images/tIT.gif" /></div>
<div id="Tarch" style="left: 425px; top: 289px">
        <img src="images/tArch.gif" /></div>
<div id="Tart" style="left: 320px; top: 343px">
        <img src="images/tArt.gif" /></div>

---

and this is the head:

HTML Code:

---

<script type="text/javascript" language="javascript" src="script.js"></script>
<style type="text/css">
div{
position:absolute;
z-index:auto;
}
</style>

---

Thanks in advance

how stupid I was
it was just a positioning issue (no if statement returns true) http://www.vbforums.com/images/ieimages/2006/04/1.gif

Sorry for disturbing you guys