Login | Register   
LinkedIn
Google+
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


advertisement
 

Twelve Dynamic HTML Lessons : Page 11

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.


advertisement
Moving the Heavens

I know you've seen this trick before. I've broken out the image movement routine and will be showing you how to use it. As an added bonus you'll be happy to know that this one will work in Netscape Navigator 4.0 as well as Internet Explorer 4.0 or higher.

Let's take a look at the code that allows this to work in both browsers:



ie4 = ((navigator.appName == "Microsoft Internet Explorer") && (parseInt(navigator.appVersion) >= 4 )) ns4 = ((navigator.appName == "Netscape") && (parseInt(navigator.appVersion) >= 4 )) if (ns4) { layerRef="document.layers"; styleRef=""; } else { layerRef="document.all"; styleRef=".style"; }

This code starts with two browser detects so that it can determine if you have a DHTML capable browser. Then it sets some variables depending on which browser you have. The reason it must do this is that Navigator uses the document.layers object in it's Document Object Model for CSS positioning and Internet Explorer uses the document.all.id.styles object. Lucky for us we can work around that for compatibility. We're going to use those variables in the actual movement routine.

Here's the movement routine:

function moveDivision(which, start, finish, step, speed){ if (ie4 || ns4){ if (start < finish){ eval(layerRef + '["' + which +'"]' + styleRef + '.top = start'); eval(layerRef + '["' + which +'"]' + styleRef + '.left = start'); start=start+step; setTimeout("moveDivision('"+which+"',"+start+","+finish+","+step+","+speed+")",speed); } } }

I can't speak for anyone else, but I get pretty confused when I look at that code, mainly because of all the concantenation. If you look at the eval functions though you can see that we're using those compatability variables to make the right call depending on our browser. If you need to modify that section be very careful with your quotes.

The real key to making this work is the arguments that we pass to the routine. Here's what they are and what they mean:

  • which - the id of the division you are moving
  • start - the starting position for top and left positions
  • finish - the ending position
  • step - how to count, usually by 1's
  • speed - how long in milliseconds before each step

One limitation of this script is that it only works on diagonals. You could modify it easily enough so that only top or left were getting changed by deleting one or the other of the eval functions. This could give you a total of 8 possible directions you could move.

The next thing you need to know is how to call it. Although you could call it on any event, we are using the body tag's onLoad event to start the action. This means that nothing happens until the page is fully loaded. By doing it this way we are assured that the user has all of the images and can actually see the moving division.

<body bgcolor=black text=cccccc link=gold vlink=gold onload="moveDivision('planet',-190,200,1,30)">

That's how you get the JavaScript working but you can't forget to add the correct style attributes for the division you want to move. Here's the HTML for the division I'm using in this example:

<div id=planet style="position: absolute; width: 184; height: 180; left: -180; top: -180; z-index: 0"> <img src="images/planet.gif" width=184 height=180> </div>

Make sure you specify values for all of those style parameters. The z-index value of 0 puts the division behind everything on this page. We've given the rest of the page a z-index of 10. We needed to do this for Navigator compatability. The entire text of the page is in a division with relative positioning. The seemed to be the only way that we could get Navigator to recognize z-indexing relative to the text on the page.

You should be well armed now for moving heavenly bodies, or anything else you might want to move dynamically. So get out and start moving the web. Oh, and just to make it easier to cut and past, here's the entire JavaScript for making this work:

<script language=javascript> <!-- ie4 = ((navigator.appName == "Microsoft Internet Explorer") && (parseInt(navigator.appVersion) >= 4 )) ns4 = ((navigator.appName == "Netscape") && (parseInt(navigator.appVersion) >= 4 )) if (ns4) { layerRef="document.layers"; styleRef=""; } else { layerRef="document.all"; styleRef=".style"; } function moveDivision(which, start, finish, step, speed){ if (ie4 || ns4){ if (start < finish){ eval(layerRef + '["' + which +'"]' + styleRef + '.top = start'); eval(layerRef + '["' + which +'"]' + styleRef + '.left = start'); start=start+step; setTimeout("moveDivision('"+which+"',"+start+","+finish+","+step+","+speed+")",speed); } } } //--> </script>



Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

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