SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Jun 2008
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    element movement

    Hi!
    Anybody knows how i could use a for loop to move an element diagonally from the upper left corner of my webpage to the bottom right corner. Moving the element using the left and top style properties.

    Thanks!

  2. #2
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by thebrad View Post
    Anybody knows how i could use a for loop to move an element diagonally from the upper left corner of my webpage to the bottom right corner. Moving the element using the left and top style properties.
    I agree, although there really was no need to mention it.
    Tab-indentation is a crime against humanity.

  3. #3
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A little rough around the edges, but does what you want.

    Code javascript:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <title>Untitled Document</title>
            <link rel="stylesheet" type="text/css" media="screen" />
            <style type="text/css">
                #square {
                    width: 15px;
                    height: 15px;
                    line-height: 0.1px;
                    font-size: 0.1px;    
                    border: solid 1px #000000;
                    position: absolute;
                }
            </style>
            <script type="text/javascript">
                function moveSquare() {
                    var square = document.getElementById('square');
                        square.style.top = (square.offsetTop + 5) + 'px';
                        square.style.left = (square.offsetLeft + 5) + 'px';
                    if(square.offsetTop < viewport()[1] || square.offsetLeft < viewport()[0])
                        setTimeout(moveSquare, 100);
                }
                function viewport() {
                    var viewportwidth;
                    var viewportheight;
     
                    if (typeof window.innerWidth != 'undefined') {
                        viewportwidth = window.innerWidth,
                        viewportheight = window.innerHeight
                    } else if (typeof document.documentElement != 'undefined'
                    && typeof document.documentElement.clientWidth !=
                    'undefined' && document.documentElement.clientWidth != 0) {
                        viewportwidth = document.documentElement.clientWidth,
                        viewportheight = document.documentElement.clientHeight
                    } else {
                        viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
                        viewportheight = document.getElementsByTagName('body')[0].clientHeight
                    }
                    return [viewportwidth, viewportheight];
                }
                window.onload = moveSquare;
            </script>
        </head>
        <body>
     
            <div id="square"></div>
     
        </body>
    </html>



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
  •