background
|
|
Tombstone
Tombstone Tuning
Home of tuning, projects and fast cars and boats.
More icon

Random
|
|
Up Image
Navigation
Search this Site
Enter your search terms

Site Breadcrumb - You are here
|
Taylor's Dynamic HTML Tutorial
Lesson 3

by Taylor

Page 4 — How the Script Works

So if you want to control the position of an object, your JavaScript would go something like this:

    <script language="javascript">
    
    function moveIt() {
    
       if(document.layers) {
    
          document.truck.left -= 5;
    
          if (document.truck.left <0) {
    
    	document.truck.left = 480;
    
          }
    
       } else if (document.all) {
    
          truck.style.left = parseInt(truck.style.left) - 5;
    
          if (parseInt(truck.style.left) < 0) {
    
    	truck.style.left = 480;
    
          }
    
       }
    
       if ((document.layers) || (document.all)) {
    
         setTimeout('moveIt()', 100);
    
       } 
    
    }
    
    </script>

Which would look something like this:



[On this page you are seeing GIFs instead of actual dynamic HTML because you're using a pre-4.0 browser.]

The code above could be translated as:

  • If the client supports the document.layers object,
    • subtract five from the left value of the layer object named truck.
    • If the layer object named truck is less than zero,
      • then the left property of the layer object named truck should be set to 480.
  • However, if the client supports the document.all object,
    • take the integer value minus five from the style selector left from the HTML object named truck.
    • If the integer value of the style selector left of the HTML object named truck is less than zero,
      • set the value to 480.
  • If the client supports either of the objects document.all or document.layers,
    • wait a 10th of a second and execute the function named moveIt.

     

OK, now you do it. Drive the truck all up and down a page. And then let's move on to the next section. A little note here: You'll want to put your style information inline, i.e., <DIV id="truck" style="position: absolute; left: 20; top: 20">. I know that this kind of breaks up any conceptually friendly separation of content and presentation, but I'll show you how to do this when we get to the advanced animation section.

next page»