Browse DevX
Sign up for e-mail newsletters from DevX


Twelve Dynamic HTML Lessons : Page 5

From Cascading Style Sheets to higlighted text to toggling images on and off the page, here are twelve fancy things that you can learn to do today in DHMTL.

Making the Earth Move
Now that you've mastered divisions it's time to look at the power of some new style attributes that allow us to control the position of divisions. Why would we want to do that? Well, for a long time now people who build the Web have been complaining about their inability to place things on their pages with accuracy. Now they—and you—can. Not only that, but you can move them around as needed. Take this image of the Earth, for instance:
The Earth
It's just sitting there, not exactly in a spectacular place. So let's have some fun with it, shall we? Here's a form with top and left input fields. Enter a number in each, then press the button to see where the earth ends up.
top:    left:
Cool, eh? We think so. Of course, this example isn't the most useful one we could have created. We created it so that you could think about the possibilities. It is not something we expect to see in Web pages.

Now let's examine how this is accomplished. Here's the style declaration for the earth division:

#earth {position: relative;
             top: 0; 
            left: 0}
Position is set to relative. This means that the position of this division is relative to previous divisions. If we had set position to absolute, it would mean absolute position on the page based on the upper left corner. This attribute determines if the 0,0 coordinates start at the top left of the page, or the top left of the division.

Top and left are both set to 0, the starting point for the division. All positions are calculated based on the 0,0 coordinates and the values can be either positive or negative. Go back up the page and enter negative values to move the Earth to see what we mean.

Don't forget to put the ID in the <div> statement. Here's our division:

<div id="earth"><img src="images/earth.gif" width=37 height=37 
alt="The Earth"></div>
The simple part though is that we only needed to name the division to access it via JavaScript. In this case all we are doing is setting earth.style.top and earth.style.left to move the planet. In JavaScript it would look like this:

earth.style.top = 25
earth.style.left = 13
Those JavaScript statements would set the left and top style attributes of the division with the id of "earth" to top position 25, left position 13.

Very simple! Imagine what you can now do via the positioning of overlapping elements. Remember, you don't need to do any scripting to set the style attributes of top and left. Everything is accessible via style declarations. You only need to script if you are going to be changing the page on the fly.

In our next lesson we'll cover still more Dynamic HTML and provide you with a bit of cut & paste JavaScript that you can have some fun with.

Thanks for your registration, follow us on our social networks to keep up-to-date