Fade in and Fade out

While working on the class project, I needed to find a good way to get each of the individual div's in the html file to transition from one information to the other. I wanted to the transition to have the the information to fade in and then fade out. Since I am a total novice, I first looked up transitions and found that transitions could be easily done if I used the 'meta' tag. I tried using this tag with the appropriate attributes, but for some reason the code would not work on my screen. It turns out, the 'meta' tag is only useful in IE. The tag is made by Microsoft and only works on their browsers. So I needed to find another way to implement a fade in/out effect. After looking a little bit online, I found that there was a way to have a something fade in and fade out using Javascript. It is actually a very simple piece of code that uses the DOM styles attribute. The code is as follows:

FUNCTION setFadeIn(value){
IF (value <= 100) {
setOpacityValue(value);
+value += 10;
window.setTimeout("setFadeIn("+value+")" 100);
}
}

FUNCTION setFadeOut(value){
IF (value >= 0) {
setOpacityValue(value);
value -= 10;
setTimeout("setFadeOut("+value+")" 100);
}
}

FUNCTION setOpacityValue(opacityValue){
document.getElementById("someID".style.opacity = opacityValue/100;
}



By simply changing the opacity of an element, having something fade in and out is pretty simple. I have gotten this transition to look nice and work, but I now have to figure out how to get the transition to work with all the different elements of the current billboard gadget. Having the different elements working concurrently is pretty challenging and I hope to figure out this problem by my next week's blog.

Our current billboard, which still has some debug code on it, can be found at our google project site.