Help with DHTML menu code [Archive]

lorddonk

06-13-2006, 08:43 PM

Script: Tabs Menu (mouseover)
http://www.dynamicdrive.com/dynamicindex1/tabmouseover.htm

I got this code off of Dynamic Drive:

The origional ( http://www.dynamicdrive.com/dynamicindex1/tabmouseover.htm ) worked fine on my forum. You hover over the top text and the links appear in the bottom. Then I edited it and I'm SURE everything is still correct but it won't work now! ( http://lorddonk.18.forumer.com ) it is just empty.Could someone please help? What is wrong?
Please help!
~Lorddonk

ORIGINAL

<a href="http://www.javascriptkit.com" onMouseover="showit(0)">JavaScript Kit</a> | <a href="http://freewarejava.com" onMouseover="showit(1)">Freewarejava</a><br>


<ilayer width=400 height=32 name="dep1" bgColor="#E6E6FF">
<layer name="dep2" width=400 height=32>
</layer>
</ilayer>
<div id="describe" style="background-color:#E6E6FF;width:400px;height:32px" onMouseover="clear_delayhide()" onMouseout="resetit(event)"></div>

<script language="JavaScript1.2">

/*
Tabs Menu (mouseover)- By Dynamic Drive
For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
This credit MUST stay intact for use
*/

var submenu=new Array()

//Set submenu contents. Expand as needed. For each content, make sure everything exists on ONE LINE. Otherwise, there will be JS errors.

submenu[0]='<font size="2" face="Verdana"><b><a href="http://www.javascriptkit.com/cutpastejava.shtml">Scripts</a> | <a href="http://www.javascriptkit.com/javaindex.shtml">JS tutorials</a> | <a href="http://www.javascriptkit.com/javatutors/index.shtml">Advanced JS tutorials</a> | <a href="http://www.javascriptkit.com/java/">Applets</a> | <a href="http://www.javascriptkit.com/howto/">Web Tutorials</a></b></font>'

submenu[1]='<font size="2" face="Verdana"><b><a href="http://freewarejava.com/applets/index.shtml">Applets</a> | <a href="http://freewarejava.com/tutorials/index.shtml">Tutorials</a> | <a href="http://freewarejava.com/javasites/index.shtml">Sites and Zines</a> | <a href="http://freewarejava.com/jsp/index.shtml">JSP</a></b></font>'

//Set delay before submenu disappears after mouse moves out of it (in milliseconds)
var delay_hide=500

/////No need to edit beyond here

var menuobj=document.getElementById? document.getElementById("describe") : document.all? document.all.describe : document.layers? document.dep1.document.dep2 : ""

function showit(which){
clear_delayhide()
thecontent=(which==-1)? "" : submenu[which]
if (document.getElementById||document.all)
menuobj.innerHTML=thecontent
else if (document.layers){
menuobj.document.write(thecontent)
menuobj.document.close()
}
}

function resetit(e){
if (document.all&&!menuobj.contains(e.toElement))
delayhide=setTimeout("showit(-1)",delay_hide)
else if (document.getElementById&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
delayhide=setTimeout("showit(-1)",delay_hide)
}

function clear_delayhide(){
if (window.delayhide)
clearTimeout(delayhide)
}

function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}

</script>

EDITED:


<a href="http://lorddonk.18.forumer.com/" onMouseover="showit(0)">Lorddonk Forums</a> | <a href="http://lorddonk.18.forumer.com/index.php?act=UserCP&CODE=00" onMouseover="showit(1)">User Control Panel</a> | <a href="#" onMouseover="showit(2)">Thread Options</a> | <a href="#" onMouseover="showit(3)">Private Messages</a> | <a href="#" onMouseover="showit(4)">Board Statistics</a><br>


<ilayer width=400 height=32 name="dep1" bgColor="#E6E6FF">
<layer name="dep2" width=400 height=32>
</layer>
</ilayer>
<div id="describe" style="background-color:#E6E6FF;width:400px;height:32px" onMouseover="clear_delayhide()" onMouseout="resetit(event)"></div>

<script language="JavaScript1.2">

/*
Tabs Menu (mouseover)- By Dynamic Drive
For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
This credit MUST stay intact for use
*/

var submenu=new Array()

//Set submenu contents. Expand as needed. For each content, make sure everything exists on ONE LINE. Otherwise, there will be JS errors.

submenu[0]='<font size="2" face="Verdana"><b><a href="http://lorddonk.18.forumer.com/index.php?act=ST&f=2&t=55">How to use this menu?</a> | <a href="http://lorddonk.18.forumer.com/index.php?act=UserCP&CODE=04">Board Options</a> | <a href="http://lorddonk.18.forumer.com/index.php?act=UserCP&CODE=06">Skin Settings</a> | <a href="http://lorddonk.18.forumer.com/index.php?act=Login&CODE=00">Login</a>/<a href="http://lorddonk.18.forumer.com/index.php?act=Reg&CODE=00">Register</a> | <a href="http://lorddonk.18.forumer.com/index.php?act=Help">Help</a> | <a href="http://lorddonk.18.forumer.com/index.php?act=Search&f=">Search</a></b></font>'

submenu[1]='<font size="2" face="Verdana"><b><a href="http://lorddonk.18.forumer.com/index.php?act=UserCP&CODE=01">Edit Profile Information</a> | <a href="http://lorddonk.18.forumer.com/index.php?act=UserCP&CODE=24">Edit Avatar</a> | <a href="http://lorddonk.18.forumer.com/index.php?act=UserCP&CODE=22">Edit Signature</a> | <a href="#">View Profile</a></b></font>'

submenu[2]='<font size="2" face="Verdana"><b><a href="http://lorddonk.18.forumer.com/index.php?act=Search&CODE=getnew">All New Posts</a> | <a href="http://lorddonk.18.forumer.com/index.php?act=UserCP&CODE=26l">My Subscriptions</a></b></font>'

submenu[3]='<font size="2" face="Verdana"><b><a href="http://lorddonk.18.forumer.com/index.php?act=Msg&CODE=01">Open Inbox</a> | <a href="http://lorddonk.18.forumer.com/index.php?act=Msg&CODE=02">Buddy List</a> | <a href="http://lorddonk.18.forumer.com/index.php?act=Msg&CODE=04">Compose New Private Message</a></b></font>'

submenu[4]='<font size="2" face="Verdana"><b><a href="http://lorddonk.18.forumer.com/index.php?act=Online&CODE=listall">Who's Online?</a> | <a href="http://lorddonk.18.forumer.com/index.php?act=Members">Member List</a> | <a href="http://lorddonk.18.forumer.com/index.php?act=calendar">Calander</a> | <a href="http://lorddonk.18.forumer.com/index.php?act=boardrules">Board Guidelines</a></b></font>'

//Set delay before submenu disappears after mouse moves out of it (in milliseconds)
var delay_hide=500

/////No need to edit beyond here

var menuobj=document.getElementById? document.getElementById("describe") : document.all? document.all.describe : document.layers? document.dep1.document.dep2 : ""

function showit(which){
clear_delayhide()
thecontent=(which==-1)? "" : submenu[which]
if (document.getElementById||document.all)
menuobj.innerHTML=thecontent
else if (document.layers){
menuobj.document.write(thecontent)
menuobj.document.close()
}
}

function resetit(e){
if (document.all&&!menuobj.contains(e.toElement))
delayhide=setTimeout("showit(-1)",delay_hide)
else if (document.getElementById&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
delayhide=setTimeout("showit(-1)",delay_hide)
}

function clear_delayhide(){
if (window.delayhide)
clearTimeout(delayhide)
}

function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}

</script>

Please help!

Jack

06-13-2006, 09:39 PM

Are you looking for someone to set it up for you or are you having problems with it? You would have to be a little more specific in your posting.

:cool:

lorddonk

06-13-2006, 09:42 PM

I just needed to know if someone could figure out why it wasn't working ans possibly fix it?? It is supposed to be where you hover over the top links and then the other links appear on the bottom in the box, however it doesn't work, and instead the box links don't appear at all. Sorry for any confusion.

Jack

06-13-2006, 10:02 PM

Try working with it like this... Should be easier for you to understand it.


<a href="http://www.yahoo.com" onMouseover="showit(0)">Yahoo</a> | <a href="http://www.google.com" onMouseover="showit(1)">Google</a><br>


<ilayer width=400 height=32 name="dep1" bgColor="#E6E6FF">
<layer name="dep2" width=400 height=32>
</layer>
</ilayer>
<div id="describe" style="background-color:#E6E6FF;width:400px;height:32px" onMouseover="clear_delayhide()" onMouseout="resetit(event)"></div>

<script language="JavaScript1.2">

/*
Tabs Menu (mouseover)- By Dynamic Drive
For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
This credit MUST stay intact for use
*/

var submenu=new Array()

//Set submenu contents. Expand as needed. For each content, make sure everything exists on ONE LINE. Otherwise, there will be JS errors.

submenu[0]='<font size="2" face="Verdana"><b><a href="http://www.yahoo.com">Yahoo</a> | <a href="http://www.yahoo.com">Yahoo</a> | <a href="http://www.yahoo.com">Yahoo</a> | <a href="http://www.yahoo.coom">Yahoo</a> | <a href="http://www.yahoo.com">Yahoo</a></b></font>'

submenu[1]='<font size="2" face="Verdana"><b><a href="http://www.google.com">Google</a> | <a href="http://www.google.com">Google</a> | <a href="http://www.google.com">Google</a> | <a href="http://www.google.com">Google</a></b></font>'

//Set delay before submenu disappears after mouse moves out of it (in milliseconds)
var delay_hide=500

/////No need to edit beyond here

var menuobj=document.getElementById? document.getElementById("describe") : document.all? document.all.describe : document.layers? document.dep1.document.dep2 : ""

function showit(which){
clear_delayhide()
thecontent=(which==-1)? "" : submenu[which]
if (document.getElementById||document.all)
menuobj.innerHTML=thecontent
else if (document.layers){
menuobj.document.write(thecontent)
menuobj.document.close()
}
}

function resetit(e){
if (document.all&&!menuobj.contains(e.toElement))
delayhide=setTimeout("showit(-1)",delay_hide)
else if (document.getElementById&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
delayhide=setTimeout("showit(-1)",delay_hide)
}

function clear_delayhide(){
if (window.delayhide)
clearTimeout(delayhide)
}

function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}

</script>

Remember, just place the script in the body of your page.
Hope that helps... ;)

lorddonk

06-13-2006, 10:36 PM

sorry... it still won't work... :( go to: http://lorddonk.18.forumer.com/index.php? as you can see the only thing that won't work is the links won't show up under it... please help

Jack

06-14-2006, 03:24 AM

Oh boy... I keep getting run time errors... Thought I wasn't ever going to get out of there!

I don't know, maybe this script doesn't work on forums. I tried it in a simple HTML page and it worked fine.

Sorry... Can't help yea there! :cool:

lorddonk

06-14-2006, 03:37 AM

darn. Okay, thanks for trying! :o