|
EXAMPLE
Click on the tab image to Hide or Show
the slide-in table.
1) Insert this Style command with the script in the <HEAD> section of
the page.
2) Insert the following HTML code anywhere
in the <BODY> section of the page.
3) Insert the onload event handler inside the <BODY> tag as follows:
<body
onload=init(),
followed by other tags such as bgcolor, etc..
4) Change these variables to customize the
style of the slide-in menu and its positioning on the page in this section of the
<STYLE> command:
<style>
// for the tab image
#tabdiv { z-index: 2; left: 220px; position: absolute; top: 210px
}
// for the popout window
#textdiv { z-index: 1; padding-top: 10px; position: absolute; top: 200px;
border-top-width: 1px; padding-right: 5px; padding-left: 5px;
border-left-width: 1px; border-left-color: #000099; left: 0px;
border-bottom-width: 1px; border-bottom-color: #000099;
padding-bottom: 10px; width: 220px; color: black; border-top-color:
#000099;
background-color: #eeeeff; border-right-width: 1px; border-right-color:
#000099
}
</style>
5) Define the left positioning of the tab image
also in this section of the script:
if (n) {
tab.visibility = "hide";
tab.left = 220;
tab.visibility = "show";
poptext.visibility = "show";
tabShow = 1;
}
if (ie) {
tab.visibility = "hidden";
tab.left = 220;
6) Define the the path to the tab image
and the content of the slide-in menu in this section of the HTML code:
<DIV id=tabDiv><a href="javascript:hidepoptext();"><img alt="Click here to close"
src="images/popout_menu.gif" width=14 border=0></a></DIV>
<DIV id=textdiv>
<font face="Verdana" size="2"><a href="http://simplythebest.net/scripts/dhtml_scripts.html">
SimplytheBest DHTML Scripts & Javascripts</a></font><br>
<font face="Verdana" size="1">A collection of the best DHTML scripts and javascripts available on the Web.<br></font>
</DIV>
To add a second popup window to the page, insert a new set of styles for the tab and the
popup window, and the
corresponding new DIV containers. For example:
// in the style section add:
#tabdiv2 { z-index: 2; left: 220px; position: absolute; top: 350px
}
#textdiv2 { z-index: 1; padding-top: 10px; position: absolute; top: 340px;
etc..
In the <BODY> section add:
<DIV id=tabDiv2><a href="javascript:hidepoptext();"><img alt="Click here to close"
src="images/popout_menu.gif" width=14 border=0></a></DIV>
<DIV id=textdiv2>New content</DIV>
|
