or anything else that you can control letter-spacing on. You'll need to pass 5 variables to the script when invoked:

expandText('which',start,finish,step,speed);

• which - the ID of the HTML you wish to modify
• start - the value for the beginning letter-spacing (must be less than finish)
• finish - the end value for letter-spacing (must be greater than start)
• step - the increment to increase letter-spacing (1 is the smoothest)
• speed - the speed in milliseconds to animate the expansion (1000=1 second)

Once you've determined the setting, then just call the routine. Here's how we called the routine when our page loaded:

Pretty simple, right? And pretty powerful too. You'll notice that we are setting our letter-spacing in pixels ("px" in the code). You can change that to one of the other units of measurement if you like. If you wanted to do this in points, just change "px" to "pt" and the letter-spacing will be adjusted with points.

This core routine can be used to modify things other than letter-spacing and we'll be using it in some of our future examples. You might also modify it to contract text. It can be done with just 2 simple changes. Give it a try.

Coffee Filters
One of the marvelous features that Internet Explorer 4.0 (or higher) offers is something that called Multimedia Filters. While we're not sure what qualifies these filters as multimedia, we do know that they give us the ability to manipulate our Web page as though we were applying Photoshop-like filters for blurring, opacity, etc.

Let's take a look at one now. Notice how the word coffee appears blurred? We'll bet you even noticed how both "coffees" look different. The top word is HTML text, the bottom word is an image created in Photoshop. We've used both types so that you can see how these filters act differently depending upon whether they are acting upon text or images, see below:

coffee

This is done with the simple application of the filter parameter to the CSS attributes of that division:

coffee

It's pretty simple when you know the attributes for the filter. In the case of blur we have add, direction, and strength.

Add is whether or not the original is included in the final filter effect. A value of 0 means don't include the original and a value of 1 means that the original should be overlayed in the final effect.
Here's what it looks like if we set Add to 0:

coffee

As you can see, this example makes it pretty obvious that the blur filter works best on images. The direction attribute should be a number between 0 and 360 indicating the direction of the blur. Strength is how strong the blur should be. Look at the example below, with direction set to 120 and strength set to 10:

coffee

Very Important: One thing that is extremely important to note is that you must specify a width for something that you want to apply a filter to. We're not sure why this CSS attribute is required, but we do know that without specifying width, none of these filters will have any affect.

---

Let's take a look at some of the other filters now. Here's a fun one called glow:

 coffee

 

coffee

Color is the hexadecimal value for the color you wish the glow to be and strength is used to indicate how strong the glow should be.

---

Similar to glow is the dropshadow filter:

coffee

coffee

Just as glow did, dropshadow uses the color attribute. It also uses offx and offy which specify the number of pixels to offset the shadow. Finally, it uses positive with a value of either 1 or 0. A value of 1 means to shadow the visible (or positive) pixels and a value of 0 selects the invisible (or negative) pixels.

---

The invert filter has no attributes but simply produces a negative color effect onto the section it is applied to:

coffee

coffee

---

Xray is an odd filter. It is very much like invert, but it first turns the area to grayscale and then inverts it. Like invert it has no parameters. It looks like this when applied:

coffee

coffee

---

And, since we've just seen something that has been turned to grayscale we should mention that there is indeed a grayscale filter. Once more, it is a filter with no attributes:

coffee

coffee

---

There are attributeless filters for flipping content. They are fliph and flibv for horizontal and vertical flipping respectively.

fliph:

coffee

coffee

flipv:

coffee

coffee

Those are the most basic filters and, as you can see, they hold a lot of potential. 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.

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:

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:

The Right Alignment
When you see DHTML used for animations and effects you most often see everything based on top left corner of the browser window. I suppose I could have gone along happily ever after basing everything on that location but I'm not one to settle for just what I'm handed; I always want more. Since I tell people to strive to create Liquid Web pages I thought I'd best learn to create a liquid DHTML page.

I knew there was a way to determine the right and bottom edge location of the browser so I spent a morning pulling my hair and sifting through documentation in an effort to find out how. After several hours I had found my solution!

It's really quite simple so I'm surprised that I had to look so hard to find an answer. Here's how to do it in IE4:

 rightEdge = document.body.offsetWidth;bottomEdge = document.body.offsetHeight;

And since we want to keep pages compatible with both 4.0 browsers, here's how you do it using Netscape Navigator's DOM:

rightEdge = innerWidth;bottomEdge = innerHeight;

Knowing how to do that in both browsers means we can combine that information into one small JavaScript function that finds our edges for us:

findEdges(){	if (navigator.appName == "Microsoft Internet Explorer") && (parseInt(navigator.appVersion) >= 4 ){		rightEdge = document.body.offsetWidth;		bottomEdge = document.body.offsetHeight;	} else {		rightEdge = innerWidth;		bottomEdge = innerHeight;	}}

Pretty simple really, first check to see if the browser is IE4 or higher, if it is then set the edges the IE4 way, if it's not, then set the edges the NN4 way. It's important to remember that this code is 4.0 specific so make sure you're not calling this in a 3.0 or smaller browser.

Now what can you do with this information? You can amaze your audience with Liquid DHTML. The possibilities are endless.