...

View Full Version : Hide submenus onmouseout



mnsalz91
11-18-2010, 09:33 PM
I found on the javascriptkit.com tutorials their js code for submenus here: http://www.javascriptkit.com/script/script2/2leveltab.shtml

I've changed some things in the css but I'm afraid to change the js code. I would like my link to hide the submenu on the onmouseout. What is the code to do this and where would it go in my js page?

Here is the js code that I've taken from the tutorial if that helps:

var mastertabvar=new Object()
mastertabvar.baseopacity=0
mastertabvar.browserdetect=""

function showsubmenu(masterid, id){
if (typeof highlighting!="undefined")
clearInterval(highlighting)
submenuobject=document.getElementById(id)
mastertabvar.browserdetect=submenuobject.filters? "ie" : typeof submenuobject.style.MozOpacity=="string"? "mozilla" : ""
hidesubmenus(mastertabvar[masterid])
submenuobject.style.display="block"
instantset(mastertabvar.baseopacity)
highlighting=setInterval("gradualfade(submenuobject)",50)
}

function hidesubmenus(submenuarray){
for (var i=0; i<submenuarray.length; i++)
document.getElementById(submenuarray[i]).style.display="none"
}

function instantset(degree){
if (mastertabvar.browserdetect=="mozilla")
submenuobject.style.MozOpacity=degree/100
else if (mastertabvar.browserdetect=="ie")
submenuobject.filters.alpha.opacity=degree
}


function gradualfade(cur2){
if (mastertabvar.browserdetect=="mozilla" && cur2.style.MozOpacity<1)
cur2.style.MozOpacity=Math.min(parseFloat(cur2.style.MozOpacity)+0.1, 0.99)
else if (mastertabvar.browserdetect=="ie" && cur2.filters.alpha.opacity<100)
cur2.filters.alpha.opacity+=10
else if (typeof highlighting!="undefined") //fading animation over
clearInterval(highlighting)
}

function initalizetab(tabid){
mastertabvar[tabid]=new Array()
var menuitems=document.getElementById(tabid).getElementsByTagName("li")
for (var i=0; i<menuitems.length; i++){
if (menuitems[i].getAttribute("rel")){
menuitems[i].setAttribute("rev", tabid) //associate this submenu with main tab
mastertabvar[tabid][mastertabvar[tabid].length]=menuitems[i].getAttribute("rel") //store ids of submenus of tab menu
if (menuitems[i].className=="selected")
showsubmenu(tabid, menuitems[i].getAttribute("rel"))
menuitems[i].getElementsByTagName("a")[0].onmouseover=function(){
showsubmenu(this.parentNode.getAttribute("rev"), this.parentNode.getAttribute("rel"))
}
}
}
}

Thank you so much for your help.

Old Pedant
11-18-2010, 10:05 PM
Somewhat of a guess:


function initalizetab(tabid)
{
mastertabvar[tabid]=new Array();
var menuitems=document.getElementById(tabid).getElementsByTagName("li");
for (var i=0; i<menuitems.length; i++)
{
if (menuitems[i].getAttribute("rel"))
{
menuitems[i].setAttribute("rev", tabid);
mastertabvar[tabid][mastertabvar[tabid].length]=menuitems[i].getAttribute("rel");
if (menuitems[i].className=="selected")
{
showsubmenu(tabid, menuitems[i].getAttribute("rel"))
}
var link = menuitems[i].getElementsByTagName("a")[0];
link.onmouseover =
function(){
showsubmenu(this.parentNode.getAttribute("rev"),
this.parentNode.getAttribute("rel"));
}
link.onmouseout =
function(){
hidesubmenus(mastertabvar[this.parentNode.getAttribute("rev")]);
}
}
}
}

TOTALLY UNTESTED! Just trying to read that really ugly code and understand it.

mnsalz91
11-18-2010, 11:38 PM
Edit: It works, but it goes by so fast when you mouseout that you can't move onto the links.

Thank you! Sorry to be such a pain.

Old Pedant
11-20-2010, 01:20 AM
Ahhhh...that must be why they didn't do it like this in the first place!!

Well, we can try. Not sure.

First, add in the lines in RED that I show in red here:


var mastertabvar=new Object()
mastertabvar.baseopacity=0
mastertabvar.browserdetect=""

var submenuwait = null;

function showsubmenu(masterid, id)
{
if (typeof highlighting!="undefined") clearInterval(highlighting);
submenuobject=document.getElementById(id);
submenuobject.onmouseover =
function() {
if ( submenuwait != null ) clearTimeout(submenuwait);
submenuwait = null;
};
mastertabvar.browserdetect =
submenuobject.filters
? "ie"
: typeof submenuobject.style.MozOpacity=="string" ? "mozilla" : "";
hidesubmenus(mastertabvar[masterid]);
submenuobject.style.display="block";
instantset(mastertabvar.baseopacity);
highlighting=setInterval("gradualfade(submenuobject)",50)
}
...
function initalizetab(tabid)
{
mastertabvar[tabid]=new Array();
var menuitems=document.getElementById(tabid).getElementsByTagName("li");
for (var i=0; i<menuitems.length; i++)
{
if (menuitems[i].getAttribute("rel"))
{
menuitems[i].setAttribute("rev", tabid);
mastertabvar[tabid][mastertabvar[tabid].length]=menuitems[i].getAttribute("rel");
if (menuitems[i].className=="selected")
{
showsubmenu(tabid, menuitems[i].getAttribute("rel"))
}
var link = menuitems[i].getElementsByTagName("a")[0];
link.onmouseover =
function(){
showsubmenu(this.parentNode.getAttribute("rev"),
this.parentNode.getAttribute("rel"));
}
link.onmouseout =
function(){
var temp = mastertabvar[this.parentNode.getAttribute("rev")];
submenuwait = setTimeout('hidesubmenus("' + temp + '")', 500 );
}
}
}
}

But now you are really groping in the dark along with me.

You can change the 500 there (half a second) to suit yourself.

sunday
06-02-2011, 08:04 PM
Ive tried this code and the last part in the Red does not work for me.

sunday
06-05-2011, 06:54 AM
to this one right here

sunday
06-05-2011, 06:56 AM
Ahhhh...that must be why they didn't do it like this in the first place!!

Well, we can try. Not sure.

First, add in the lines in RED that I show in red here:


var mastertabvar=new Object()
mastertabvar.baseopacity=0
mastertabvar.browserdetect=""

var submenuwait = null;

function showsubmenu(masterid, id)
{
if (typeof highlighting!="undefined") clearInterval(highlighting);
submenuobject=document.getElementById(id);
submenuobject.onmouseover =
function() {
if ( submenuwait != null ) clearTimeout(submenuwait);
submenuwait = null;
};
mastertabvar.browserdetect =
submenuobject.filters
? "ie"
: typeof submenuobject.style.MozOpacity=="string" ? "mozilla" : "";
hidesubmenus(mastertabvar[masterid]);
submenuobject.style.display="block";
instantset(mastertabvar.baseopacity);
highlighting=setInterval("gradualfade(submenuobject)",50)
}
...
function initalizetab(tabid)
{
mastertabvar[tabid]=new Array();
var menuitems=document.getElementById(tabid).getElementsByTagName("li");
for (var i=0; i<menuitems.length; i++)
{
if (menuitems[i].getAttribute("rel"))
{
menuitems[i].setAttribute("rev", tabid);
mastertabvar[tabid][mastertabvar[tabid].length]=menuitems[i].getAttribute("rel");
if (menuitems[i].className=="selected")
{
showsubmenu(tabid, menuitems[i].getAttribute("rel"))
}
var link = menuitems[i].getElementsByTagName("a")[0];
link.onmouseover =
function(){
showsubmenu(this.parentNode.getAttribute("rev"),
this.parentNode.getAttribute("rel"));
}
link.onmouseout =
function(){
var temp = mastertabvar[this.parentNode.getAttribute("rev")];
submenuwait = setTimeout('hidesubmenus("' + temp + '")', 500 );
}
}
}
}

But now you are really groping in the dark along with me.

You can change the 500 there (half a second) to suit yourself.

this one right here

Old Pedant
06-08-2011, 01:17 AM
No idea what you mean by "hidden sub".

Show code.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum