SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Dec 2009
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Debugging a simple function

    Hello guys,

    I'm trying to attempt a simple animation, as indicated by the following code.
    The intention is to move the object (a paragraph element node with id message) to the right by 200 px and down 100 px, by 1 px a second.

    However, there seems to be a bug or my methodology is incomplete as the browser returns the Textvalue of the paragraph without any styling.


    Code:
    function moveMessage()
     {
    if (!document.getElementById) return false;
    if (!document.getElementById("message")) return false;
    var elem = document.getElementById("message");
    var xpos = parseInt(elem.style.left);
    var ypos= parseInt(elem.style.top);
    if (xpos == 200 && ypos == 100)
    { 
    return true;
    }
    if (xpos < 200)
     {
    xpos++;
    }
    if (xpos > 200) 
    {
    xpos--;
    }
    if (ypos < 100) 
    {
    ypos++;
    }
    if (ypos > 100) 
    {
    ypos--;
    }
    elem.style.left = xpos + "px";
    elem.style.top = ypos + "px";
    movement = setTimeout("moveMessage()",10);
     }

  2. #2
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2008
    Posts
    5,757
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by kbedi87 View Post
    the browser returns the Textvalue of the paragraph without any styling.
    This makes no sense to me. How does the browser "return" something?

    Anyway:
    make sure you give the element a css position, like absolute.
    make sure elem.style.left and top have a value. parseInt() can return NaN when it fails, and setting elem.style.left = "NaNpx" is not going to work well


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
  •