Javascript | Re-Cycled Air

Edit: This post was made before I started using JQuery or Mootools. This can safely (luckily) be ignored now.

For the past couple months I’ve been playing around with Ajax style events on a few pages I’ve been working on. One of the main problems I’ve run into is cross-browser compatibility (surprise!). To solve that problem, I took the advice of a book that I’m reading and made a utility file for some of the most annoying cross-browser issues: Event Handlers, Activated Objects, and Request Objects. You can download the utility file by clicking the link below.

Download utils.js here.

Enjoy! If you have any questions, please leave them in the comments and I’d be happy to get back with you.

Edit: This was created before I had discovered JQuery or MooTools. Please, for the love of God, use those instead.

You’re working on your first sweet ajax form implementation. You’ve got the form communicating asynchronously with the server and sending status updates between to the two. However, when you want to let users know that the form is processing, the processing image just kind of “pops” in there. What you need is an easy “fade in implementation”.

The HTML

<div id=”myimage”>
<img src=”myimage.gif” />
</div>

The CSS

#myimage {
opacity: 0;
}

The Javascript

function fadeIn(id, level) {
if(document.getElementById) {
object = document.getElementById(id);
if(level <= 100) {
setOpacity(object, level);
level += 10;
window.setTimeout(“fadeIn(‘”+id+”‘,”+level”)”, 100);
}
}
}

function setOpacity(object, level) {
level = (level == 100)?99.999:level;
object.style.filter = “alpha(opacity:”+level+”)”;
object.style.KHTMLOpacity = level/100;
object.style.MozOpacity = level/100;
object.style.opacity = level/100;
}

How To Use It
Using this code is pretty easy. Make sure that the CSS & Javascript are included in your document correctly, then do the following.

fadeIn(“myimage”,0);

If you have any questions, leave a comment and I’d be glad to help.