SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict
    Join Date
    Mar 2004
    Location
    Europe
    Posts
    214
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    This DHTML works in IE and Opera but not FF or Moz. Why+how?

    It's here: www.medicaltextbooks.co.uk
    Works fine in Opera and IE but not FF or Moz. I guess it is not really the best way to do this. . .

    Here is a snippet.
    Code:
    function mover1(){
    	if (drop1.style.pixelTop<279){
    		drop1.style.pixelTop+=40;
    		setTimeout("mover1()",0.25);
    		}
    	else mover2();
    }
    I've been told to use this method instead:

    Code:
    function mover1(){
    	if(document.getElementById('drop1').style.top < 279){
    		document.getElementById('drop1').style.top += 40;
    		setTimeout('mover1()',0.25);
    	}
    	else mover2();
    }
    But that does not work in FF either. The javascript console reports no errors this time (it does with the first method) but nothing happens at all, even in Opera and IE.

  2. #2
    SitePoint Wizard stereofrog's Avatar
    Join Date
    Apr 2004
    Location
    germany
    Posts
    4,324
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    "style.top" is a string, not a number. Because of that numeric comparison or addition with it are incorrect. Use offsetTop property to retrieve actual position of the element:

    Code:
    function mover1(){
    	var pos=document.getElementById('drop1').offsetTop;
    	if(pos < 279){
    		document.getElementById('drop1').style.top = pos + 40;
    		setTimeout('mover1()',0.25);
    	}
    	else mover2();
    }

  3. #3
    SitePoint Addict
    Join Date
    Mar 2004
    Location
    Europe
    Posts
    214
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That doesn't work either. I get an error saying mover1() not defined in Opera too!

  4. #4
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The code posted by stereofrog should work, except that you need to put the units on the assignment:

    document.getElementById('drop1').style.top = (pos + 40) + 'px';

    Using ele.style.top will work because you've used inline styles to set the initial left/top.
    Code:
    function mover1(){
      var e = document.getElementById('drop1');
      var t = parseInt(e.style.top);
      if (t < 279){
        e.style.top = (t + 40) + 'px';
        setTimeout("mover1()", 25);
      }
      else mover2();
    }
    Update the page at the link you've provided - so we can see what's happening also.

  5. #5
    SitePoint Addict
    Join Date
    Mar 2004
    Location
    Europe
    Posts
    214
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Talking

    It's been a while. . .

    I just wanted to say that this last method works very well in all the browsers I need it to. Thanks.

  6. #6
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're very welcome

    Have a great day!


Bookmarks

Posting Permissions

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