onmouseout misfires in IE

@grifter7Sep 13.2009 — #if youre using seperate forms for the menus then you can put the onmouseout event into the form and not the seperate <td's> but my cairvoyance is not what it used to be and i can't see youre code im afraid ?. Also if you have pading margins orborders between them that will cause it. Could allways put a 1 second timer on it aswell even half a second would do.

@Maz_AauthorSep 13.2009 — #Hi again,

I've taken the code from

http://www.javascriptkit.com/script/script2/2leveltab.shtml

While you're on the submenus I want to keep the parent header highlighted and also once you leave the menu completely I want it to go back to the default default menu. Any idea? I've never been so stuck.

Thanks

Maz

@vwphillipsSep 14.2009 — #

[CODE]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
 <head>
 <title></title>
 <style type="text/css">
 /*<![CDATA[*/
 
 .basictab{
 padding: 3px 0;
 margin-left: 0;
 font: bold 12px Verdana;
 border-bottom: 1px solid gray;
 list-style-type: none;
 margin-bottom: 0;
 text-align: left; /*set to left, center, or right to align the menu as desired*/
 }
 
 .basictab li{
 display: inline;
 margin: 0;
 }
 
 .basictab li a{
 text-decoration: none;
 padding: 3px 7px;
 margin-right: 2px;
 border: 1px solid gray;
 border-bottom: none;
 background-color: white;
 color: black;
 }
 
 
 .basictab li a:visited{
 color: black;
 }
 
 .basictab li a:hover{
 background-color: #dbffff;
 color: black;
 }
 
 .basictab li a:active{
 color: black;
 }
 
 .basictab li.selected a{ /*selected tab effect*/
 position: relative;
 top: 1px;
 padding-top: 4px;
 background-color: #dbffff;
 color: black;
 }
 
 
 .submenustyle{
 padding: 2px 1px;
 border: 1px solid black;
 border-top-width: 0;
 width: auto;
 display: none;
 }
 
 * html .submenustyle{ /*IE only width definition*/
 width: 100%;
 }
 
 .submenustyle a{
 border-right: 1px dashed black;
 padding: 1px 5px;
 text-decoration: none;
 }
 
 .submenustyle a:hover{
 background-color: #ebffff;
 }/*]]>*/
 </style>
 <script  type="text/javascript">
 /*<![CDATA[*/
 
 function Tabs(tabid,cls){
 var lis=document.getElementById(tabid).getElementsByTagName('LI')
 this.cls=cls;
 this.ary=[];
 this.to=null;
 this.def=null;
 this.lst=false;
 for (var rel,sub,z0=0;z0<lis.length;z0++){
 rel=lis[z0].getAttribute('rel');
 sub=document.getElementById(rel);
 if (rel&&sub){
 this.ary[z0]=[lis[z0],sub];
 if (lis[z0].className&&lis[z0].className==cls){
 sub.style.display='block';
 this.lst=this.ary[z0];
 this.def=this.ary[z0];
 }
 this.addevt(lis[z0],'mouseover','MseOver',z0);
 this.addevt(lis[z0],'mouseout','MseOut',z0);
 this.addevt(sub,'mouseover','Cancel',z0);
 this.addevt(sub,'mouseout','MseOut',z0);
 }
 }
 }
 
 Tabs.prototype.Hide=function(){
 if (this.lst){
 this.lst[0].className='';
 this.lst[1].style.display='none';
 }
 }
 
 Tabs.prototype.MseOut=function(e,nu){
 var oop=this;
 this.to=setTimeout(function(){ oop.Def(); },500);
 }
 
 Tabs.prototype.Def=function(){
 this.Hide();
 if (this.def){
 this.lst=this.def
 this.def[0].className=this.cls;
 this.def[1].style.display='block';
 }
 }
 
 Tabs.prototype.MseOver=function(e,nu){
 this.Cancel();
 this.Hide();
 this.lst=this.ary[nu];
 this.lst[0].className=this.cls;
 this.lst[1].style.display='block';
 }
 
 Tabs.prototype.Cancel=function(){
 clearTimeout(this.to);
 }
 
 
 Tabs.prototype.addevt=function(o,t,f,p){
 var oop=this;
 if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](e,p);}, false);
 else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](e,p); });
 else {
 var prev=o['on'+t];
 if (prev) o['on'+t]=function(e){ prev(e); oop[f](e,p); };
 else o['on'+t]=o[f];
 }
 }
 
 
 /*]]>*/
 </script></head>
 
 <body>
 <ul id="maintab" class="basictab">
 <li ><a href="http://www.javascriptkit.com">Home</a></li>
 <li class="selected" rel="tutorials"><a href="#">Tutorials &#9660;</a></li>
 <li rel="references"><a href="#">References &#9660;</a></li>
 <li><a href="http://www.javascriptkit.com/cutpastejava.shtml">JavaScripts</a></li>
 </ul>
 
 <div id="references" class="submenustyle">
 <a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a>
 <a href="http://www.javascriptkit.com/domref/">DOM Reference</a>
 <a href="http://www.javascriptkit.com/dhtmltutors/cssreference.shtml">CSS Reference</a>
 </div>
 
 <div id="tutorials" class="submenustyle">
 <a href="http://www.javascriptkit.com/javatutors/">JavaScript Tutorials</a>
 <a href="http://www.javascriptkit.com/dhtmltutors/">DHTML & CSS Tutorials</a>
 <a href="http://www.javascriptkit.com/howto/">Web Building tutorials</a>
 <a href="http://www.javascriptkit.com/howto/htaccess.shtml">htaccess Tutorial</a>
 </div>
 
 <script type="text/javascript">
 //initialize tab menu, by passing in ID of UL
 var T=new Tabs('maintab','selected');
 </script>
 </body>
 
 </html>[/CODE]

@Maz_AauthorSep 14.2009 — #You saved me... I was losing my mind.

Thanks

Maz

onmouseout misfires in IE

4 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

onmouseout misfires in IE

4 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

4 Comments(s) _↴

Also in #JavaScript _↴