moo.fx Fade Example

About the Effect
Code Explaination
Other Links

About This Example

The moo.fx javascript libraries are small and load very fast. With some effective optimizations, you could have a page that loads faster than Flash with similar effects. I would bet that 80% of the things we see done in Flash are simple enough to be obtained through Javascript, which broadens compatibility by the way. Not that I'm 100% anti-Flash, but I'm just against it's use in worthless ways...Which is all too often. We forget that not everyone has broadband and that we CAN overtax even a broadband connection in this day and age.

The second thing to remember is that search engines can't read Flash. I know there are Javascript replacements that replace Flash with text, etc. However, that adds more time to loading the page and many search engines don't follow Javascript.

Wait, I just said they don't follow Javascript, so how are they going to see the code on pages with this effect?!!? Disable the style sheet (Firefox developer toolbar is awesome, or click here) and you'll see. All the content is actually loaded and the search engines will pick it all up. You don't see it because the style sheet and Javascript hide it on you. Let's pray search engines don't start growing a big dependency on style sheets.

There is one important hang up to note that moo.fx has an issue with. There's a function in moo.fx called "hide()" but it doesn't truly hide something. All it does it set the opacity at zero. Well, that's great, BUT any links in that now hidden div are still clickable! So I found a way around that by creating a function called "hideAll()" and several functions to display the objects again found in the load.js file. It's not a lot of code - but potentially can be depending on how many objects you are going to hide and display...but remember it's also only technically needed when you have links. I'm sure there's a shorter method, but I don't want to "hack" core moo.fx files. Forks are bad mmmkay??

Code

Here's the juicy part. First, include the moo.fx libraries in your head section (you can copy and paste this part, just remember to check where your javascript files are located):
    <script type="text/javascript" src="js/prototype.lite.js"></script>     <script type="text/javascript" src="js/moo.fx.js"></script>     <script type="text/javascript" src="js/moo.fx.pack.js"></script>          <script type="text/javascript" src="js/load.js"></script>
OnLoad
The load.js file contains all moo.fx onload commands (download it and modify it or read the explaination below). Alternatively you could put that inside your page if you don't want to load an external file for it - or if you are having problems loading an external file for some reason. I personally like to ensure that my content is as close as possible to the top of my page for better search engine optimization and effective downloading speeds.

That load file is where we'll be focusing most of our attention for lack of moo.fx documentation. Here's the first thing we'll dicuss:
    aboutOpacity = new fx.Opacity('aboutContent', {duration: 800, onComplete: function()            { codeOpacity.setOpacity(0); linksOpacity.setOpacity(0); }       });
What we see here is aboutOpacity... which is the name of the effect. This can be anything you like, it doesn't matter -- although if you keep the names shorter, you add less characters which reduces byte size and technically makes things load faster...Just don't overdo it and confuse yourself.

Next we have = new fx.Opacity('aboutContent', ... which tells us to use moo.fx's opacity function and apply it to the id (#aboutContent in our style sheet). {duration: 800, onComplete function() { ... Set the duration for the fade to fade in/out and then we have a function that runs when the effect has completed (faded in or out). Here's an important part.

This line: { aboutOpacity.setOpacity(0); linksOpacity.setOpacity(0); } is for what I like to call "idiot-proofing" even if you create an "x" or "close" button to hide an element, people may not click on that. They may go ahead and click on your next link to display another element or window. Now you have several overlapping each other. While other parts of my code eliminate that, you've never "turned off" the light switch - so when you go to flip it on again it's not flipping on, it's flipping off. You'll see the fade function flash the element and then fade it to zero when you clicked a link that apparently would show the element...instead it hid it. The long part here is when you have many elements to switch between, you will need to write them all out here. Fortunately copy and paste saves time.

Next, you want repeat these functions for each element and make sure you don't set the current element to 0 in the onComplete function - ONLY every other element.

Here's your next important part.
        aboutOpacity.setOpacity(0);         codeOpacity.setOpacity(0);         linksOpacity.setOpacity(0);
What this does is it sets the opacity of everything to 0 when the page loads. You can change any of these values so it shows a certain element when the page loads if you wish. I wanted everything hidden in my case. Remember our light switch analogy with this.

The first half
The first part should look like a standard moo.fx onload script. I really took my time in explaining it all here, but really, it's quite simple (you can copy and paste this part and change around all the names to fit your needs):
    window.onload = function() {               aboutOpacity = new fx.Opacity('aboutContent', {duration: 800, onComplete: function()            { codeOpacity.setOpacity(0); linksOpacity.setOpacity(0); }           });                  codeOpacity = new fx.Opacity('codeContent', {duration: 800, onComplete: function()            { aboutOpacity.setOpacity(0); linksOpacity.setOpacity(0); }          });              linksOpacity = new fx.Opacity('linksContent', {duration: 800, onComplete: function()            { codeOpacity.setOpacity(0); aboutOpacity.setOpacity(0); }          });                  aboutOpacity.setOpacity(0);         codeOpacity.setOpacity(0);         linksOpacity.setOpacity(0);              }
Now, that's the onload part that's partially covered in the moo.fx documentation. What the limited documentation doesn't tell you is the last three lines about setting the opacity to zero to start with. I had to scour the forums to find that out.

The Second Half
    function displayAbout() { document.getElementById('aboutContent').style.display = ''; }
A function like the one above will need to be created for every element that you need to hide (all the elements that have links in them technically are the only ones that need it). This is the function to "unhide" let's say. I used the word "display" in the function name but that may be misleading, it isn't going to really display anything because our opacity will still be at zero. It's just changing the css property through javascript so it's ready to be displayed. Of course the key parts here are the function name (whatever you like) and the ID that's being altered which will relate to same IDs that you used in the first part.
    function hideAll() {         document.getElementById('aboutContent').style.display = 'none';     }
The above code creates a function to "hide" all the elements. I only have one in here but you will need to put all of the elements that you need to hide. Again techincally these are only the ones that overlap and annoy you with the link problem, although I may be inclined to do it for everything just in case you add links in the future and forget.

We're Almost There!
Ok, we're all done with the loading part. The next thing we need to do is create "events" to call these functions. In this example we just used links via the "onclick" Javascript command within our html links.
    <a href="#" onclick="hideAll();displayAbout(); aboutOpacity.toggle(0, 1);">About</a>
There are three parts to the above line. We first call hideAll(); because we want to get rid of anything that might be displayed. Then we want to call the displayAbout(); because we want to get the desired element ready to be displayed. In my case here, it's called "displayAbout" but this function name is defined by you from the other part above. Then we want to run the moo.fx function that we defined for this element, "aboutOpacity" WITH the method "toggle," .toggle(0,1); and we specify 0, 1 because we want to go from 0% to 100%. This could be 0, .5 if we only wanted to go to 50% opacity for example. Now this method "toggle" is like that light switch I was talking about earlier - but it has absolutely no idea if it's on or off. So that's why we needed to set the starting opacity at 0 when the page loaded (in load.js) and also why we needed to set the opacity at 0 for all the other elements in the "onComplete" part of each moo.fx function we defined.

Hold it Pardner!
You may have realized that these elements don't fade out when flipping between them. Well the hide is instant of course...however, you could implement some minor code to fade elements out too....BUT you'd need to put a "sleep" function on the "hideAll();" function so that it went AFTER the fade out. I didn't do this because I didn't want people to wait for things to fade out and then in...I figured the fade in took enough time as is and it would become rather annoying to wait unecessary lengths of time.

moo.fx Fade Example

About This Example

Code

Other Useful Links