Home
Web Programming
JavaScript
Hiding Div Layers After 5 Seconds (Specified Time - X Seconds)
Hiding Div Layers After 5 Seconds (Specified Time - X Seconds)
Level: All levels Software:
Dreamweaver
Many things can be done with layers, one of the most useful thing being the navigational drop down menus. Only problem with many HTML editors including Dreamweaver at the moment is that they do not provide an option to close or hide the layers after a specified time. So most of the time you need to hide it yourself by placing behaviors on other links or images, that way when you mouse over on certain images or links it will automatically hide the layers. However there is one shortcoming with this method, if the user does not mouse over on these particular images or links with behaviors your layer will stay visible.
This tutorial will teach you how to hide layers by themselves after let's say 5 seconds.
Before we proceed with the tutorial please have a look at the final outcome of the tutorial here.
1. Create a new page and call it hide_div.html. Create a link and a layer in the same page, rename your layer to Menu1. Now add a behavior to your link, so that when you mouse over it will show the layer Menu1.
By the way put # for the link url, otherwise you won't be able to add behaviors to the link unless of course it is actually linked to other page or url, but here we do not want to link it to other page we just want to show our Layer when it is mouse overed therefore putting # in the link url would solve this problem of linking to other page. Your link code should look like this:
| <a href="#">Link1</a> |
2. Now put this code in the Head section of your page, anywhere between <head> </head> tags.
| <SCRIPT language="JavaScript"> <!-- function HideMenus() { setTimeout("HideOpenMenus()",5000); } function HideOpenMenus() { Menu1.style.visibility = 'hidden'; } //--> </SCRIPT> |
Now go to the link that you added behavior previously. View it in Code View. You should see a code something similar to this:
| <a href="#" onMouseOver="MM_showHideLayers('Layer1','','show')">Link 1 </a> |
3. In your link code after ,'show')" and before > closing tag add onMouseOut="HideMenus();"
After adding the tag your code should look like below:
| <a href="#" onMouseOver="MM_showHideLayers('Layer2','','show')" onMouseOut="HideMenus();">Link 1 </a> |
Now hit the preview button in your Dreamweaver or HTML Editor and check how your page looks and if your link is functioning properly. After you mouse over on your link the layer should close after 5 seconds.
Let's go through the code and understand what it does.
4. Adding onMouseOut function to your link calls the HideMenu() function in the head section:
| <a href="#" onMouseOver="MM_showHideLayers('Layer2','','show')" onMouseOut="HideMenus();">Link 1 </a> |
Similarly HideMenu() function waits 5 seconds and calls HideOpenMenus() function:
|
<SCRIPT language="JavaScript">
<!-- function HideMenus() { setTimeout("HideOpenMenus()",5000); } function HideOpenMenus() { Menu1.style.visibility = 'hidden'; } //--> </SCRIPT> |
And HideOpenMenus() function closes the Menu1 layer that you have created:
|
<SCRIPT language="JavaScript">
<!-- function HideMenus() { setTimeout("HideOpenMenus()",5000); } function HideOpenMenus() { Menu1.style.visibility = 'hidden'; } //--> </SCRIPT> |
That's basically all.
5. If you want to hide the layer after 10 seconds specify the time as 10000, you can also close multiple layers at once by adding another line to the code like this:
|
Menu1.style.visibility = 'hidden';
Menu2.style.visibility = 'hidden'; Menu3.style.visibility = 'hidden'; Products.style.visibility = 'hidden'; AnyOtherName.style.visibility = 'hidden'; |
I hope it was useful!
More Web Programming: Most Popular Materials | Fresh Materials
| More JavaScript Tutorials at LearnPHP.org