JavaScript - Hide Submenu On Hover?!?!

A menu is not hovered will be like this:



some errors are found

1. Sub-menus are displayed under the menu



I want to display All sub-menus on the right and next to menu border

Eg: The result I want it to be looked like this:



How can I fix the code like that ?

2. Sub menu does have the same size of length.

When sub-menu of Pyjamas and Sub-menu of Silk Ties are called, The submenu of Pyjama are longer than the submenu of Silk Ties.




How can fix the problem so that All submenu will be the same size of length when they are called ?

My code is for leftMenu.php

Code:

<div id="leftmenu">
    <ul>
        <li><a href="index.php?page=dress">Fashion Dress</a></li>
        <li><a href="index.php?page=handbag">Hand Bags</a></li>
        <li><a href="index.php?page=scraves">Scraves</a></li>
        <li><a href="index.php?page=watch">Bracelet Watches</a></li>
        <li><a href="#" rel="dropmenu1">Silk Ties</a></li>
        <li><a href="#" rel="dropmenu2">Pyjamas</a>
    </li>
    </ul>
</div>
<!-- SILK TIES drop down menu -->
<div id="dropmenu1" class="dropmenudiv">
<a href="index.php?page=plain">Plain Style</a>
<a href="index.php?page=woven">Woven Style</a>
</div>
<!-- PYJAMAS drop down menu -->
<div id="dropmenu2" class="dropmenudiv" style="width: 150px;">
<a href="index.php?page=wonen">For Women</a>
<a href="index.php?page=men">For Men</a>
</div>

<script type="text/javascript">
cssdropdown.startchrome("leftmenu")
</script>

My code is for leftmenu.css

Code:

#leftmenu ul{
    font-family: Arial, Verdana;
    font-size: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
    margin-top: .1em;
}
ul#leftmenu li {
    display: block;
    position: relative;
    float:left;
}
#leftmenu li a {
    display: block;
    text-decoration: none;
    background-image:url(images/leftNormal.gif);
    width: 218px;
    height: 30px;
    margin-top: .1em;
}
#leftmenu li a:hover {
    display: block;
    text-decoration: none;
    background-image:url(images/leftHover.gif);
    width: 218px;
    height: 30px;
    white-space: 1em;
    color:#FFF;
}

/* ######### Style for Drop Down Menu ######### */

.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #BBB; /*THEME CHANGE HERE*/
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: white;
width: 200px;
visibility: hidden;
}
.dropmenudiv a{
width: auto;
display: block;
text-indent: 3px;
background-image:url(images/leftmenu.gif);
padding: 2px 0;
text-decoration: none;
font-weight: bold;
color: black;
}
* html .dropmenudiv a{ /*IE only @hắc*/
width: 100%;
}
.dropmenudiv a:hover{ /*THEME CHANGE HERE*/
background-image:url(images/lefthover.gif);
width: auto;
display: block;
text-indent: 3px;
padding: 2px 0;
text-decoration: none;
font-weight: bold;
color:#FFF;
}

Javascript code in the page of leftmenu.js

Code:

var cssdropdown={
disappeardelay: 250, //set delay in miliseconds before menu disappears onmouseout
//dropdownindicator: '<img src="" border="0" />', //specify full HTML to add to end of each menu item with a drop down menu
enablereveal: [true, 8], //enable swipe effect? [true/false, steps (Number of animation steps. Integer between 1-20. Smaller=faster)]
enableiframeshim: 1, //enable "iframe shim" in IE5.5 to IE7? (1=yes, 0=no)

//No need to edit beyond here////////////////////////

dropmenuobj: null, asscmenuitem: null, domsupport: document.all || document.getElementById, standardbody: null, iframeshimadded: false, revealtimers: {},

getposOffset:function(what, offsettype){
    var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
    var parentEl=what.offsetParent;
    while (parentEl!=null){
        totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
        parentEl=parentEl.offsetParent;
    }
    return totaloffset;
},

css:function(el, targetclass, action){
    var needle=new RegExp("(^|\\s+)"+targetclass+"($|\\s+)", "ig")
    if (action=="check")
        return needle.test(el.className)
    else if (action=="remove")
        el.className=el.className.replace(needle, "")
    else if (action=="add" && !needle.test(el.className))
        el.className+=" "+targetclass
},

showmenu:function(dropmenu, e){
    if (this.enablereveal[0]){
        if (!dropmenu._trueheight || dropmenu._trueheight<10)
            dropmenu._trueheight=dropmenu.offsetHeight
        clearTimeout(this.revealtimers[dropmenu.id])
        dropmenu.style.height=dropmenu._curheight=0
        dropmenu.style.overflow="hidden"
        dropmenu.style.visibility="visible"
        this.revealtimers[dropmenu.id]=setInterval(function(){cssdropdown.revealmenu(dropmenu)}, 10)
    }
    else{
        dropmenu.style.visibility="visible"
    }
    this.css(this.asscmenuitem, "selected", "add")
},

revealmenu:function(dropmenu, dir){
    var curH=dropmenu._curheight, maxH=dropmenu._trueheight, steps=this.enablereveal[1]
    if (curH<maxH){
        var newH=Math.min(curH, maxH)
        dropmenu.style.height=newH+"px"
        dropmenu._curheight= newH + Math.round((maxH-newH)/steps) + 1
    }
    else{ //if done revealing menu
        dropmenu.style.height="auto"
        dropmenu.style.overflow="hidden"
        clearInterval(this.revealtimers[dropmenu.id])
    }
},

clearbrowseredge:function(obj, whichedge){
    var edgeoffset=0
    if (whichedge=="rightedge"){
        var windowedge=document.all && !window.opera? this.standardbody.scrollLeft+this.standardbody.clientWidth-15 : window.pageXOffset+window.innerWidth-15
        var dropmenuW=this.dropmenuobj.offsetWidth
        if (windowedge-this.dropmenuobj.x < dropmenuW)  //move menu to the left?
            edgeoffset=dropmenuW-obj.offsetWidth
    }
    else{
        var topedge=document.all && !window.opera? this.standardbody.scrollTop : window.pageYOffset
        var windowedge=document.all && !window.opera? this.standardbody.scrollTop+this.standardbody.clientHeight-15 : window.pageYOffset+window.innerHeight-18
        var dropmenuH=this.dropmenuobj._trueheight
        if (windowedge-this.dropmenuobj.y < dropmenuH){ //move up?
            edgeoffset=dropmenuH+obj.offsetHeight
            if ((this.dropmenuobj.y-topedge)<dropmenuH) //up no good either?
                edgeoffset=this.dropmenuobj.y+obj.offsetHeight-topedge
        }
    }
    return edgeoffset
},

dropit:function(obj, e, dropmenuID){
    if (this.dropmenuobj!=null) //hide previous menu
        this.hidemenu() //hide menu
    this.clearhidemenu()
    this.dropmenuobj=document.getElementById(dropmenuID) //reference drop down menu
    this.asscmenuitem=obj //reference associated menu item
    this.showmenu(this.dropmenuobj, e)
    this.dropmenuobj.x=this.getposOffset(obj, "left")
    this.dropmenuobj.y=this.getposOffset(obj, "top")
    this.dropmenuobj.style.left=this.dropmenuobj.x-this.clearbrowseredge(obj, "rightedge")+"px"
    this.dropmenuobj.style.top=this.dropmenuobj.y-this.clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+1+"px"
    this.positionshim() //call iframe shim function
},

positionshim:function(){ //display iframe shim function
    if (this.iframeshimadded){
        if (this.dropmenuobj.style.visibility=="visible"){
            this.shimobject.style.width=this.dropmenuobj.offsetWidth+"px"
            this.shimobject.style.height=this.dropmenuobj._trueheight+"px"
            this.shimobject.style.left=parseInt(this.dropmenuobj.style.left)+"px"
            this.shimobject.style.top=parseInt(this.dropmenuobj.style.top)+"px"
            this.shimobject.style.display="block"
        }
    }
},

hideshim:function(){
    if (this.iframeshimadded)
        this.shimobject.style.display='none'
},

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

dynamichide:function(m, e){
    if (!this.isContained(m, e)){
        this.delayhidemenu()
    }
},

delayhidemenu:function(){
    this.delayhide=setTimeout("cssdropdown.hidemenu()", this.disappeardelay) //hide menu
},

hidemenu:function(){
    this.css(this.asscmenuitem, "selected", "remove")
    this.dropmenuobj.style.visibility='hidden'
    this.dropmenuobj.style.left=this.dropmenuobj.style.top="-1000px"
    this.hideshim()
},

clearhidemenu:function(){
    if (this.delayhide!="undefined")
        clearTimeout(this.delayhide)
},

addEvent:function(target, functionref, tasktype){
    if (target.addEventListener)
        target.addEventListener(tasktype, functionref, false);
    else if (target.attachEvent)
        target.attachEvent('on'+tasktype, function(){return functionref.call(target, window.event)});
},

startchrome:function(){
    if (!this.domsupport)
        return
    this.standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body
    for (var ids=0; ids<arguments.length; ids++){
        var menuitems=document.getElementById(arguments[ids]).getElementsByTagName("a")
        for (var i=0; i<menuitems.length; i++){
            if (menuitems[i].getAttribute("rel")){
                var relvalue=menuitems[i].getAttribute("rel")
                var asscdropdownmenu=document.getElementById(relvalue)
                this.addEvent(asscdropdownmenu, function(){cssdropdown.clearhidemenu()}, "mouseover")
                this.addEvent(asscdropdownmenu, function(e){cssdropdown.dynamichide(this, e)}, "mouseout")
                this.addEvent(asscdropdownmenu, function(){cssdropdown.delayhidemenu()}, "click")
                try{
                    menuitems[i].innerHTML=menuitems[i].innerHTML+" "
                }catch(e){}
                this.addEvent(menuitems[i], function(e){ //show drop down menu when main menu items are mouse over-ed
                    if (!cssdropdown.isContained(this, e)){
                        var evtobj=window.event || e
                        cssdropdown.dropit(this, evtobj, this.getAttribute("rel"))
                    }
                }, "mouseover")
                this.addEvent(menuitems[i], function(e){cssdropdown.dynamichide(this, e)}, "mouseout") //hide drop down menu when main menu items are mouse out
                this.addEvent(menuitems[i], function(){cssdropdown.delayhidemenu()}, "click") //hide drop down menu when main menu items are clicked on
            }
        } //end inner for
    } //end outer for
    if (this.enableiframeshim && document.all && !window.XDomainRequest && !this.iframeshimadded){ //enable iframe shim in IE5.5 thru IE7?
        document.write('<IFRAME id="iframeshim" src="about:blank" frameBorder="0" scrolling="no" style="left:0; top:0; position:absolute; display:none;z-index:90; background: transparent;"></IFRAME>')
        this.shimobject=document.getElementById("iframeshim") //reference iframe object
        this.shimobject.style.filter='progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)'
        this.iframeshimadded=true
    }
} //end startchrome

}

I am very appreciated if you help me figure out where I am wrong and let me know how I can fix them clearly.

Thanks

I need some help with a drop down menu. I am working on a site with a left menu that slides out, and I've converted it to the top to drop down. So far, it is working ok, but the submenu items need to be below the parent, preferably left aligned. I have played with it a bit and so far can't seem to achieve what I want. See below where I'm clicking Resources and the menu is way too high and over to the right. Thanks in advance for any help. : )



Code:

//** Dynamic Drive Equal Columns Height script v1.01 (Nov 2nd, 06)
//** http://www.dynamicdrive.com/style/bl...height-script/

var ddequalcolumns=new Object()
//Input IDs (id attr) of columns to equalize. Script will check if each corresponding column actually exists:
ddequalcolumns.columnswatch=["sidebar-a", "content"]

ddequalcolumns.setHeights=function(reset){
var tallest=0
var resetit=(typeof reset=="string")? true : false
for (var i=0; i<this.columnswatch.length; i++){
if (document.getElementById(this.columnswatch[i])!=null){
if (resetit)
document.getElementById(this.columnswatch[i]).style.height="auto"
if (document.getElementById(this.columnswatch[i]).offsetHeight>tallest)
tallest=document.getElementById(this.columnswatch[i]).offsetHeight
}
}
if (tallest>0){
for (var i=0; i<this.columnswatch.length; i++){
if (document.getElementById(this.columnswatch[i])!=null)
document.getElementById(this.columnswatch[i]).style.height=tallest+"px"
}
}
}

ddequalcolumns.resetHeights=function(){
this.setHeights("reset")
}

ddequalcolumns.dotask=function(target, functionref, tasktype){ //assign a function to execute to an event handler (ie: onunload)
var tasktype=(window.addEventListener)? tasktype : "on"+tasktype
if (target.addEventListener)
target.addEventListener(tasktype, functionref, false)
else if (target.attachEvent)
target.attachEvent(tasktype, functionref)
}

ddequalcolumns.dotask(window, function(){ddequalcolumns.setHeights()}, "load")
ddequalcolumns.dotask(window, function(){if (typeof ddequalcolumns.timer!="undefined") clearTimeout(ddequalcolumns.timer); ddequalcolumns.timer=setTimeout("ddequalcolumns.resetHeights()", 200)}, "resize")



 /************************************************************************************************************
 (C) www.dhtmlgoodies.com, November 2005
 
 This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website. 
 
 Terms of use:
 You are free to use this script as long as the copyright message is kept intact. However, you may not
 redistribute, sell or repost it without our permission.
 
 Thank you!
 
 www.dhtmlgoodies.com
 Alf Magne Kalleland
 
 ************************************************************************************************************/

 var timeBeforeAutoHide = 700; // Microseconds to wait before auto hiding menu(1000 = 1 second)
 var slideSpeed_out = 10; // Steps to move sub menu at a time ( higher = faster)
 var slideSpeed_in = 10;
  
 
 var slideTimeout_out = 25; // Microseconds between slide steps ( lower = faster)
 var slideTimeout_in = 10; // Microseconds between slide steps ( lower = faster)
 
 var showSubOnMouseOver = true; // false = show sub menu on click, true = show sub menu on mouse over
 var fixedSubMenuWidth = false; // Width of sub menu items - A number(width in pixels) or false when width should be dynamic
 
 var xOffsetSubMenu = 0;  // Offset x-position of sub menu items - use negative value if you want the sub menu to overlap main menu
 
 var slideDirection = 'right'; // Slide to left or right ?
 
 /* Don't change anything below here */
 
 var activeSubMenuId = false;
 var activeMainMenuItem = false;
 var currentZIndex = 1000;  
 var autoHideTimer = 0;
 var submenuObjArray = new Array();
 var okToSlideInSub = new Array();
 var subPositioned = new Array();
 

 function stopAutoHide()
 {
  autoHideTimer = -1;
 }
 
 function initAutoHide()
 {
  autoHideTimer = 0;
  if(autoHideTimer>=0)autoHide();
 }
 
 function autoHide()
 {
  
  if(autoHideTimer>timeBeforeAutoHide)
  {
   
   if(activeMainMenuItem){
    activeMainMenuItem.className='';
    activeMainMenuItem = false;
   }
   
   if(activeSubMenuId){
    var obj = document.getElementById('subMenuDiv' + activeSubMenuId);
    showSub();
   }
  }else{
   if(autoHideTimer>=0){
    autoHideTimer+=50;
    setTimeout('autoHide()',50);
   }
  }
 } 
 
 function getTopPos(inputObj)
 {  
   var returnValue = inputObj.offsetTop;
   while((inputObj = inputObj.offsetParent) != null)returnValue += inputObj.offsetTop;
   return returnValue;
 }
 
 function getLeftPos(inputObj)
 {
   var returnValue = inputObj.offsetLeft;
   while((inputObj = inputObj.offsetParent) != null)returnValue += inputObj.offsetLeft;
   return returnValue;
 }
 
 function showSub()
 {
  var subObj = false;
  if(this && this.tagName){
   var numericId = this.parentNode.id.replace(/[^0-9]/g,'');
   okToSlideInSub[numericId] = false;
   var subObj = document.getElementById('subMenuDiv' + numericId);
   if(activeMainMenuItem)activeMainMenuItem.className='';
   if(subObj){
    if(!subPositioned[numericId]){
     if(slideDirection=='right'){
      subObj.style.left = getLeftPos(submenuObjArray[numericId]['parentDiv']) + submenuObjArray[numericId]['parentDiv'].offsetWidth + xOffsetSubMenu + 'px';
     }else{
      subObj.style.left = getLeftPos(submenuObjArray[numericId]['parentDiv']) + xOffsetSubMenu + 'px';
      
     }
     submenuObjArray[numericId]['left'] = subObj.style.left.replace(/[^0-9]/g,'');
     subObj.style.top = getTopPos(submenuObjArray[numericId]['parentDiv']) + 'px';
     subPositioned[numericId] = true;
    }    
    subObj.style.visibility = 'visible';
    subObj.style.zIndex = currentZIndex;
    currentZIndex++; 
    this.className='activeMainMenuItem';
    activeMainMenuItem = this;
   }
  }else{
   var numericId = activeSubMenuId;
  }
  if(activeSubMenuId && (numericId!=activeSubMenuId || !subObj))slideMenu(activeSubMenuId,(slideSpeed_in*-1));
  if(numericId!=activeSubMenuId && this && subObj){
   subObj.style.width = '0px'; 
   slideMenu(numericId,slideSpeed_out);
   activeSubMenuId = numericId;
  }else{
   if(numericId!=activeSubMenuId)activeSubMenuId = false;
  }
  if(showSubOnMouseOver)stopAutoHide();
 }
 
 function slideMenu(menuIndex,speed){
  var obj = submenuObjArray[menuIndex]['divObj'];
  var obj2 = submenuObjArray[menuIndex]['ulObj'];
  var width = obj.offsetWidth + speed;
  if(speed<0){
   if(width<0)width = 0;
   obj.style.width = width + 'px';
   if(slideDirection=='left'){
    obj.style.left = submenuObjArray[menuIndex]['left'] - width + 'px';
    obj2.style.left = '0px';
   }else{
    obj2.style.left = width - submenuObjArray[menuIndex]['width'] + 'px' 
   }
   if(width>0 && okToSlideInSub[menuIndex])setTimeout('slideMenu(' + menuIndex + ',' + speed + ')',slideTimeout_in); else{
    obj.style.visibility = 'hidden';
    obj.style.width = '0px';
    if(activeSubMenuId==menuIndex)activeSubMenuId=false;
   }
   
  }else{
   if(width>submenuObjArray[menuIndex]['width'])width = submenuObjArray[menuIndex]['width'];
   if(slideDirection=='left'){
    obj.style.left = submenuObjArray[menuIndex]['left'] - width + 'px';
    obj2.style.left = '0px';
   }else{
    obj2.style.left = width - submenuObjArray[menuIndex]['width'] + 'px' 
   }  
   
   obj.style.width = width + 'px';
   if(width<submenuObjArray[menuIndex]['width']){
    setTimeout('slideMenu(' + menuIndex + ',' + speed + ')',slideTimeout_out);
   }else{
    okToSlideInSub[menuIndex] = true;
   }
  }
 }
 function resetPosition()
 {
  subPositioned.length = 0;
 }
   
 function initLeftMenu()
 {
  var isMSIE = navigator.userAgent.indexOf('MSIE')>=0?true:false;
  var browserVersion = parseInt(navigator.userAgent.replace(/.*?MSIE ([0-9]+?)[^0-9].*/g,'$1'));
  if(!browserVersion)browserVersion=1;
  
  var menuObj = document.getElementById('dhtmlgoodies_menu'); 
  var mainMenuItemArray = new Array();
  
  var mainMenuItem = menuObj.getElementsByTagName('LI')[0];
  while(mainMenuItem){
   if(mainMenuItem.tagName && mainMenuItem.tagName.toLowerCase()=='li'){
    mainMenuItemArray[mainMenuItemArray.length] = mainMenuItem;
    var aTag = mainMenuItem.getElementsByTagName('A')[0];
    if(showSubOnMouseOver)
     aTag.onmouseover = showSub; 
    else
     aTag.onclick = showSub; 
   }
   mainMenuItem = mainMenuItem.nextSibling;
  }  
  
  var lis = menuObj.getElementsByTagName('A');
  for(var no=0;no<lis.length;no++){
   if(!showSubOnMouseOver)lis[no].onmouseover = stopAutoHide;
   lis[no].onmouseout = initAutoHide;
   lis[no].onmousemove = stopAutoHide;
  }
    
  for(var no=0;no<mainMenuItemArray.length;no++){
   var sub = mainMenuItemArray[no].getElementsByTagName('UL')[0];
   if(sub){
    mainMenuItemArray[no].id = 'mainMenuItem' + (no+1);
    var div = document.createElement('DIV');
    div.className='dhtmlgoodies_subMenu';
    document.body.appendChild(div);
    div.appendChild(sub);
    if(slideDirection=='right'){
     div.style.left = getLeftPos(mainMenuItemArray[no]) + mainMenuItemArray[no].offsetWidth + xOffsetSubMenu + 'px';
    }else{
     div.style.left = getLeftPos(mainMenuItemArray[no]) + xOffsetSubMenu + 'px';
    }
    div.style.top = getTopPos(mainMenuItemArray[no]) + 'px';
    div.id = 'subMenuDiv' + (no+1);
    sub.id = 'submenuUl' + (no+1);
    sub.style.position = 'relative'; 

    if(navigator.userAgent.indexOf('Opera')>=0){
     submenuObjArray[no+1] = new Array();
     submenuObjArray[no+1]['parentDiv'] = mainMenuItemArray[no];
     submenuObjArray[no+1]['divObj'] = div;
     submenuObjArray[no+1]['ulObj'] = sub;
     submenuObjArray[no+1]['width'] = sub.offsetWidth;
     submenuObjArray[no+1]['left'] = div.style.left.replace(/[^0-9]/g,'');
    }
    sub.style.left = 1 - sub.offsetWidth + 'px'; 
    
    
    
    if(browserVersion<7 && isMSIE)div.style.width = '1px'; 
     
    if(navigator.userAgent.indexOf('Opera')<0){
     submenuObjArray[no+1] = new Array();
     submenuObjArray[no+1]['parentDiv'] = mainMenuItemArray[no];
     submenuObjArray[no+1]['divObj'] = div;
     submenuObjArray[no+1]['ulObj'] = sub;
     submenuObjArray[no+1]['width'] = sub.offsetWidth;
     
     
     
     submenuObjArray[no+1]['left'] = div.style.left.replace(/[^0-9]/g,'');
     if(fixedSubMenuWidth)submenuObjArray[no+1]['width'] = fixedSubMenuWidth;
    } 

    if(!document.all)div.style.width = '1px';   
     
   }   
  }
  
  menuObj.style.visibility = 'visible';  
  window.onresize = resetPosition;
 }
 
 
 window.onload = initLeftMenu;

Ok, first let me explain what I try to do.

I have a menu with some items containing a submenu. The submenu's should open when a parent is clicked and contains submenu's, and when traveling to another page (from the item clicked, for example a parent of submenu item), the submenu should remain active and visible.

When I click on a parent (at the moment the hrefs contain no links just #), the submenu opens. But when I click another main item, the submenu of the previous parent remain visible, and the submenu of the parent just clicked is also visible, while I only want the submenu of the parent clicked to be visible or when parent with no submenu the submenu should be invisible.

So, here is the code I have so far:
Code:

<div id="topnav">
        <ul>
            <li>
                <a href="index.html">Home</a>
            </li>
            <li>
                <a href="#">Over Meves</a>
                <ul class="submenu">
                    <li><a href="#" class="suba">Historie</a></li>
                    <li><a href="#" class="suba">Onze mensen</a></li>
                    <li><a href="#" class="suba">Werkzijze</a></li>
                </ul>
            </li>
            <li>
                <a href="vervolg3.html">Disciplines</a>
                <ul class="submenu">
                    <li><a href="vervolg.html" class="suba">Klimaatbeheersing</a></li>
                    <li><a href="#" class="suba">Elektrotechniek</a></li>
                    <li><a href="#" class="suba">Sanitaire techniek</a></li>
                    <li><a href="#" class="suba">Energiebesparingstechniek</a></li>
                    <li><a href="#" class="suba">Bouwfysica en geluid</a></li>
                    <li><a href="#" class="suba">Diensten energiebesparing</a></li>
                </ul>
            </li>
            <li>
                <a href="#">Expertise</a>
                <ul class="submenu">
                    <li><a href="#" class="suba">Woningbouw & Utiliteit</a></li> 
                    <li><a href="#" class="suba">Zorg & Welzijn</a></li> 
                    <li><a href="#" class="suba">Milieu & Energie</a></li> 
                    <li><a href="#" class="suba">Beheer & Onderhoud</a></li> 
                    <li><a href="#" class="suba">EPA & EPC</a></li> 
                    <li><a href="#" class="suba">Legionella beheersing</a></li>
                </ul>          	
            </li>
            <li>
                <a href="#">Contact</a>
                <ul class="submenu">
                    <li><a href="#" class="suba">Adres & route</a></li> 
                    <li><a href="#" class="suba">Werken bij</a></li>
                </ul>
            </li>
        </ul>
    </div>

The javascript:
Code:

<script type="text/javascript">
var ddmenuitem = 0;
function jsddm_open()
{  jsddm_close();
   ddmenuitem = $(this).find('ul.submenu').css('display', 'block');
}
function jsddm_close()
{  
	if(ddmenuitem) ddmenuitem.css('display', 'none');
}
$(document).ready(function()
{  
   $('#topnav > ul > li').bind('click', jsddm_open)
   $('#topnav ul li a.suba').click(function(e){
     if ($(this).attr('class') != 'active'){
       $('#topnav ul li a.suba').removeClass('active');
       $(this).addClass('active');
     }
   });
	   $("ul.submenu > li > a").each(function () {
         var currentURL = document.location.href;
         var thisURL = $(this).attr("href");
         if (currentURL.indexOf(thisURL) != -1) {
	         $(this).parents("ul.submenu").css('display', 'block');
         }
       });
	   $('a').each(function () {
		var currentURL = document.location.href;
		var thisURL = $(this).attr('href');
		if (currentURL = thisURL) {
			$(this).parents('ul.submenu').css('display', 'block');	
		}
	//	else {
		//	$(this).parents('ul.submenu').css('display', 'none');	
	//	}
	   }); 
});
</script>

And the css:
Code:

#topnav ul
{
	list-style: none;
	padding: 0;
	margin: 0;
}
#topnav ul li 
{
	float: left;
	margin: 0;
	padding: 0;
}
#topnav ul li a
{
	padding: 5px 15px;
	color: #00537F;
	text-decoration: none;
	display: block;
	font-weight: bold;
}
#topnav ul li a:link
{
	color: #FFF;
	text-decoration: none;
}
#topnav ul li a:visited
{
	color: #FFF;
	text-decoration: none;
}
#topnav ul li a:hover
{
	color: #FFF;
	text-decoration: underline;
}
#topnav ul li a.active
{
	text-decoration: underline;
	color: #FFF;
}
/*#topnav ul li:hover .submenu
{
	display:block;
}*/
#topnav ul li ul.submenu
{
	float: left;
	padding: 4px 0;
	position: absolute;
	left: 0;
	top: 24px;
	display: none;
	background: #e0e0e0;
	color: #00537F;
}
#topnav ul li ul.submenu a
{
	display: inline;
	color: #00537F;
	padding: 4px 8px;
}
#topnav ul li ul.submenu li
{
	border-right-width: 1px; 
	border-right-style: solid;
	border-right-color: #00537F;
}
#topnav ul li ul.submenu li:last-child
{
	border-right-style: none;
}
#topnav ul li ul.submenu a:link
{
	color: #00537F;
}
#topnav ul li ul.submenu a:visited
{
	color: #00537F;
}
#topnav ul li ul.submenu a:hover
{
	text-decoration: underline;
	color: #00537F;
}
#topnav ul li ul.submenu li.active
{
	text-decoration: underline;
	color: #00537F;
}
#topnav ul li ul.submenu a.active
{
	text-decoration: underline;
	color: #00537F;
}

Hope I explained it clear.

Thanks for any help.

I have a navigation menu with one level of submenu, and the code that I have allowes me when I click on the parent, the submenu opens (and remains open). When I click on a subitem, the page travels to that url, but the code that I have compares the document.location to the href of the menu items and display the submenu.
Now the active page is hightlighted, but the parent isn't (if the active page is a submenu).
So what I want is that when a subitem is active, also it's parent should be active, for example:

main_item_1
main_item_2
--sub_item_1
--sub_item_2

In this case when sub_item_2 is active, also main_item_2 should be.

I have tried to use parent(), parents(), but none worked the right way, or at least for me the way I want it.

So here is the code I use:
Code:

$('#topnav ul li ul.submenu li a').click(function(e){
     if ($(this).attr('class') != 'active'){
       $('#topnav ul li a').removeClass('active');
       $(this).addClass('active');
     }
   });
	   $('a').filter(function(){
			return this.href === document.location.href;
	   }).addClass('active')
	   $("ul.submenu > li > a").each(function () {
         var currentURL = decodeURIComponent(document.location.href);
         var thisURL = $(this).attr("href");
         if (currentURL.indexOf(thisURL) != -1) {
	         $(this).parents("ul.submenu").css('display', 'block');
         }
       });
       $('#topnav > ul > li > a').each(function(){
      var currURL = decodeURIComponent(document.location.href);
	  var myHref= $(this).attr('href');
      if (currURL.match(myHref)) {
			$(this).addClass('active');
                        //$('a', $('.active').parents("li:last")).addClass('active');		                   
             	        $(this).parent().find("ul.submenu").css('display', 'block');
	  }
	});

The middle group code is for the subitem, so the code to make the parent also active should be there I think.

When I add the following line to the middle group (after the $(this).parents part):
Code:

$(this).parents("#topnav ul li").addClass('parent');

I am able to make the background of the top parent different, because the parent class changes the background color, but should also change the color of the menu text (parent), but .... not only the most top li has the parent class, also the li which is around the active subitem, which should only be the parent.

Please help.

I want to be able to hide a DIV within an iframe from the parent document. The usual document.getElementById('element').style.display="none"; doesn't work as I can't point to elements within the iframe with it. What do I need to add to make it look within the iframe and not the parent document?

Many thanks in advance.

I have this iframe code.

Code:

<iframe width="300" height="180" style="margin-bottom:5px; z-index:-1000;" src="http://www.ichartsonline.com/external/tradeback.aspx" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>

I have a WP plugin for image lightboxes. When the lightbox pops up, the iframe is overlayed on it. Is there any easy fix for this? Do you need to see the plugin Javascript?

Any help will be much appreciated!

Thanks

I have code that hides some check boxes based on what is selected in a radio button, and it works great. I am wondering if it could hide the entire table row instead of just the boxes so it decreases white space on my form, Here is my current code,

<tr id="playIntroRow">
<td class="editLabel"><span>*</span>Play Intro:</td>
<td>
<label>Yes
<input type="radio" name="playintro" value="1"
onclick="document.getElementById('voiceIntroRow').style.visibility='visible';" />
</label>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<label>No
<input type="radio" name="playintro" value="0" checked
onclick="document.getElementById('voiceIntroRow').style.visibility='hidden';" />
</label>
</td>
</tr>

</cfif>
<cfif voiceStatus eq "on">
<tr id="voiceIntroRow" style="visibility: hidden;">
<td class="editLabel"><span>*</span>Intro Message:</td>
<td><cfscript>voiceIntroRenderer.Render();</cfscript></td>
</tr>
</cfif>

Hi, I know very little about javascript, but it seems like what I need to do is simple, so I'm hoping someone here could help.

In my online store.... I have a <div> called "prodprice" which houses a dynamically loaded price {tag_saleprice}. When the price is $0.00, I want the <div> to be hidden. When the price is anything other than $0.00, I want it to be visible.

I have no idea how to code it, but it seems like the general logic would be something like this:

<div id="prodprice" style="display:none">{tag_saleprice}</div>

document.getElementById('prodprice') If prodprice="$0.00" .style.display = "block";

Am I totally off base? I just have no idea what to do and I have an impatient client!

Thank you so much.

hi


i have two buttons.. home and aboutus in my page.. and when i click on home i have the content for home inside a html page and i am calling the html file inside this Homepage using javascript(externally calling the html files)

Now what i need is, onclick of HOme button.. i have written a code like
<a href="main_Home.html" onclick="updateObject(this); return false;">

and the javascript i got from dhtml goodies is

<script type="text/javascript">
function updateObject(which){
document.getElementById('one').innerHTML = '<'+'object id="foo" name="foo" type="text/html" data="'+which.href+'"><\/object>';
}
</script>

now i also need a hide a div on the onclick funtion.. how do i use multiple functions? i need to hide the default homepage content and load the html file there..

Pls help..

ok trying to get a Div tag to show if something is True and hide if something is False

JS
Code:

unction eToggle(anctag,darg) 
{
 var ele = document.getElementById('Module1');
   var ele = document.getElementById('Module2');
   var ele = document.getElementById('Module3');
   var ele = document.getElementById('Module4');

  
  if("module1" + "module2" + "module3" + "module4" <40)
  {
    div.id.Failed = "block";
	div.Failed = "Failed";
  }
  else 
  {
	div.style.Passed = "block";
	div.Passed = "show";
  }
}

HTML
Code:

<div id="Fail" class="hidden" style="display: none"><b><i>You will need to Repeat the Semester!</b>
<br  />
</div>

<div id="Passed" class="hidden" style="display: none"> <img src="faces.png" width="50" height="50"><b><i> "Good Job you passed the Semster!"</b></div>

I'm trying to make a comment script with show/hide divs and are so far OK, but...

I want to hide one div when another is activated...

Here is what I have so far:
Code:

<?
for ($q = 1; $q <= 5; $q++) {
	
	echo '<div id="jdivStart'.$q.'" style="padding:0px 0px 0px 0px;width:100%x;">';
	echo '<textarea style="color:#999999;" rows=2 cols="66" onfocus="jchange'.$q.'(\'jdiv'.$q.'\');">Write comment</textarea>';
	echo '</div>';
	
	echo '<div id="jdiv'.$q.'" style="display:none;">';
	echo '<textarea style="color:#999999;" rows=6 cols="66"></textarea>';
	echo '</div>';
?>
	
	<script language="javascript" type="text/javascript">
	function jchange<? echo $q; ?>(divname) {
		
		var currentShowingDivQ = document.getElementById('jdivStart<? echo $q; ?>');
		var objDivQ = document.getElementById(divname);
		
		if (currentShowingDivQ && currentShowingDivQ != objDivQ) { 
			currentShowingDivQ.style.display = 'none';
		}
		
		if(objDivQ.style.display == 'none'){       
			objDivQ.style.display = 'block';
		} else {       
			objDivQ.style.display = 'none';   
		}
	
	}
	</script>

<?
}
?>

So if I activate the first textbox, then when I activates the second I want to be able to hide the first again...

Any help i appreciated :-)

Hello forum,

I need some help please. I need a javascript which hides X and shows Y if a button (text) is pressed. Needs to work on a webpage. Can someone help?

I kinda new to Javascript, and can get by with most of the basic bits and bods I need to do the day to day work on websites, but I've come across something that is causing me some issues, I could use some help.

The situation is, we have a webpage with 2 divs on it, one div has a javascript calculator and the other div sows the calculations in 2 separate tabs, the calc works and the tabs work no worries, the tabs are done in jquery.

The issue I've got is I need to hide the 2nd div with the tabs in until the user has done the calculation, I had this working no problem, until we switched to using jquery for the tabs, using a simple

Code:

window.onload = hide;
function hide() {
document.getElementByID('tabs').style.display = 'none';
}

But now I don't know how or where to put this in the whole load of code for the jquery
Code:

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {

	//Default Action
	$(".tab_content").hide(); //Hide all content
	$("ul.tab_header li:first").addClass("active").show(); //Activate first tab
	$(".tab_content:first").show(); //Show first tab content
	
	//On Click Event
	$("ul.tab_header li").click(function() {
		$("ul.tab_header li").removeClass("active"); //Remove any "active" class
		$(this).addClass("active"); //Add "active" class to selected tab
		$(".tab_content").hide(); //Hide all tab content
		var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
		$(activeTab).fadeIn(); //Fade in the active content
		return false;
	});

});
</script>

Can anyone give me any guidance at all??

Cheers

Hi guys, im new to forums and need some help with my website.
I have embed a flash player known as: JW player into my website and put it into a div.
Now my problem is I want javascript to hide the div containing the flash player for atleast a few seconds to display a loading image.gif.
How would I set this up?
Im not to familiar about using javascript so im not sure if its even possible.
Anways thx for any help ore suggestions related to this subject.