We help IT Professionals succeed at work.

expanding menu - need help with pointer when mouse is over expansion

St_Aug_Beach_Bum
on
Medium Priority
412 Views
Last Modified: 2012-05-06
I have an expanding menu that displays additional links when the main link is mouseovered.

When hovering over the td that the main link is in, a background image is displayed with an arrow pointing at the additional links.

It would be helpful to the user if the arrow remained displayed when the mouse is in the div with the additional links, so it would be a reference reminding the user what category they are looking at.

How can this be adjusted to keep the arrow (background image) active when the secondary menu div is being mouseovered?

Thanks for any assistance,   Chris
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title></title> 
 
 <style type="text/css">
   .gen_table_snav_hd { color: white; font-weight: bold; font-size: 8pt; font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular; background-image: url(../img/sidenav_header.jpg); text-align: left; vertical-align: middle; padding-left: 4px; border-bottom: 1px solid #255194 }
 .gen_table_nav_1   { background-color: #f9fafc; text-align: left; vertical-align: middle; padding-left: 4px; border-right: 1px solid #84b4e5; border-bottom: 1px inset #84b4e5; border-left: 1px solid #84b4e5 }
 .gen_table_snav_hd1 { color: white; font-weight: bold; font-size: 8pt; font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular; background-image: url(../img/sidenav_sub_header.jpg); text-align: left; vertical-align: middle; padding-left: 4px; border-bottom: 1px solid #255194 }
 .gen_table_nav_2 { background-color: #f9fafc; text-align: left; vertical-align: middle; padding-left: 12px; border-right: 1px solid #84b4e5; border-bottom: 1px inset #84b4e5; border-left: 1px solid #84b4e5 }
 .navside a:link                 { color: #696969; font-style: normal; font-weight: normal; font-size: 9pt; font-family: Arial; text-decoration: none }
.navside a:visited                 { color: #696969; font-style: normal; font-weight: normal; font-size: 9pt; font-family: Arial; text-decoration: none }
.navside a:hover                  { color: black; font-style: normal; font-weight: normal; font-size: 9pt; font-family: Arial; text-decoration: underline }
.navside a:active                 { color: #696969; font-style: normal; font-weight: normal; font-size: 9pt; font-family: Arial; text-decoration: none }
 
.navside a:link, .navside a:visited { display: block; }
.navside a:hover {background-image: url(../img/menu_arrow.gif); }
 
.navside1  { color: #4051af; font-weight: normal; font-size: 8pt; font-family: Arial }
.navside1 a:link                { color: #4051af; font-style: normal; font-weight: normal; font-size: 8pt; font-family: Arial; text-decoration: none }
.navside1 a:visited                { color: #4051af; font-style: normal; font-weight: normal; font-size: 8pt; font-family: Arial; text-decoration: none }
.navside1 a:hover                 { color: black; font-style: normal; font-weight: normal; font-size: 8pt; font-family: Arial; text-decoration: underline }
.navside1 a:active                { color: #4051af; font-style: normal; font-weight: normal; font-size: 8pt; font-family: Arial; text-decoration: none }
 </style>
  
<script>
//Drop Down/ Overlapping Content: http://www.dynamicdrive.com
//**Updated: Dec 19th, 07': Added ability to dynamically populate a Drop Down content using an external file (Ajax feature)
//**Updated: Feb 29th, 08':
				//1) Added ability to reveal drop down content via "click" of anchor link (instead of default "mouseover")
				//2) Added ability to disable drop down content from auto hiding when mouse rolls out of it
				//3) Added hidediv(id) public function to directly hide drop down div dynamically
 
//**Updated: Sept 11th, 08': Fixed bug whereby drop down content isn't revealed onClick of anchor in Safari/ Google Chrome
 
var dropdowncontent={
	disableanchorlink: true, //when user clicks on anchor link, should link itself be disabled (always true if "revealbehavior" above set to "click")
 hidedivmouseout: [true, 200], //Set hiding behavior within Drop Down DIV itself: [hide_div_onmouseover?, miliseconds_before_hiding]
	ajaxloadingmsg: "Loading content. Please wait...", //HTML to show while ajax page is being feched, if applicable
	ajaxbustcache: true, //Bust cache when fetching Ajax pages?
 
	getposOffset:function(what, offsettype){
		return (what.offsetParent)? what[offsettype]+this.getposOffset(what.offsetParent, offsettype) : what[offsettype]
	},
 
	isContained:function(m, e){
		var e=window.event || e
		var c=e.relatedTarget || ((e.type=="mouseover")? e.fromElement : e.toElement)
		while (c && c!=m)try {c=c.parentNode} catch(e){c=m}
		if (c==m)
			return true
		else
			return false
	},
 
	show:function(anchorobj, subobj, e){
		if (!this.isContained(anchorobj, e) || (e && e.type=="click")){
			var e=window.event || e
			if (e.type=="click" && subobj.style.visibility=="visible"){
				subobj.style.visibility="hidden"
				return
			}
			var horizontaloffset=(subobj.dropposition[0]=="left")? -(subobj.offsetWidth-anchorobj.offsetWidth) : 0 //calculate user added horizontal offset
 
 
			/// Start modifications by hankknight
			var verticaloffset=(subobj.dropposition[1]=="top")? -subobj.offsetHeight : anchorobj.offsetHeight //calculate user added vertical offset
			subobj.style.left=this.getposOffset(anchorobj, "offsetLeft") + horizontaloffset + 155 + "px"
			subobj.style.borderTop="0px solid #84B4E5"
			subobj.style.borderBottom="0px solid #84B4E5"
			/// End modifications by hankknight
 
			subobj.style.top=this.getposOffset(anchorobj, "offsetTop")+(verticaloffset - 57)+"px"
			subobj.style.clip=(subobj.dropposition[1]=="top")? "rect(auto auto auto 0)" : "rect(0 auto 0 0)" //hide drop down box initially via clipping
			subobj.style.visibility="visible"
			subobj.startTime=new Date().getTime()
			subobj.contentheight=parseInt(subobj.offsetHeight)
			if (typeof window["hidetimer_"+subobj.id]!="undefined") //clear timer that hides drop down box?
				clearTimeout(window["hidetimer_"+subobj.id])
			this.slideengine(subobj, (subobj.dropposition[1]=="top")? "up" : "down")
		}
	},
 
	curveincrement:function(percent){
		return (1-Math.cos(percent*Math.PI)) / 2 //return cos curve based value from a percentage input
	},
 
	slideengine:function(obj, direction){
		var elapsed=new Date().getTime()-obj.startTime //get time animation has run
		if (elapsed<obj.glidetime){ //if time run is less than specified length
			var distancepercent=(direction=="down")? this.curveincrement(elapsed/obj.glidetime) : 1-this.curveincrement(elapsed/obj.glidetime)
			var currentclip=(distancepercent*obj.contentheight)+"px"
			obj.style.clip=(direction=="down")? "rect(0 auto "+currentclip+" 0)" : "rect("+currentclip+" auto auto 0)"
			window["glidetimer_"+obj.id]=setTimeout(function(){dropdowncontent.slideengine(obj, direction)}, 10)
		}
		else{ //if animation finished
			obj.style.clip="rect(0 auto auto 0)"
		}
	},
 
	hide:function(activeobj, subobj, e){
		if (!dropdowncontent.isContained(activeobj, e)){
			window["hidetimer_"+subobj.id]=setTimeout(function(){
				subobj.style.visibility="hidden"
				subobj.style.left=subobj.style.top=0
				clearTimeout(window["glidetimer_"+subobj.id])
			}, dropdowncontent.hidedivmouseout[1])
		}
	},
 
	hidediv:function(subobjid){
		document.getElementById(subobjid).style.visibility="hidden"
	},
 
	ajaxconnect:function(pageurl, divId){
		var page_request = false
		var bustcacheparameter=""
		if (window.XMLHttpRequest) // if Mozilla, IE7, Safari etc
			page_request = new XMLHttpRequest()
		else if (window.ActiveXObject){ // if IE6 or below
			try {
			page_request = new ActiveXObject("Msxml2.XMLHTTP")
			} 
			catch (e){
				try{
				page_request = new ActiveXObject("Microsoft.XMLHTTP")
				}
				catch (e){}
			}
		}
		else
			return false
		document.getElementById(divId).innerHTML=this.ajaxloadingmsg //Display "fetching page message"
		page_request.onreadystatechange=function(){dropdowncontent.loadpage(page_request, divId)}
		if (this.ajaxbustcache) //if bust caching of external page
			bustcacheparameter=(pageurl.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
		page_request.open('GET', pageurl+bustcacheparameter, true)
		page_request.send(null)
	},
 
	loadpage:function(page_request, divId){
		if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)){
			document.getElementById(divId).innerHTML=page_request.responseText
		}
	},
 
 init:function(anchorid, pos, glidetime, revealbehavior){
		var anchorobj=document.getElementById(anchorid)
		var subobj=document.getElementById(anchorobj.getAttribute("rel"))
		var subobjsource=anchorobj.getAttribute("rev")
		if (subobjsource!=null && subobjsource!="")
			this.ajaxconnect(subobjsource, anchorobj.getAttribute("rel"))
		subobj.dropposition=pos.split("-")
		subobj.glidetime=glidetime || 1000
		subobj.style.left=subobj.style.top=0
		if (typeof revealbehavior=="undefined" || revealbehavior=="mouseover"){
			anchorobj.onmouseover=function(e){dropdowncontent.show(this, subobj, e)}
			anchorobj.onmouseout=function(e){dropdowncontent.hide(subobj, subobj, e)}
			if (this.disableanchorlink) anchorobj.onclick=function(){return false}
		}
		else
			anchorobj.onclick=function(e){dropdowncontent.show(this, subobj, e); return false}
		if (this.hidedivmouseout[0]==true) //hide drop down DIV when mouse rolls out of it?
			subobj.onmouseout=function(e){dropdowncontent.hide(this, subobj, e)}
	}
}
</script>
 
 
 
 
 
 
 
 
	</head>
		<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0">
		<div align="center">
 
 <BR><BR><BR><BR>
 
 
<TABLE BORDER="0" ALIGN="LEFT" CELLPADDING="0" CELLSPACING="0" WIDTH="170" >
<TR HEIGHT="20">
<TD CLASS="gen_table_snav_hd" HEIGHT="20">Categories</TD>
</TR>
<TR HEIGHT="18">
<TD CLASS="gen_table_nav_1" VALIGN="middle" HEIGHT="18"><SPAN CLASS="navside">
<A HREF="http://www.community-knowledge.com/cat-4-0" ID="searchlink" REL="subcontent">Arts &amp; Entertainment</A> </SPAN>
<DIV ID="subcontent" STYLE="position:absolute; visibility: hidden; border: none; background-color: white; width: 140px; padding: 0px;">
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="140">
<TR HEIGHT="20">
<TD CLASS="gen_table_snav_hd1" HEIGHT="20">Sub-Categories</TD>
</TR>
<TR HEIGHT="18">
<TD CLASS="gen_table_nav_2" VALIGN="middle" HEIGHT="18"><SPAN CLASS="navside1">
<A HREF="http://www.community-knowledge.com/cat-4-8">Books &amp; Literature</A>
</SPAN></TD>
</TR>
<TR HEIGHT="18">
<TD CLASS="gen_table_nav_2" VALIGN="middle" HEIGHT="18"><SPAN CLASS="navside1">
<A HREF="http://www.community-knowledge.com/cat-4-6">General</A> </SPAN></TD>
</TR>
<TR HEIGHT="18">
<TD CLASS="gen_table_nav_2" VALIGN="middle" HEIGHT="18"><SPAN CLASS="navside1">
<A HREF="http://www.community-knowledge.com/cat-4-14">Movies &amp; TV</A>
</SPAN></TD>
</TR>
<TR HEIGHT="18">
<TD CLASS="gen_table_nav_2" VALIGN="middle" HEIGHT="18"><SPAN CLASS="navside1">
<A HREF="http://www.community-knowledge.com/cat-4-15">Music</A> </SPAN></TD>
</TR>
<TR HEIGHT="18">
<TD CLASS="gen_table_nav_2" VALIGN="middle" HEIGHT="18"><SPAN CLASS="navside1">
<A HREF="http://www.community-knowledge.com/cat-4-80">Performing Arts</A>
</SPAN></TD>
</TR>
</TABLE>
</DIV>
<SCRIPT TYPE="text/javascript">
//Call dropdowncontent.init("anchorID", "positionString", glideduration, "revealBehavior") at the end of the page:
 
dropdowncontent.init("searchlink", "right-bottom", 200, "mouseover")
 
 
</SCRIPT>
 
</TD>
</TR>
<TR HEIGHT="18">
<TD CLASS="gen_table_nav_1" VALIGN="middle" HEIGHT="18"><SPAN CLASS="navside">
<A HREF="http://www.community-knowledge.com/cat-1-0" ID="searchlink1" REL="subcontent1">Computers</A> </SPAN>
<DIV ID="subcontent1" STYLE="position:absolute; visibility: hidden; border: none; background-color: white; width: 140px; padding: 0px;">
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="140" HEIGHT="100%">
<TR HEIGHT="20">
<TD CLASS="gen_table_snav_hd1" HEIGHT="20">Sub-Categories</TD>
</TR>
<TR HEIGHT="18">
<TD CLASS="gen_table_nav_2" VALIGN="middle" HEIGHT="18"><SPAN CLASS="navside1">
<A HREF="http://www.community-knowledge.com/cat-1-19">eCommerce &amp; SEO</A>
</SPAN></TD>
</TR>
<TR HEIGHT="18">
<TD CLASS="gen_table_nav_2" VALIGN="middle" HEIGHT="18"><SPAN CLASS="navside1">
<A HREF="http://www.community-knowledge.com/cat-1-21">General</A> </SPAN></TD>
</TR>
<TR HEIGHT="18">
<TD CLASS="gen_table_nav_2" VALIGN="middle" HEIGHT="18"><SPAN CLASS="navside1">
<A HREF="http://www.community-knowledge.com/cat-1-1">Hardware</A> </SPAN></TD>
</TR>
<TR HEIGHT="18">
<TD CLASS="gen_table_nav_2" VALIGN="middle" HEIGHT="18"><SPAN CLASS="navside1">
<A HREF="http://www.community-knowledge.com/cat-1-73">Internet</A> </SPAN></TD>
</TR>
<TR HEIGHT="18">
<TD CLASS="gen_table_nav_2" VALIGN="middle" HEIGHT="18"><SPAN CLASS="navside1">
<A HREF="http://www.community-knowledge.com/cat-1-2">Programming</A>
</SPAN></TD>
</TR>
<TR HEIGHT="18">
<TD CLASS="gen_table_nav_2" VALIGN="middle" HEIGHT="18"><SPAN CLASS="navside1">
<A HREF="http://www.community-knowledge.com/cat-1-20">Software</A> </SPAN></TD>
</TR>
<TR HEIGHT="18">
<TD CLASS="gen_table_nav_2" VALIGN="middle" HEIGHT="18"><SPAN CLASS="navside1">
<A HREF="http://www.community-knowledge.com/cat-1-64">Web Design</A>
</SPAN></TD>
</TR>
</TABLE>
</DIV>
<SCRIPT TYPE="text/javascript">
//Call dropdowncontent.init("anchorID", "positionString", glideduration, "revealBehavior") at the end of the page:
 
dropdowncontent.init("searchlink1", "right-bottom", 200, "mouseover")
 
 
</SCRIPT>
 
</TD>
</TR>
<TR HEIGHT="18">
<TD CLASS="gen_table_nav_1" VALIGN="middle" HEIGHT="18"><SPAN CLASS="navside">
<A HREF="http://www.community-knowledge.com/cat-1-0" ID="searchlink2" REL="subcontent2">Education &amp; Reference</A> </SPAN>
<DIV ID="subcontent2" STYLE="position:absolute; visibility: hidden; border: none; background-color: white; width: 140px; padding: 0px;">
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="140" HEIGHT="100%">
<TR HEIGHT="20">
<TD CLASS="gen_table_snav_hd1" HEIGHT="20">Sub-Categories</TD>
</TR>
<TR HEIGHT="18">
<TD CLASS="gen_table_nav_2" VALIGN="middle" HEIGHT="18"><SPAN CLASS="navside1">
<A HREF="http://www.community-knowledge.com/cat-7-38">College &amp; Career</A>
</SPAN></TD>
</TR>
<TR HEIGHT="18">
<TD CLASS="gen_table_nav_2" VALIGN="middle" HEIGHT="18"><SPAN CLASS="navside1">
<A HREF="http://www.community-knowledge.com/cat-7-43">Finacial Aid</A>
</SPAN></TD>
</TR>
<TR HEIGHT="18">
<TD CLASS="gen_table_nav_2" VALIGN="middle" HEIGHT="18"><SPAN CLASS="navside1">
<A HREF="http://www.community-knowledge.com/cat-7-36">General</A> </SPAN></TD>
</TR>
<TR HEIGHT="18">
<TD CLASS="gen_table_nav_2" VALIGN="middle" HEIGHT="18"><SPAN CLASS="navside1">
<A HREF="http://www.community-knowledge.com/cat-7-60">History</A> </SPAN></TD>
</TR>
<TR HEIGHT="18">
<TD CLASS="gen_table_nav_2" VALIGN="middle" HEIGHT="18"><SPAN CLASS="navside1">
<A HREF="http://www.community-knowledge.com/cat-7-39">Home Schooling</A>
</SPAN></TD>
</TR>
<TR HEIGHT="18">
<TD CLASS="gen_table_nav_2" VALIGN="middle" HEIGHT="18"><SPAN CLASS="navside1">
<A HREF="http://www.community-knowledge.com/cat-7-40">Language</A></SPAN></TD>
</TR>
<TR HEIGHT="18">
<TD CLASS="gen_table_nav_2" VALIGN="middle" HEIGHT="18"><SPAN CLASS="navside1">
<A HREF="http://www.community-knowledge.com/cat-7-42">Primary Education</A>
</SPAN></TD>
</TR>
<TR HEIGHT="18">
<TD CLASS="gen_table_nav_2" VALIGN="middle" HEIGHT="18"><SPAN CLASS="navside1">
<A HREF="http://www.community-knowledge.com/cat-7-59">Science &amp; Math</A>
</SPAN></TD>
</TR>
<TR HEIGHT="18">
<TD CLASS="gen_table_nav_2" VALIGN="middle" HEIGHT="18"><SPAN CLASS="navside1">
<A HREF="http://www.community-knowledge.com/cat-7-62">Special Ed</A>
</SPAN></TD>
</TR>
<TR HEIGHT="18">
<TD CLASS="gen_table_nav_2" VALIGN="middle" HEIGHT="18"><SPAN CLASS="navside1">
<A HREF="http://www.community-knowledge.com/cat-7-61">Teaching</A> </SPAN></TD>
</TR>
</TABLE>
</DIV>
<SCRIPT TYPE="text/javascript">
//Call dropdowncontent.init("anchorID", "positionString", glideduration, "revealBehavior") at the end of the page:
 
dropdowncontent.init("searchlink2", "right-bottom", 200, "mouseover")
 
 
</SCRIPT>
 
</TD>
</TR>
 
</TABLE>		</div>
	</body>
 
</html>

Open in new window

Comment
Watch Question

Commented:
It should be as easy as setting the cursor css-style in your div/td.

.cssClass {
cursor: default;
}

To keep the original arrow. (System default)

See this page for further information:
http://www.w3schools.com/CSS/pr_class_cursor.asp

Author

Commented:
Hi Garfix, thank you for your suggestion, but that deals with the appearence of the curser, and does not apply to the problem of the background image not showing when the mouse is moved into the sub-menu.

You can take a look at the script in action at http://www.community-knowledge.com/test6.html and see how an arrow (not the curser arrow) appears when the category is mouseovered, but dissappears when the sub-categories are moved into.  I am seeking a solution that will keep that category arrow 'on' when the mouse is moved into the sub-categories.
Commented:
Ah! I missread it all! Teaches me trying to help before the first cup of coffee of the day! ;-)

I did the following modifications to your source. I marked my added lines with a >

In the top of the class I added:
-----
    ajaxbustcache: true, //Bust cache when fetching Ajax pages?
>    visibleSub: null,
-----

Then in the function show:
    show:function(anchorobj, subobj, e){

I added:
----
/// Start modifications by hankknight
>anchorobj.style.background = 'url(menu_arrow.gif)';
>this.visibleSub = anchorobj;
-----

And finally in the hide function I added:
-----
  if (!dropdowncontent.isContained(activeobj, e)){
>     this.visibleSub.style.background = '';
      window["hidetimer_"+subobj.id]=setTimeout(function(){
-----

What this does is that it sets the background css-style to the arrow of the parent of the subsection being showed. Then stores the object and calls for it in the hide function where it sets the background to empty again.

It seems to do the trick!

I'll attach the entire <script> section for the class below. I marked my additions with // garlix last in the line so that you can find them easier!

Good luck :-)

<script> //Drop Down/ Overlapping Content: http://www.dynamicdrive.com //**Updated: Dec 19th, 07': Added ability to dynamically populate a Drop
//Down content using an external file (Ajax feature) //**Updated: Feb 29th, 08':
                //1) Added ability to reveal drop down content via "click" of anchor link (instead of default "mouseover")
                //2) Added ability to disable drop down content from auto hiding when mouse rolls out of it
                //3) Added hidediv(id) public function to directly hide drop down div dynamically
 
//**Updated: Sept 11th, 08': Fixed bug whereby drop down content isn't revealed onClick of anchor in Safari/ Google Chrome
 
var dropdowncontent={
    disableanchorlink: true, //when user clicks on anchor link, should link itself be disabled (always true if "revealbehavior" above set to "click")
 hidedivmouseout: [true, 200], //Set hiding behavior within Drop Down DIV itself: [hide_div_onmouseover?, miliseconds_before_hiding]
    ajaxloadingmsg: "Loading content. Please wait...", //HTML to show while ajax page is being feched, if applicable
    ajaxbustcache: true, //Bust cache when fetching Ajax pages?
    visibleSub: null,
 
    getposOffset:function(what, offsettype){
        return (what.offsetParent)? what[offsettype]+this.getposOffset(what.offsetParent, offsettype) : what[offsettype]
    },
 
    isContained:function(m, e){
        var e=window.event || e
        var c=e.relatedTarget || ((e.type=="mouseover")? e.fromElement : e.toElement)
        while (c && c!=m)try {c=c.parentNode} catch(e){c=m}
        if (c==m)
            return true
        else
            return false
    },
 
    show:function(anchorobj, subobj, e){
        if (!this.isContained(anchorobj, e) || (e && e.type=="click")){
            var e=window.event || e
            if (e.type=="click" && subobj.style.visibility=="visible"){
                subobj.style.visibility="hidden"
                return
            }
            var horizontaloffset=(subobj.dropposition[0]=="left")? -(subobj.offsetWidth-anchorobj.offsetWidth) : 0 //calculate user added horizontal offset
 
            /// Start modifications by hankknight
            anchorobj.style.background = 'url(menu_arrow.gif)';
            this.visibleSub = anchorobj;
            var verticaloffset=(subobj.dropposition[1]=="top")? -subobj.offsetHeight : anchorobj.offsetHeight //calculate user added vertical offset
            subobj.style.left=this.getposOffset(anchorobj, "offsetLeft") + horizontaloffset + 155 + "px"
            subobj.style.borderTop="0px solid #84B4E5"
            subobj.style.borderBottom="0px solid #84B4E5"
            /// End modifications by hankknight
            subobj.style.top=this.getposOffset(anchorobj, "offsetTop")+(verticaloffset - 57)+"px"
            subobj.style.clip=(subobj.dropposition[1]=="top")? "rect(auto auto auto 0)" : "rect(0 auto 0 0)" //hide drop down box  initially via clipping
            subobj.style.visibility="visible"
            subobj.startTime=new Date().getTime()
            subobj.contentheight=parseInt(subobj.offsetHeight)
            if (typeof window["hidetimer_"+subobj.id]!="undefined") //clear timer that hides drop down box?
                clearTimeout(window["hidetimer_"+subobj.id])
            this.slideengine(subobj, (subobj.dropposition[1]=="top")? "up" : "down")
        }
    },
 
    curveincrement:function(percent){
        return (1-Math.cos(percent*Math.PI)) / 2 //return cos curve based value from a percentage input
    },
 
    slideengine:function(obj, direction){
        var elapsed=new Date().getTime()-obj.startTime //get time animation has run
        if (elapsed<obj.glidetime){ //if time run is less than specified length
            var distancepercent=(direction=="down")? this.curveincrement(elapsed/obj.glidetime) :
1-this.curveincrement(elapsed/obj.glidetime)
            var currentclip=(distancepercent*obj.contentheight)+"px"
            obj.style.clip=(direction=="down")? "rect(0 auto "+currentclip+" 0)" : "rect("+currentclip+" auto auto 0)"
            window["glidetimer_"+obj.id]=setTimeout(function(){dropdowncontent.slideengine(obj, direction)}, 10)
        }
        else{ //if animation finished
            obj.style.clip="rect(0 auto auto 0)"
        }
    },
 
    hide:function(activeobj, subobj, e){
        if (!dropdowncontent.isContained(activeobj, e)){
            this.visibleSub.style.background = ''; // garlix
            window["hidetimer_"+subobj.id]=setTimeout(function(){
                subobj.style.visibility="hidden"
                subobj.style.left=subobj.style.top=0
                clearTimeout(window["glidetimer_"+subobj.id])
            }, dropdowncontent.hidedivmouseout[1])
        }
    },
 
    hidediv:function(subobjid){
        document.getElementById(subobjid).style.visibility="hidden"
    },
   ajaxconnect:function(pageurl, divId){
        var page_request = false
        var bustcacheparameter=""
        if (window.XMLHttpRequest) // if Mozilla, IE7, Safari etc
            page_request = new XMLHttpRequest()
        else if (window.ActiveXObject){ // if IE6 or below
            try {
            page_request = new ActiveXObject("Msxml2.XMLHTTP")
            }
            catch (e){
                try{
                page_request = new ActiveXObject("Microsoft.XMLHTTP")
                }
                catch (e){}
            }
        }
        else
            return false
        document.getElementById(divId).innerHTML=this.ajaxloadingmsg //Display "fetching page message"
        page_request.onreadystatechange=function(){dropdowncontent.loadpage(page_request, divId)}
        if (this.ajaxbustcache) //if bust caching of external page
            bustcacheparameter=(pageurl.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
        page_request.open('GET', pageurl+bustcacheparameter, true)
        page_request.send(null)
    },
 
    loadpage:function(page_request, divId){
        if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)){
            document.getElementById(divId).innerHTML=page_request.responseText
        }
    },
 
 init:function(anchorid, pos, glidetime, revealbehavior){
        var anchorobj=document.getElementById(anchorid)
        var subobj=document.getElementById(anchorobj.getAttribute("rel"))
        var subobjsource=anchorobj.getAttribute("rev")
        if (subobjsource!=null && subobjsource!="")
            this.ajaxconnect(subobjsource, anchorobj.getAttribute("rel"))
        subobj.dropposition=pos.split("-")
        subobj.glidetime=glidetime || 1000
        subobj.style.left=subobj.style.top=0
        if (typeof revealbehavior=="undefined" || revealbehavior=="mouseover"){
            anchorobj.onmouseover=function(e){dropdowncontent.show(this, subobj, e)}
            anchorobj.onmouseout=function(e){dropdowncontent.hide(subobj, subobj, e, this)}
            if (this.disableanchorlink) anchorobj.onclick=function(){return false}
        }
        else
            anchorobj.onclick=function(e){dropdowncontent.show(this, subobj, e); return false}
        if (this.hidedivmouseout[0]==true) //hide drop down DIV when mouse rolls out of it?
            subobj.onmouseout=function(e){dropdowncontent.hide(this, subobj, e)}
    }
}
</script>

Open in new window

Commented:
Ah, I see most of my // garlix comments fell of when editing but my modifications are on lines: 14, 40, 41 and 78. :-)

Author

Commented:
Garlix,

That's awesome and really helps with the navigation!  I'm appreciate the time you took to pick through this and get it working, wish I could give more than 500 points!

Thank you,

Chris

Explore More ContentExplore courses, solutions, and other research materials related to this topic.