Results 1 to 8 of 8

Thread: [RESOLVED] JavaScript problem

  1. #1

    Thread Starter
    Arabic Poster ComputerJy's Avatar
    Join Date
    Nov 2005
    Location
    Happily misplaced
    Posts
    2,513

    Resolved [RESOLVED] JavaScript problem

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

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

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

    thanks
    "I'm not normally a praying man, but if you're up there, save me... Superman!" - Homer Simpson
    My Blog

  2. #2

    Thread Starter
    Arabic Poster ComputerJy's Avatar
    Join Date
    Nov 2005
    Location
    Happily misplaced
    Posts
    2,513

    Re: JavaScript problem

    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;
    "I'm not normally a praying man, but if you're up there, save me... Superman!" - Homer Simpson
    My Blog

  3. #3
    VB6, XHTML & CSS hobbyist Merri's Avatar
    Join Date
    Oct 2002
    Location
    Finland
    Posts
    6,654

    Re: JavaScript problem

    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]).

  4. #4

    Thread Starter
    Arabic Poster ComputerJy's Avatar
    Join Date
    Nov 2005
    Location
    Happily misplaced
    Posts
    2,513

    Re: JavaScript problem

    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"
    "I'm not normally a praying man, but if you're up there, save me... Superman!" - Homer Simpson
    My Blog

  5. #5
    VB6, XHTML & CSS hobbyist Merri's Avatar
    Join Date
    Oct 2002
    Location
    Finland
    Posts
    6,654

    Re: JavaScript problem

    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).

  6. #6

    Thread Starter
    Arabic Poster ComputerJy's Avatar
    Join Date
    Nov 2005
    Location
    Happily misplaced
    Posts
    2,513

    Re: JavaScript problem

    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>
    "I'm not normally a praying man, but if you're up there, save me... Superman!" - Homer Simpson
    My Blog

  7. #7

    Thread Starter
    Arabic Poster ComputerJy's Avatar
    Join Date
    Nov 2005
    Location
    Happily misplaced
    Posts
    2,513

    Re: JavaScript problem

    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
    "I'm not normally a praying man, but if you're up there, save me... Superman!" - Homer Simpson
    My Blog

  8. #8

    Thread Starter
    Arabic Poster ComputerJy's Avatar
    Join Date
    Nov 2005
    Location
    Happily misplaced
    Posts
    2,513

    Re: JavaScript problem

    how stupid I was
    it was just a positioning issue (no if statement returns true)

    Sorry for disturbing you guys
    "I'm not normally a praying man, but if you're up there, save me... Superman!" - Homer Simpson
    My Blog

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width