Results 1 to 1 of 1

Thread: AnyLink Select Box Hide Solution

  1. #1
    Join Date
    Sep 2004
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default AnyLink Select Box Hide Solution

    Script: AnyLink Drop Down Menu
    http://www.dynamicdrive.com/dynamici...pmenuindex.htm

    I've been struggling with this one for a while, but I think I've got a solution for hiding select boxes in the AnyLink menu script. I've integrated in some JS that I found on http://www.codetoad.com/.

    I've got it working in my particular scenario, but you may want to test it for yourself. Let me know how it works.

    bfisher

    Code:
    <script>
    
    /***********************************************
    * AnyLink Drop Down Menu- © Dynamic Drive (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit http://www.dynamicdrive.com/ for full source code
    ***********************************************/
    
    //Array 1
    var menu1=new Array()
    menu1[0]='&nbsp;<a href="#">item</a><br>'
    menu1[1]='&nbsp;<a href="#">item</a><br>'
    menu1[2]='&nbsp;<a href="#">item</a><br>'
    
    //Array 2
    var menu2=new Array()
    menu2[0]='&nbsp;<a href="#">item</a><br>'
    menu2[1]='&nbsp;<a href="#">item</a><br>'
    menu2[2]='&nbsp;<a href="#">item</a><br>'
    menu2[3]='&nbsp;<a href="#">item</a><br>'
    menu2[4]='&nbsp;<a href="#">item</a><br>'
    menu2[5]='&nbsp;<a href="#">item</a><br>'
    menu2[6]='&nbsp;<a href="#">item</a><br>'
    
    
    //Array 3
    var menu3=new Array()
    menu3[0]='&nbsp;<a href="#">item</a><br>'
    menu3[1]='&nbsp;<a href="#">item</a><br>'
    menu3[2]='&nbsp;<a href="#">item</a><br>'
    menu3[3]='&nbsp;<a href="#">item</a><br>'
    menu3[4]='&nbsp;<a href="#">item</a><br>'
    
    //Array 4
    var menu4=new Array()
    menu4[0]='&nbsp;<a href="#">item</a><br>'
    menu4[1]='&nbsp;<a href="#">item</a><br>'
    menu4[2]='&nbsp;<a href="#">item</a><br>'
    menu4[3]='&nbsp;<a href="#">item</a><br>'
    menu4[4]='&nbsp;<a href="#">item</a><br>'
    
    //Array 5
    var menu5=new Array()
    menu5[0]='&nbsp;<a href="/committees" class="dropDown">Action Committees</a><br>'
    menu5[1]='&nbsp;<a href="/boards" class="dropDown">Boards & Commissions</a><br>'
    menu5[2]='&nbsp;<a href="/egov/apps/document/center.exe?path=doc&id=173&id2=147&linked=0" class="dropDown">Community Sites</a><br>'
    menu5[3]='&nbsp;<a href="/egov/apps/faq/list.exe" class="dropDown">Frequently Asked Questions</a><br>'
    menu5[4]='&nbsp;<a href="/egov/apps/document/center.exe?path=browse&id=2" class="dropDown">News & Notices</a><br>'
    menu5[5]='&nbsp;<a href="/egov/apps/online/survey.exe" class="dropDown">Online Surveys</a><br>'
    menu5[6]='&nbsp;<a href="/egov/apps/directory/list.exe" class="dropDown">Staff Directory</a><br>'
    
    
    var menuwidth='180px' //default menu width
    var menubgcolor='#FFFFFF'  //menu bgcolor
    var disappeardelay=250  //menu disappear speed onMouseout (in miliseconds)
    var hidemenu_onclick="yes" //hide menu when user clicks within menu?
    
    /////No further editting needed
    
    var ie4=document.all
    var ns6=document.getElementById&&!document.all
    
    
    // Hide all select boxes
    function hideSelect() {
      if (document.all) {
        for (formIdx=0; formIdx<document.forms.length; formIdx++) {
          var theForm = document.forms[formIdx];
          for (elementIdx=0; elementIdx<theForm.elements.length; elementIdx++) {
            window.status += theForm[elementIdx].type;
            if(theForm[elementIdx].type == "select-one") {
              theForm[elementIdx].style.visibility = "hidden";
            }
          }
        }
      }
    }
    
    // Unhide all select boxes
    function unhideSelect() {
      if (document.all) {
        for (formIdx=0; formIdx<document.forms.length; formIdx++) {
          var theForm = document.forms[formIdx];
            for(elementIdx=0; elementIdx<theForm.elements.length; elementIdx++) {
              if(theForm[elementIdx].type == "select-one") {
                theForm[elementIdx].style.visibility = "visible";
              }
             }
          }
      }
    }
    
    
    if (ie4||ns6) {
      document.write('<div id="dropmenudiv" style="visibility:hidden;width:'+menuwidth+';background-color:'+menubgcolor+'" onMouseover="clearhidemenu()" onMouseout="dynamichide(event);"></div>')
    }
    
    function getposOffset(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;
    }
    
    
    function showhide(obj, e, visible, hidden, menuwidth){
      if (ie4||ns6)
        dropmenuobj.style.left=dropmenuobj.style.top=-500
        if (menuwidth!=""){
          dropmenuobj.widthobj=dropmenuobj.style
          dropmenuobj.widthobj.width=menuwidth
        }
        if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover") {
          obj.visibility=visible
          hideSelect()
        } else if (e.type=="click") {
          obj.visibility=hidden
          unhideSelect()
        }
    }
    
    
    function iecompattest(){
      return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
    }
    
    function clearbrowseredge(obj, whichedge){
      var edgeoffset=0
      if (whichedge=="rightedge"){
        var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
        dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
      if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
        edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth
      } else {
        var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
        dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
      if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure)
        edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight
      }
      return edgeoffset
    }
    
    function populatemenu(what){
      if (ie4||ns6)
        dropmenuobj.innerHTML=what.join("")
    }
    
    
    function dropdownmenu(obj, e, menucontents, menuwidth){
      if (window.event) event.cancelBubble=true
      else if (e.stopPropagation) e.stopPropagation()
        clearhidemenu()
        dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
        populatemenu(menucontents)
    
    if (ie4||ns6){
      showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)
      dropmenuobj.x=getposOffset(obj, "left")
      dropmenuobj.y=getposOffset(obj, "top")
      dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"
      dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"
      hideSelect()
    }
    
    return clickreturnvalue()
    }
    
    function clickreturnvalue(){
    if (ie4||ns6) return false
    else return true
    }
    
    function contains_ns6(a, b) {
      while (b.parentNode)
        if ((b = b.parentNode) == a)
          return true;
          return false;
    }
    
    function dynamichide(e){
      if (ie4&&!dropmenuobj.contains(e.toElement))
        delayhidemenu()
      else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
        delayhidemenu()
    }
    
    function hidemenu(e){
      if (typeof dropmenuobj!="undefined"){
      if (ie4||ns6)
        dropmenuobj.style.visibility="hidden"
        unhideSelect()
      }
    }
    
    function delayhidemenu(){
      if (ie4||ns6)
      delayhide=setTimeout("hidemenu()",disappeardelay)
    }
    
    function clearhidemenu(){
      if (typeof delayhide!="undefined")
        clearTimeout(delayhide)
    }
    
    if (hidemenu_onclick=="yes") {
      document.onclick=hidemenu
      unhideSelect()
    }
    </script>
    Last edited by bfisher; 03-29-2005 at 08:17 PM.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •