Fun with Fading
I had an idea for something neat I wanted to do on my website. In the Reflections section, rather than displaying all the entries on the same page in one big list, I wanted to display them one at a time, and have them fade in and out between entries. I figured you might be able to control opacity with styles, and hence Javascript... and you can.
Of course, Firefox and IE handle these differently. Firefox supports the CSS3 style "opacity", which takes a value between 0 and 1, as in the following example:
Of course, IE doesn't support this. Instead, you need to use something called an alpha filter. The syntax for this is as follows:
This takes values between 0 and 100, as you can see in the example. One really quirky thing about the IE alpha filter is that it doesn't work unless you have a width specified. Go figure! It took me quite a while to discover why my code wasn't working, when I'd written it exactly the same way as the example I found online. Nothing I read mentioned this little anomaly. But when I added a width to the style, suddenly it worked. Typical IE quirkiness, I guess.
Next, I created some Javascript to load all the entries into an array, and cycle through them, fading each one in and out. Fading is just a series of statements setting the opacity to progressively greater or lesser values. The only real challenge here was the timing, which I achieved by using the setTimeout function. This function will execute a Javascript statement, such as another function call, after a specified period of time expressed in milliseconds. For example:
setTimeout("fadeout()",3000);
The trick here is that it executes the next line of code immediately following the setTimeout statement. So, if you want the system to wait before it does something else, the setTimeout needs to be the last statement in your function, and the function that you call needs to be responsible for calling the next action. Therefore, I load the entry, then fade in. The fade in function is responsible for calling the fade out function after displaying the entry for the desired interval. Then the fade out function is responsible for loading the next entry, and calling fade in again.
Feel free to look at the source code if you'd like more detail.
Also, I happened to be listening to internet radio while I was working on this. I was viewing my results over some beautiful piano music, and it was so nice... I think I may record something pretty to play in the background as you're viewing this page.
I think I might combine the Scripture, Quotes, and Reflections and present them all in this fashion.
