Looking for Clarification on Mouseover Tabs Menu code

[shastamccloud]

This Mouseover Tabs Menu feature works great, but I'm having trouble understanding exactly how some of the JS functions work.

1) I'm curious about what the "contains_ns6" function does. (Something to do if the browser if Netscape 6?)

3) Also curious how the "showit" and "resetit" function work.

On a non-js question, I know the menu works by creating a two line submenu below a main menu. As the user scrolls over the two main menu choices, the appropriate submenu choices are displayed.

1) Why is the submenu made up of three parts for two lines? (dep1, dep2, & describe)? Also, are the layer and ilayer tags considered obsolete?


*****************************************************
Script Title: Tabs Menu (mouseover)

Script URL (on DD): http://www.dynamicdrive.com/dynamici...bmouseover.htm

 
<!--Links used to initiate the sub menus. Pass in the desired submenu index numbers (ie: 0, 1) -->

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

<!-- Edit the dimensions of the below, plus background color-->

<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>

[jscheuer1]

First off, this is one of the older scripts in the DD library. As such, its coding practices are not the best, though better than many scripts (DD or otherwise) of the same era. That said, and in that light, I will try to answer your questions as clearly as possible.

I'm curious about what the "contains_ns6" function does. (Something to do if the browser if Netscape 6?)

Yes, in a way. Actually this is a fairly good attempt at determining whether or not a given element is within another given element where an event on the potentially contained element is involved. In IE there was and continues to be another method, to the exclusion of this approach. Perhaps in IE 8 or a later IE version this approach will also work. This approach has a flaw though, if b doesn't exist it will throw a non-fatal error. The reason I say "in a way" is that it is specific for all browsers that fail the:

if (document.all&&!menuobj.contains(e.toElement))

test in the resetit function. At the time that was basically just NS 6. Now it is virtually all browsers except IE.

Also curious how the "showit" and "resetit" function work.

This is a bit too general of a question. They work the same way as any function. They take the arguments they are passed (if any, in both cases here, there is a single argument for each function) and process it/them according to the code of the function.

If there is a specific line or lines in either that you would want clarification on, let me know.

As a side note, if a function has no arguments, it does whatever its code dictates. Even with an argument(s), it may ignore that argument(s) in some or all cases and then rely solely upon the code contained within the function.

Why is the submenu made up of three parts for two lines? (dep1, dep2, & describe)? Also, are the layer and ilayer tags considered obsolete?

This (dep1, dep2) appears to be an accommodation to Netscape 4 - a browser no longer in use in any serious manner. At the time this script was written though, NS 4 still had many loyal users. Today NS 4 is incapable of rendering all but the most simple web pages. And the layer/ilayer elements are specific to it as well, hence obsolete for all intents and purposes.

In summary, if the script were rewritten to today's practices, much if not all of the NS 4 code could be eliminated. However, other code would probably be added to prevent potential conflicts with other scripts.

[shastamccloud]

John;

Thank you for the clear explanation. Much appreciated!