Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 25
  1. #1
    Senior Coder
    Join Date
    May 2004
    Posts
    1,441
    Thanks
    15
    Thanked 0 Times in 0 Posts

    dropdown under select

    I am using dropdown menus found at www.dynamicdrive.com

    My problem is that if there is a select box on top of the page then the menu dropdown shows under the select box instead of over.

    Anything to do about this?

  • #2

  • #3
    Senior Coder
    Join Date
    May 2004
    Posts
    1,441
    Thanks
    15
    Thanked 0 Times in 0 Posts
    so the only working solution is to put the menu in an iframe?
    Is that correct?

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Or use JS to make the select menu display:none; when the menu is hovered over.

  • #5
    Senior Coder
    Join Date
    May 2004
    Posts
    1,441
    Thanks
    15
    Thanked 0 Times in 0 Posts
    how would i do that?
    it sounds easier then the iframe

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Which drop down menu are you using?
    Last edited by _Aerospace_Eng_; 12-19-2005 at 07:44 AM.

  • #7
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,946
    Thanks
    0
    Thanked 236 Times in 233 Posts
    There is a sample code for the iframe shim techique.

  • #8
    Senior Coder
    Join Date
    May 2004
    Posts
    1,441
    Thanks
    15
    Thanked 0 Times in 0 Posts
    from dynamic drive

    Code:
    <script type="text/javascript">
    
    /***********************************************
    * 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
    ***********************************************/
    
    
    
    var menu1=new Array()
    menu1[0]='<a href="admin.asp?cmd=city">Cities</a>'
    menu1[1]='<a href="admin.asp?cmd=neighborhood">Neighborhood</a>'
    menu1[2]='<a href="admin.asp?cmd=state">State</a>'
    menu1[3]='<a href="admin.asp?cmd=country">Country</a>'
    menu1[4]='<a href="admin.asp?cmd=nameofprogram">Name of Program</a>'
    menu1[5]='<a href="admin.asp?cmd=changeinterviewers">Interviewers</a>'
    menu1[6]='<a href="admin.asp?cmd=changecontactperson">Contact Person</a>'
    menu1[7]='<a href="admin.asp?cmd=changenationality">Nationality</a>'
    menu1[8]='<a href="admin.asp?cmd=changelanguage">Language</a>'
    var menu2=new Array()
    menu2[0]='<a href="admin.asp?cmd=tentativeregrep">Tentative Placement registrants</a>'
    var menu3=new Array()
    
    menu3[0]='<a href="admin.asp?cmd=searchme">Search </a>'
    menu3[1]='<a href="admin.asp?cmd=addparticipant">Add </a>'
    menu3[2]='<a href="admin.asp?cmd=viewparticipant">View </a>'
    
    
    var menuwidth='250px' //default menu width
    var menubgcolor='#99CCFF'  //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
    
    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
    else if (e.type=="click")
    obj.visibility=hidden
    }
    
    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"
    }
    
    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"
    }
    }
    function delayhidemenu(){
    if (ie4||ns6)
    delayhide=setTimeout("hidemenu()",disappeardelay)
    }
    
    function clearhidemenu(){
    if (typeof delayhide!="undefined")
    clearTimeout(delayhide)
    }
    
    if (hidemenu_onclick=="yes")
    document.onclick=hidemenu

  • #9
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,465
    Thanks
    3
    Thanked 494 Times in 481 Posts

  • #10
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Code:
    function delayhidemenu(){
    delayhide=setTimeout("dropmenuobj.style.visibility='hidden'",disappeardelay);
    document.getElementById('menu').style.visibility='visible';
    }
    
    function clearhidemenu(){
    if (typeof delayhide!="undefined")
    clearTimeout(delayhide)
    document.getElementById('menu').style.visibility='hidden';
    }
    Make the changes in bold to the corresponding functions in your script, then add this to your select menu open tag.
    Code:
    id="menu"

  • #11
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The iframe solution is much better though, because it's graceful - it only affects the any select element that's actually relevant, whereas the hiding technique hides all of them every time, even if they're only partially covered, or indeed, nowhere near the menu. It's much more brutal and more disconcerting; the iframe technique is subtle, so I would definitely recommend it as the best way.

    And the iframe doesn't imply any difference in the way your content is managed - you don't have to put anything in the iframe, just use it like a layer - like a sheet of plastic between two bits of glass.
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #12
    Senior Coder
    Join Date
    May 2004
    Posts
    1,441
    Thanks
    15
    Thanked 0 Times in 0 Posts
    aerospace:
    I actaully liked your code - it is easier and cleaner then the iframe but I have a problem that if a specific page does not have a select box then I get an error. (i have the menu on all pages)

    Is there anyway to do on error resume next in javascript?

  • #13
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    The other members in this thread make a valid point. The iframe is the better solution. You don't want to do it because its more work. Don't be the lazy one.

  • #14
    Senior Coder
    Join Date
    May 2004
    Posts
    1,441
    Thanks
    15
    Thanked 0 Times in 0 Posts
    okay so please clarify --
    what exactly goes in the iframe?

    I'm not clear.

  • #15
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Nothing. Its just there, look at the examples that have been given to you. vwphillips answered a recent post with the same menu you are using implented into the code using the iframe method.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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