Results 1 to 4 of 4

Thread: 'Chrome Drop Down Menu' and 'Drop Down Input (Select tag)'

  1. #1
    Join Date
    Oct 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question 'Chrome Drop Down Menu' and 'Drop Down Input (Select tag)'

    Script: Chrome Drop Down Menu
    http://www.dynamicdrive.com/dynamici...rome/index.htm

    I have used this chrome menu successfully on simple web pages. But when I am using this menu on a page where an html form present with a 'select' (drop down menu) tag, the chrome menu go behind the 'select' tag. I mean it cut-of by the form's 'select' tag. I checked this problem occur when I try to view this page by IE6 but in Opera 9, it is correctly displaying over the 'select' tag.

    My mostly of users (visitors) are using IE. So your guide to solve this matter will be highly appreciated.

    Thanks and regards,
    Naveed Ashraf
    Last edited by yourmna; 10-16-2006 at 07:48 AM. Reason: just change in title

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,027
    Thanks
    44
    Thanked 3,210 Times in 3,172 Posts
    Blog Entries
    12

    Default

    Add this function to the very end of the script:

    Code:
    function showHideSelects(view){
    if (document.body.filters){
    var sels=document.getElementsByTagName('select');
    for (var i_tem = 0; i_tem < sels.length; i_tem++)
    sels[i_tem].style.visibility=view;
    }
    }
    Call it here:

    Code:
    showhide:function(obj, e){
    if (this.ie || this.firefox)
    this.dropmenuobj.style.left=this.dropmenuobj.style.top="-500px"
    if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover"){
    if (this.enableswipe==1){
    if (typeof this.swipetimer!="undefined")
    clearTimeout(this.swipetimer)
    obj.clip="rect(0 auto 0 0)" //hide menu via clipping
    this.bottomclip=0
    this.swipeeffect()
    }
    obj.visibility="visible"
    showHideSelects('hidden');
    }
    else if (e.type=="click") {
    obj.visibility="hidden"
    showHideSelects('visible');
    }
    },
    And:

    Code:
    delayhidemenu:function(){
    this.delayhide=setTimeout("cssdropdown.dropmenuobj.style.visibility='hidden';showHideSelects('visible')",this.disappeardelay) //hide menu
    }
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Oct 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    not working. no reaction...

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,027
    Thanks
    44
    Thanked 3,210 Times in 3,172 Posts
    Blog Entries
    12

    Default

    Works here.

    Use this version of chrome.js:

    Code:
    //Chrome Drop Down Menu- Author: Dynamic Drive (http://www.dynamicdrive.com)
    //Last updated: June 14th, 06'
    
    var cssdropdown={
    disappeardelay: 250, //set delay in miliseconds before menu disappears onmouseout
    disablemenuclick: true, //when user clicks on a menu item with a drop down menu, disable menu item's link?
    enableswipe: 1, //enable swipe effect? 1 for yes, 0 for no
    
    //No need to edit beyond here////////////////////////
    dropmenuobj: null, ie: document.all, firefox: document.getElementById&&!document.all, swipetimer: undefined, bottomclip:0,
    
    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;
    },
    
    swipeeffect:function(){
    if (this.bottomclip<parseInt(this.dropmenuobj.offsetHeight)){
    this.bottomclip+=10+(this.bottomclip/10) //unclip drop down menu visibility gradually
    this.dropmenuobj.style.clip="rect(0 auto "+this.bottomclip+"px 0)"
    }
    else
    return
    this.swipetimer=setTimeout("cssdropdown.swipeeffect()", 10)
    },
    
    showhide:function(obj, e){
    if (this.ie || this.firefox)
    this.dropmenuobj.style.left=this.dropmenuobj.style.top="-500px"
    if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover"){
    if (this.enableswipe==1){
    if (typeof this.swipetimer!="undefined")
    clearTimeout(this.swipetimer)
    obj.clip="rect(0 auto 0 0)" //hide menu via clipping
    this.bottomclip=0
    this.swipeeffect()
    }
    obj.visibility="visible"
    showHideSelects('hidden');
    }
    else if (e.type=="click"){
    obj.visibility="hidden"
    showHideSelects('visible');
    }
    },
    
    iecompattest:function(){
    return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
    },
    
    clearbrowseredge:function(obj, whichedge){
    var edgeoffset=0
    if (whichedge=="rightedge"){
    var windowedge=this.ie && !window.opera? this.iecompattest().scrollLeft+this.iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
    this.dropmenuobj.contentmeasure=this.dropmenuobj.offsetWidth
    if (windowedge-this.dropmenuobj.x < this.dropmenuobj.contentmeasure)  //move menu to the left?
    edgeoffset=this.dropmenuobj.contentmeasure-obj.offsetWidth
    }
    else{
    var topedge=this.ie && !window.opera? this.iecompattest().scrollTop : window.pageYOffset
    var windowedge=this.ie && !window.opera? this.iecompattest().scrollTop+this.iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
    this.dropmenuobj.contentmeasure=this.dropmenuobj.offsetHeight
    if (windowedge-this.dropmenuobj.y < this.dropmenuobj.contentmeasure){ //move up?
    edgeoffset=this.dropmenuobj.contentmeasure+obj.offsetHeight
    if ((this.dropmenuobj.y-topedge)<this.dropmenuobj.contentmeasure) //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.dropmenuobj.style.visibility="hidden" //hide menu
    this.clearhidemenu()
    if (this.ie||this.firefox){
    obj.onmouseout=function(){cssdropdown.delayhidemenu()}
    obj.onclick=function(){return !cssdropdown.disablemenuclick} //disable main menu item link onclick?
    this.dropmenuobj=document.getElementById(dropmenuID)
    this.dropmenuobj.onmouseover=function(){cssdropdown.clearhidemenu()}
    this.dropmenuobj.onmouseout=function(){cssdropdown.dynamichide(e)}
    this.dropmenuobj.onclick=function(){cssdropdown.delayhidemenu()}
    this.showhide(this.dropmenuobj.style, 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"
    }
    },
    
    contains_firefox:function(a, b) {
    while (b.parentNode)
    if ((b = b.parentNode) == a)
    return true;
    return false;
    },
    
    dynamichide:function(e){
    var evtobj=window.event? window.event : e
    if (this.ie&&!this.dropmenuobj.contains(evtobj.toElement))
    this.delayhidemenu()
    else if (this.firefox&&e.currentTarget!= evtobj.relatedTarget&& !this.contains_firefox(evtobj.currentTarget, evtobj.relatedTarget))
    this.delayhidemenu()
    },
    
    delayhidemenu:function(){
    this.delayhide=setTimeout("cssdropdown.dropmenuobj.style.visibility='hidden';showHideSelects('visible')",this.disappeardelay) //hide menu
    },
    
    clearhidemenu:function(){
    if (this.delayhide!="undefined")
    clearTimeout(this.delayhide)
    },
    
    startchrome:function(){
    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")
    menuitems[i].onmouseover=function(e){
    var event=typeof e!="undefined"? e : window.event
    cssdropdown.dropit(this,event,this.getAttribute("rel"))
    }
    }
    }
    }
    }
    
    }
    
    function showHideSelects(view){
    if (document.body.filters){
    var sels=document.getElementsByTagName('select');
    for (var i_tem = 0; i_tem < sels.length; i_tem++)
    sels[i_tem].style.visibility=view;
    }
    }
    Oh, but you cannot have the focus on the select, if you do, the menus will not drop down. No way around that.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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
  •