1. Computing
Send to a Friend via Email
This is a web page object.
hide

Web Page Animation

5. Hide Again

clr gif

In this tutorial we are going to look at a couple of ways that we can remove our object from the web page. First let's amend our object so that we have a "hide" link displayed as part of the object itself that can be clicked on to make the object disappear from the screen. Of course this change will make our object bigger but we already have the code in place to test the actual size of the object so changing its size wont affect the existing functionality.

<div id="myobj">
This is a web page object.<br /><a href="#"
onclick="setObjVis('myobj','hidden');return false;"
>hide</a>
</div>

When the onclick event associated with the "hide" link is triggered by someone clicking the link the appropriate function from our now extensive function library is called to change the visibility of our object to "hidden".

Note also that the link doesn't have to be within the object, it could be anywhere on our page. Selecting to hide an object that is already hidden doesn't really make much sense so one advantage of having it in the object itself is that the link will be hidden along with the object.

Next let's suppose that we want to hide the object automatically after one minute even if the link to hide the object hasn't been clicked. We can do this by adding one extra line to the start function.

function start() {
var w = objWidth('myobj');
var h = objHeight('myobj');
xxx = Math.floor(Math.random()* (pageWidth()-w));
yyy = Math.floor(Math.random()* (pageHeight()-h));
moveit();
setObjVis('myobj','visible');
setTimeout('setObjVis(\'myobj\',\'hidden\');',60000);
}

The setTimeout function takes the same code as we previously used to make the object disappear as its first parameter (with the apostrophies within the function call preceded by slashes so that they are not treated as the end of the parameter string). The second parameter is the delay that we want in milliseconds before the code in the first parameter is run. There are 1000 milliseconds in a second and 60 seconds in a minute so 60000 gives us our one minute delay. Placing this call immediately after the one that makes the object visible ensures that the countdown to hiding it doesn't start until the object is actually displayed.

The rest of our code is unchanged from our previous tutorials.

Related Video
Hide Info in Microsoft Excel
Link a Website to an Email Address in HTML

©2014 About.com. All rights reserved.