travisbrown
Technical User
- Dec 31, 2001
- 1,016
I've got this little sliding dhtml menu thing, and am trying to have one submenu open onload. I can't figure out how. I tried putting one of the triggers in the body tag on load, but can't get it to work. Any help is appreciated. The simplified code is below.
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<title></title>
<style>
<!--
DIV.clTop{position:absolute; width:130}
DIV.clSub{position:absolute; left:10; width:130}
#divCont{position:relative; left:0; top:0; height:600; width:130;}
#divMain{position:absolute}
//-->
</style>
<script language="JavaScript">
<!--
/************************************************************************************
Change this to false if you want all the submenus to get unfold when you
foldout a new one.
************************************************************************************/
var stayFolded=false
/************************************************************************************
Browsercheck
************************************************************************************/
var n = (document.layers) ? 1:0;
var ie = (document.all) ? 1:0;
var browser=((n || ie) && parseInt(navigator.appVersion)>=4)
/************************************************************************************
Making cross-browser objects
************************************************************************************/
function makeMenu(obj,nest){
nest=(!nest) ? '':'document.'+nest+'.'
this.css=
? eval(nest+'document.'+obj):eval('document.all.'+obj+'.style')
this.ref= ? eval(nest+'document.'+obj+'.document'):eval('document');
this.height=n?this.ref.height:eval(obj+'.offsetHeight')
this.x=? this.css.left:this.css.pixelLeft;this.y=? this.css.top:this.css.pixelTop;
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')
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')
for(i=0;i<oSub.length;i++){ oSub.hideIt() }
for(i=1;i<oTop.length;i++){ oTop.moveIt(0,oTop[i-1].y+oTop[i-1].height) }
}
/************************************************************************************
This is the function that changes the sub menus to folded or unfolded state.
************************************************************************************/
function menu(num){
if(browser){
if(!stayFolded){
for(i=0;i<oSub.length;i++){
if(i!=num) oSub.hideIt()
}
for(i=1;i<oTop.length;i++){
oTop.moveIt(0,oTop[i-1].y+oTop[i-1].height)
}
}
oSub[num].vis()?oSub[num].showIt()Sub[num].hideIt()
for(i=1;i<oTop.length;i++){
if(!oSub[i-1].vis()) oTop.moveIt(0,oTop[i-1].y+oTop[i-1].height+oSub[i-1].height)
else oTop.moveIt(0,oTop[i-1].y+oTop[i-1].height)
}
}
}
//Initiating the menus onload, if it's a 4.x+ browser.
if(browser) onload=init;
function MM_showHideLayers() { //v6.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible'v=='hide')?'hidden':v; }
obj.visibility=v; }
}
//-->
</script>
</head>
<BODY>
<div id="divCont">
<div id="divTop1" class="clTop" style=""> <a href="javascript:;" onclick="menu(0); return false">
test1</a><br>
<div id="divSub1" class="clSub" style="">
<p>test1 </p>
</div>
</div>
<div id="divTop2" class="clTop" style=""> <a href="javascript:;" onclick="menu(1); return false">
test2</a> <br>
<div id="divSub2" class="clSub" style=""> test2
</div>
</div>
<div id="divTop3" class="clTop" style=""> <a href="javascript:;" onclick="menu(2); return false">
test3</a> <br>
<div id="divSub3" class="clSub" style="">
<p>test3 </p>
</div>
</div>
<div id="divTop4" class="clTop" style=""> <a href="javascript:;" onclick="menu(3); return false">
test4</a> <br>
<div id="divSub4" class="clSub" style="">
<p>test4</p>
</div>
</div>
</div>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<title></title>
<style>
<!--
DIV.clTop{position:absolute; width:130}
DIV.clSub{position:absolute; left:10; width:130}
#divCont{position:relative; left:0; top:0; height:600; width:130;}
#divMain{position:absolute}
//-->
</style>
<script language="JavaScript">
<!--
/************************************************************************************
Change this to false if you want all the submenus to get unfold when you
foldout a new one.
************************************************************************************/
var stayFolded=false
/************************************************************************************
Browsercheck
************************************************************************************/
var n = (document.layers) ? 1:0;
var ie = (document.all) ? 1:0;
var browser=((n || ie) && parseInt(navigator.appVersion)>=4)
/************************************************************************************
Making cross-browser objects
************************************************************************************/
function makeMenu(obj,nest){
nest=(!nest) ? '':'document.'+nest+'.'
this.css=
? eval(nest+'document.'+obj):eval('document.all.'+obj+'.style') this.ref=
? eval(nest+'document.'+obj+'.document'):eval('document'); this.height=n?this.ref.height:eval(obj+'.offsetHeight')
this.x=
? this.css.left:this.css.pixelLeft;this.y=? this.css.top:this.css.pixelTop; 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')
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')
for(i=0;i<oSub.length;i++){ oSub.hideIt() }
for(i=1;i<oTop.length;i++){ oTop.moveIt(0,oTop[i-1].y+oTop[i-1].height) }
}
/************************************************************************************
This is the function that changes the sub menus to folded or unfolded state.
************************************************************************************/
function menu(num){
if(browser){
if(!stayFolded){
for(i=0;i<oSub.length;i++){
if(i!=num) oSub.hideIt()
}
for(i=1;i<oTop.length;i++){
oTop.moveIt(0,oTop[i-1].y+oTop[i-1].height)
}
}
oSub[num].vis()?oSub[num].showIt()
Sub[num].hideIt()for(i=1;i<oTop.length;i++){
if(!oSub[i-1].vis()) oTop.moveIt(0,oTop[i-1].y+oTop[i-1].height+oSub[i-1].height)
else oTop.moveIt(0,oTop[i-1].y+oTop[i-1].height)
}
}
}
//Initiating the menus onload, if it's a 4.x+ browser.
if(browser) onload=init;
function MM_showHideLayers() { //v6.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible'
v=='hide')?'hidden':v; }obj.visibility=v; }
}
//-->
</script>
</head>
<BODY>
<div id="divCont">
<div id="divTop1" class="clTop" style=""> <a href="javascript:;" onclick="menu(0); return false">
test1</a><br>
<div id="divSub1" class="clSub" style="">
<p>test1 </p>
</div>
</div>
<div id="divTop2" class="clTop" style=""> <a href="javascript:;" onclick="menu(1); return false">
test2</a> <br>
<div id="divSub2" class="clSub" style=""> test2
</div>
</div>
<div id="divTop3" class="clTop" style=""> <a href="javascript:;" onclick="menu(2); return false">
test3</a> <br>
<div id="divSub3" class="clSub" style="">
<p>test3 </p>
</div>
</div>
<div id="divTop4" class="clTop" style=""> <a href="javascript:;" onclick="menu(3); return false">
test4</a> <br>
<div id="divSub4" class="clSub" style="">
<p>test4</p>
</div>
</div>
</div>
</body>
</html>
