MSIE BlendTrans Filter

Use these to jump around or read it all…

You might have already read about the MSIE text filters available through version 5 (and above, as there will be more soon if not by the time you read this tutorial). I had a tutorial on those filters up about a month before this one was posted. If not, go and read that tutorial, too. It’s a great series of filters you can apply to both text and images.

But even if you have read the tutorial, you haven’t seen anything as cool as this filter. I think it’s so cool, in fact, that I left it for its own tutorial. This is the blendTrans filter. Follow the instructions on the buttons below. Remember, you have to be running MSIE v5 or nothing will happen… except maybe an error code or two.

Fade Text Out

Okay, that’s pretty smooth, right? Here’s even better news. The same basic script did all four effects. Yes, there are a couple changes to the script, but they are minor and easy to understand.

Understand this: we are not fading out text, nor are we fading out an image. The reason the same basic script works on all items is that the script is set to act upon a division. It is the division that fades in and out. Whatever happens to be within the division just fades right along with it. So, tables, GIFs, JPEGs, text, and anything else you can stick in a division will act the same way as the text and image examples above.

Let’s look at how the text faded out. Here’s the script:

<SCRIPT LANGUAGE=”JavaScript”>

<BUTTON onClick=”fadeOut()”>Fade Text Out</BUTTON>

Break Down the Code

We’ll begin from the bottom up. First the button:

The button was created through the HTML4.0 tag “BUTTON.” You don’t get much easier than that. Plus, there’s no need to set up the button as a FORM element. It can just stand on its own.

The thing that makes the magic is that the onClick Event Handler is set to trigger some function named fadeOut(). We’ll get to that soon enough. Moving ever upward….

<DIV ID=”oDiv” STYLE=”width: 200″>

</DIV>

This is the division. Obviously, what will display is housed between the tags <DIV> and </DIV>. In this case it’s just text. Soon it’ll be an image of fried eggs. Where else but here could you write a sentence like that and have it make sense?

The <DIV> tag has two attributes in it: ID=”oDIV” and STYLE=”width: 200″

Both are important. The ID will attach this specific division with a specific script that will act upon it. The STYLE attribute is set up to give the division some size. Yes, I know the text and image should do that for you. They don’t. Use the STYLE attribute to give the division size. Moving up….

<SCRIPT LANGUAGE=”JavaScript”>

</SCRIPT>

This is the function that will fade out the division we just looked at. It starts with the required SCRIPT LANGUAGE=”JavaScript” tag then goes right into a function named fadeOut(). Remember that? You should. It was only 100 words ago. The button we created had an onClick set to trigger this function. Now, what does the function do?

This line:

oDiv.style.filter=”blendTrans(duration=2)”;

…does the dirty work. It starts using a hierarchy statement to denote exactly which division it should go after. In this case it’s the one named “oDiv.” Remember? That was the ID name of the division we just looked at. Thus, this function and that division are linked – always.

This is considered a Style by MSIE, so that comes next. It’s a filter and the name of the filter is blendTrans. Following blendTrans are parentheses containing the transition duration. At the moment it’s set to 2, which means it takes two seconds to get the effect. You can set it to literally any number. I set it to .01 just to see if it would work. It did… very, very, quickly.

So we’re done, right? Technically, yes, but just as all good programmers will tell you, the real success of a good program is guessing all the things a user could do and offering a way to either help or to not throw errors. In this case, the user could click while the filter is being applied to the division. The next lines of code are for that alone.

if (oDiv.filters.blendTrans.status != 2)
{

}

If the duration is not (!=) 2 then someone has clicked during the process. The next three lines state that to continue to apply the filter, you need to set the division’s visibility to “hidden” since that’s what we’re shooting for, and play the filter through. It basically keeps the process going.

That’s it. You’ve seen it. Now, let’s look at reversing the process and getting that division to come back in.

Fade Back In

It looks like this:

<SCRIPT LANGUAGE=”JavaScript”>

<BUTTON onClick=”fadeIn()”>Fade Text Back In</BUTTON>

It looks much like the code we just tore apart except with some minor changes.

• The button is now set to enact a function called fadeIn().
  
• Visibility in the 6th line is now set to “visible” because we’re bringing it back into view.
  

That’s it. Just remember that you need two functions. One fades the division in and one fades the division out.

More Than One on a Page

This has given people more headaches when working with items that require a JavaScript to be attached to them. The best example I can give is someone wanting multiple image flips on the same page. They have 10 and only one works. It’s a simple fix, but you have to remember to change everything.

So, you want two of these on a page. That means you’re going to have to have four functions:

• Fade In First Division
  
• Fade Out First Division
  
• Fade In Second Division
  
• Fade Out Second Division
  

Four functions means four different function names. For instance:

• fadeOut
  
• fadeIn
  
• fadeOut2
  
• fadeIn2
  

You will require two divisions. Each division MUST have its own ID. They cannot have equal IDs. Give each one its own ID name.

• ID=”div1″
  
• ID=”div2″
  

Now, notice in the function that each line of code begins with the ID name of the division it is going to act upon. In this case the ID name was “oDiv.” With me?

oDiv.style.filter=”blendTrans(duration=2)”;

oDiv.filters.blendTrans.play();

You need to change EVERY ONE of those ID names to the ID name of the division it is acting upon or it won’t work. If you named your division “fred”, then the function would have to look like this to act upon “fred”:

fred.style.filter=”blendTrans(duration=2)”;

Know which division your function is to act upon and make sure the ID name is equal in the function and division.

I have four effects on this page: fade in and fade out for two divisions. I have four functions on the page to do those four effects. I feel that is the easiest method. It allows it all to stay straight in my own feeble mind. Yes, I know you can rewrite and program differently to get everything into the same function. If you want to do that, knock yourself out. I will go the easy route and re-paste the functions and change out the division names.

But I Hate Buttons!

Why you ungrateful little… be calm. Be calm! 1, 2, 3, 4, 5, 6…. Okay, I’m back.

To be honest, I’m not a big fan of buttons either. A hypertext link would probably look better. Dig this:

Here’s the code to use a hypertext link to get the effect:

The onClick and the function work the same way. The function is triggered here by the use of “javascript:” in the HREF position. Neat trick. It’ll work as long as you have JavaScript that can be fired through an Event Handler.

Start Invisible and Fade Up

So far, in all of these examples, the division has been visible then faded out before fading back in. But maybe you want the items to be missing first and then appear, like so:

The format is the same as was described above when we brought the text and egg image back. Use that function format. The trick here is getting the division invisible before the script acts upon it. You do that by putting this into the division:

The division will look like this:

<DIV ID=”Div4″ STYLE=”width: 200″ STYLE=”visibility:hidden”>

</DIV>

Nothing to it.

That’s That

This is a great effect. The best way I’ve seen it used was an image, in the upper left-hand corner of a page, that faded in slowly as the page loaded. The author had the function attached to an onLoad Event Handler in the page’s BODY tag. Very clever.

Enjoy!