topical media & game development

talk show tell print

basic-javascript-12-moving-content.htm / htm



  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      
  <html xmlns="http://www.w3.org/1999/xhtml" >
  <head>
      <title>Moving Content</title>
      <style type="text/css">    
          #divAdvert {
              position: absolute;
              font: 12px Arial;
              top: 4px;
              left: 0px;
          }
      </style>
      <script type="text/javascript">
      var switchDirection = false;  //To keep track if which way we're going
  
      function doAnimation() {
          var divAdvert = document.getElementById("divAdvert");  //Get the element
          var currentLeft = divAdvert.offsetLeft; //Get the current left position
          var newLocation; //Will store the new location
          
          if (switchDirection == false) { 
              newLocation = currentLeft + 2; //Move the text 2 pixels to the right
              
              if (currentLeft >= 400) { //We've reached our destination
                  switchDirection = true; //So let's turn around
              }
          } else {
              newLocation = currentLeft - 2; //Move the text 2 pixels to the left
              
              if (currentLeft <= 0) { //We've reached our destination
                  switchDirection = false; //So let's turn around
              }
          }
          
          divAdvert.style.left = newLocation + "px"; //Change the left position
          setTimeout(doAnimation, 10); //Keep the animation running.
      }
      
      window.onload = doAnimation; //Load the animation when the page loads
      </script>
  </head>
  <body>
      <div id="divAdvert">Here is an advertisement.</div>
  </body>
  </html>
  


(C) Æliens 20/2/2008

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.