1. Technology

Your suggestion is on its way!

An email with a link to:

http://javascript.about.com/library/blanim02.htm

was emailed to:

Thanks for sharing About.com with others!

Web Page Animation

2. Hide Until Page Loaded

clr gif
Join the Discussion

Questions? Comments?

More of this Feature

Define Web Page Object

When you animate an object on your web page its position on the page is going to change either constantly or by a set distance in response to a specific event. Regardless of how the object is to move it can't start moving until after the page finishes loading. To avoid having the object just sitting on the page until we are ready to animate it, we can hide the object until the page is loaded.

Our first animated effect will be to make the object appear on the screen once the page has loaded.

The first step is to hide our web page object so that it doesn't appear on the page while the page is loading. We do this by adding to the stylesheet that we have already defined for our web object.

#myobj {visibility:hidden;
position:absolute;top:300px;left:200px;width:200px;}

Now when the web page loads this object will not appear on the page. We now need to add some Javascript to the page to make the object visible when we are ready.

To be able to reference the web page object from Javascript we need to make use of the Document Object Model (or DOM). All version 5+ browsers support the standard DOM which uses getElementById to reference our web page object by its id. Internet Explorer 4 and Netscape 4 came out before the standard DOM was developed and so they use their own DOMs (all and layer respectively). We can easily cater for users of these old browsers as well as the more modern ones by using a cross browser DOM script. I have already written a script that handles this for you so that all that you need to do is to copy my cross browser DOM script and save it into a Javascript file that we will attach into the head of our page. Since the script is going to contain the functions that we will use to animate the page let's call it animhead.js.

The next thing that we need is a function that can change the visibility status of a web page object so that we can start with the object hidden and then show the object once the web page finishes loading. I have written a set of functions that change object attributes that you can copy and add to the bottom of animhead.js that will handle this task for you (along with other tasks relating to animating your web page that we will get to later).

To be able to call the functions in our animhead.js file we need to link it into our web page. We do this by adding the following code:

<script type="text/javascript" src="animhead.js">
</script>

The final step is to actually call the function within animhead.js that will change the visibility of our object so that it will appear on the page.

There are two ways that we can trigger our script to make the web page object appear after the page finishes loading. We can either add an onload attribute to the body tag of our page to call the function like this:

<body onload="setObjVis('myobj','visible');">

Alternatively we can add a function into our head script that will call this function and set the script to run automatically once the page has loaded like this:

function start() {
setObjVis('myobj','visible');
}
window.onload = start;

Using this second method will make it easier to add further functionality to actually animate our object.

So now we have the object remain hidden until the page finishes loading.

Related Video
Hide Info in Microsoft Excel

©2014 About.com. All rights reserved.