JavaScript Made Easy: Free JavaScripts Tutorials Example Code

Metachecker.net

|

FontsMadeEasy.com

|

RankChecker.net

Learn Java Script Today

|

Over 5000 Free Fonts

|

|

Javascript Forum

|

Other Javascript Resources

|

JavaScript Basics

Inserting Javascript

Complete Tutorial

Advance DHTML Tutorial



DHTML Script - FoldoutMenu		[View Sample]

This new version of the foldoutmenu replaces both the old ones and you can now choose if you want images or not. You can still choose how it works, stay folded or not. Click here to change it's behaviour. This script still doesn't work in Gecko (Netscape 5) since there's currently no way to get the height of layer that doesn't have it spesified with inline styles. I will fix this as soon as there's a way to get that value.


Insert into <HEAD>
<style type="text/css"> DIV.clTop{position:absolute; width:170} DIV.clSub{position:absolute; left:10; width:170} #divCont{position:relative; visibility:hidden; left:80; top:-70; height:400; width:170;} A.clMain{font-family:Arial, Verdana, Helvetica, Helv; font-size:14px; text-decoration:none; font-weight:bold; color:black} A.clSubb{font-family:Arial, Verdana, Helvetica, Helv; font-size:14px; text-decoration:none; color:black} #divMain{position:absolute} </style> <script type="text/javascript" language="JavaScript"> /****************************************************************************** Copyright (C) 1999 Thomas Brattli This script is made by and copyrighted to Thomas Brattli at www.bratta.com Visit for more great scripts. This may be used freely as long as this msg is intact! I will also appriciate any links you could give me. ****************************************************************************/ //Default browsercheck, added to all scripts! function checkBrowser(){ this.ver=navigator.appVersion this.dom=document.getElementById?1:0 this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom)?1:0; this.ie4=(document.all && !this.dom)?1:0; this.ns5=(this.dom && parseInt(this.ver) >= 5) ?1:0; this.ns4=(document.layers && !this.dom)?1:0; this.bw=(this.ie5 \|\| this.ie4 \|\| this.ns4 \|\| this.ns5) return this } bw=new checkBrowser() /******************************************************************************** This script is a "foldout" menu script, all the "foldouts" will stay outfolded in older browsers. Works in ie4 and ie5 and ns4. The next version will work in Netscape 5 as well... There's only one version of this script now, and you can choose whether you want images or not. To change where the menu appears change the left and top values of the divCont in the stylesheets, it's currently placed relative so you can place this menu in tables or similar if you want. Change the text colors and size in the A.clMain and A.clSubb classes. ********************************************************************************/ /******************************************************************************** Change this to false if you want all the submenus to get unfold when you foldout a new one. ********************************************************************************/ var stayFolded=false //Do you want images (if not set to 0 and remove the images from the body)? foldImg=1 //This is the image that it changes to when it expands. var exImg=new Image(); exImg.src='images/arrow1.gif' //This is the image is changes to with it's "unfolded" or something :} //Remeber to change the actual images in the page aswell, but remember to //keep the name of the image. var unImg=new Image(); unImg.src='images/arrow.gif' /******************************************************************************** Making cross-browser objects ********************************************************************************/ function makeMenu(obj,nest){ nest=(!nest) ? '':'document.'+nest+'.' this.css=bw.dom? document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?eval(nest+"document.layers." +obj):0; this.el=bw.dom?document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+'document.'+obj):0; this.ref=bw.dom \|\| bw.ie4? document:bw.ns4?eval(nest+"document.layers." +obj+".document"):0; this.x=(bw.ns4 \|\| bw.ns5)? this.css.left:this.css.pixelLeft; this.y=(bw.ns4 \|\| bw.ns5)? this.css.top:this.css.pixelTop; this.height=bw.ns4?this.ref.height:this.el.offsetHeight; this.hideIt=b_hideIt; this.showIt=b_showIt; this.vis=b_vis; this.moveIt=b_moveIt return this } function b_showIt(){this.css.visibility="visible"} function b_hideIt(){this.css.visibility="hidden"} function b_vis(){if(this.css.visibility=="hidden" \|\| this.css.visibility=="hide") return true;} function b_moveIt(x,y){this.x=x; this.y=y; this.css.left=this.x; this.css.top=this.y} /******************************************************************************** Initiating the page. Just add to the arrays here to get more menuitems and add divs in the page ********************************************************************************/ function init(){ oTop=new Array() oTop[0]=new makeMenu('divTop1','divCont') oTop[1]=new makeMenu('divTop2','divCont') oTop[2]=new makeMenu('divTop3','divCont') oTop[3]=new makeMenu('divTop4','divCont') oTop[4]=new makeMenu('divTop5','divCont') oTop[5]=new makeMenu('divTop6','divCont') oSub=new Array() oSub[0]=new makeMenu('divSub1','divCont.document.divTop1') oSub[1]=new makeMenu('divSub2','divCont.document.divTop2') oSub[2]=new makeMenu('divSub3','divCont.document.divTop3') oSub[3]=new makeMenu('divSub4','divCont.document.divTop4') oSub[4]=new makeMenu('divSub5','divCont.document.divTop5') oSub[5]=new makeMenu('divSub6','divCont.document.divTop6') for(i=0;i<oSub.length;i++){ oSub[i].hideIt() } for(i=1;i<oTop.length;i++){ oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].height) } oCont=new makeMenu('divCont') oCont.showIt() } /******************************************************************************** This is the function that changes the sub menus to folded or unfolded state. **********************************************************************************/ function menu(num){ if(bw.bw){ if(!stayFolded){ for(i=0;i<oSub.length;i++){ if(i!=num){ oSub[i].hideIt() if(foldImg)oTop[i].ref["imgA"+i].src=unImg.src } } for(i=1;i<oTop.length;i++){ oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].height) } } if(oSub[num].vis()){ oSub[num].showIt() if(foldImg)oTop[num].ref["imgA"+num].src=exImg.src }else{ oSub[num].hideIt() if(foldImg)oTop[num].ref["imgA"+num].src=unImg.src } for(i=1;i<oTop.length;i++){ if(!oSub[i-1].vis()) oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].height+oSub[i-1].height) else oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].height) } } } //Initiating the menus onload, if it's a 4.x+ browser. if(bw.bw) onload=init; </script>

Insert into <BODY>
<div id="divCont"> <div id="divTop1" class="clTop"><a href="#" onclick="menu(0); return false" class="clMain"><img src="images/arrow.gif" name="imgA0" width=12 height=12 alt="" border="0"> [choice 0]</a><br> <div id="divSub1" class="clSub"> <a href="#" class="clSubb">-Sub 1</a><br> <a href="#" class="clSubb">-Sub 2</a><br> <a href="#" class="clSubb">-Sub 3</a><br> <a href="#" class="clSubb">-Sub 4</a><br> </div><br> </div> <div id="divTop2" class="clTop"><a href="#" onclick="menu(1); return false" class="clMain"><img src="images/arrow.gif" name="imgA1" width=12 height=12 alt="" border="0"> [choice 1]</a><br> <div id="divSub2" class="clSub"> <a href="#" class="clSubb">-Sub 1</a><br> <a href="#" class="clSubb">-Sub 2</a><br> </div><br> </div> <div id="divTop3" class="clTop"><a href="#" onclick="menu(2); return false" class="clMain"><img src="images/arrow.gif" name="imgA2" width=12 height=12 alt="" border="0"> [choice 2]</a><br> <div id="divSub3" class="clSub"> <a href="#" class="clSubb">-Sub 1</a><br> <a href="#" class="clSubb">-Sub 2</a><br> <a href="#" class="clSubb">-Sub 3</a><br> </div><br> </div> <div id="divTop4" class="clTop"><a href="" onclick="menu(3); return false" class="clMain"><img src="images/arrow.gif" name="imgA3" width=12 height=12 alt="" border="0"> [choice 3]</a><br> <div id="divSub4" class="clSub"> <a href="#" class="clSubb">-Sub 1</a><br> <a href="#" class="clSubb">-Sub 2</a><br> </div><br> </div> <div id="divTop5" class="clTop"><a href="" onclick="menu(4); return false" class="clMain"><img src="images/arrow.gif" name="imgA4" width=12 height=12 alt="" border="0"> [choice 4]</a><br> <div id="divSub5" class="clSub"> <a href="#" class="clSubb">-Sub 1</a><br> <a href="#" class="clSubb">-Sub 2</a><br> <a href="#" class="clSubb">-Sub 3</a><br> <a href="#" class="clSubb">-Sub 4</a><br> <a href="#" class="clSubb">-Sub 5</a><br> </div><br> </div> <div id="divTop6" class="clTop"><a href="" onclick="menu(5); return false" class="clMain"><img src="images/arrow.gif" name="imgA5" width=12 height=12 alt="" border="0"> [choice 5]</a><br> <div id="divSub6" class="clSub"> <a href="#" class="clSubb">-Sub 1</a><br> </div><br> </div> </div>

Other Options