Results 1 to 6 of 6

Thread: AnyLink Drop Down Menu

  1. #1
    Join Date
    Aug 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default AnyLink Drop Down Menu

    HI,
    I am super new to this.

    http://www.dynamicdrive.com/dynamici...pmenuindex.htm

    I have copied the script into the right places, it all works perfectly except for one thing.

    I have set up my pages to have frames. There is a header frame for the site title, a middle frame about the height of the text and the main frame below with the information.

    The problem I have is the script is in the middle frame, when I hover on a link instead of the menu dropping down over the lower frame, it goes up and is hidden by the upper frame.

    How can I fix this to be "on top" of other frames and to also drop down instead of up.

    Thanks
    Last edited by madmagna; 08-02-2005 at 11:59 AM.

  2. #2
    Join Date
    Jul 2005
    Location
    Kuwait-I'm American
    Posts
    127
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Could you give us a url so we can see exactly what your problem is?
    //\\ //\\// || //\\//\\ //\\ ||_
    SOFTWARE

  3. #3
    Join Date
    Aug 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks,
    The site is
    http://madmagna.atspace.com/pages/eccsamain.htm

    I have just uploaded a basic page, have not changed the script in any way until I can get this sorted.

    The effect I want is for the menu to drop down over the lower frame and still remain "on top" so all likns can be seen.

    Thanks again

  4. #4
    Join Date
    Jul 2005
    Location
    Kuwait-I'm American
    Posts
    127
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Code:
    <style type="text/css">
    
    #dropmenudiv{
    position:absolute;
    border:1px solid black;
    font:normal 12px Verdana;
    line-height:18px;
    z-index:100;
    }
    
    #dropmenudiv a{
    width: 100%;
    display: block;
    text-indent: 3px;
    }
    
    #dropmenudiv a:hover{ /*hover background color*/
    background-color: yellow;
    }
    
    </style>
    
    
    <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
    ***********************************************/
    
    //Contents for menu 1
    var menu1=new Array()
    menu1[0]='<a href="http://www.javascriptkit.com">JavaScript Kit</a>'
    menu1[1]='<a href="http://www.freewarejava.com">Freewarejava.com</a>'
    menu1[2]='<a href="http://codingforums.com">Coding Forums</a>'
    menu1[3]='<a href="http://www.cssdrive.com">CSS Drive</a>'
    
    //Contents for menu 2, and so on
    var menu2=new Array()
    menu2[0]='<a href="http://cnn.com">CNN</a>'
    menu2[1]='<a href="http://msnbc.com">MSNBC</a>'
    menu2[2]='<a href="http://news.bbc.co.uk">BBC News</a>'
    		
    var menuwidth='165px' //default menu width
    var menubgcolor='lightyellow'  //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, "bottom")
    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
    
    </script>
    this way, the menu will open down, not up. (just change the contant)
    //\\ //\\// || //\\//\\ //\\ ||_
    SOFTWARE

  5. #5
    Join Date
    Aug 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks for that, will give that a go.

    Will this also allow the menu to stay on top of the lower frame instead of being hidden by it

    Thanks again

  6. #6
    Join Date
    Aug 2005
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default problem with frames for AnyLink Drop Down Menu

    Aloha,
    Having a similar problem with the one mentioned above, frames using AnyLink Drop Down Menu for navigation. I also have several frames on the page, and the menu I'm referring to (Online Course: Lessons) has appx 22 options to choose from, which makes it quite long. It needs to come to the top of the screen and be viewed over the three frames where it is located. I tried the fix suggested above, but it only moved the menu up in regards to length. It showed the bottom of the list of options, rather than bringing it to the top of all windows.
    The page can be viewed here: Alphabet Angel
    Thank you in advance for your assistance
    Here is the script:
    Code:
    #dropmenudiv{
    position:absolute;
    border:1px solid black;
    border-bottom-width: 0;
    font:normal 12px Verdana;
    line-height:18px;
    z-index:100;
    }
    
    #dropmenudiv a{
    width: 100%;
    display: block;
    text-indent: 3px;
    border-bottom: 1px solid black;
    padding: 1px 0;
    text-decoration: none;
    font-weight: bold;
    }
    
    #dropmenudiv a:hover{ /*hover background color*/
    background-color: yellow;
    }
    
    -->
    </style>
    
    <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
    ***********************************************/
    
    //Contents for menu 1, Lessons
    var menu1=new Array()
    menu1[0]='<a href="../lessons.html" target="content">Lesson Sign-up</a>'
    menu1[1]='<a href="lessons/aleph.html" target="content">Aleph (Aa)</a>'
    menu1[2]='<a href="lessons/bet.html" target="content">Bet (Bb)</a>'
    menu1[3]='<a href="lessons/gimel.html" target="content">Gimel (Cc)</a>'
    menu1[4]='<a href="lessons/dalet.html" target="content">Dalet (Dd)</a>'
    menu1[5]='<a href="lessons/hei.html" target="content">Hei (Ee)</a>'
    menu1[6]='<a href="lessons/vav.html" target="content">Vav (Ff)</a>'
    menu1[7]='<a href="lessons/zain.html" target="content">Zain (Gg)</a>'
    menu1[8]='<a href="lessons/cheth.html" target="content">Cheth (Hh)</a>'
    menu1[9]='<a href="lessons/tet.html" target="content">Tet (Jj)</a>'
    menu1[10]='<a href="lessons/yod.html" target="content">Yod (Ii)</a>'
    menu1[11]='<a href="lessons/kaf.html" target="content">Kaf (Kk, Uu)</a>'
    menu1[12]='<a href="lessons/lamed.html" target="content">Lamed (Ll)</a>'
    menu1[13]='<a href="lessons/mem.html" target="content">Mem (Mm, Ww)</a>'
    menu1[14]='<a href="lessons/nun.html" target="content">Nun (Nn)</a>'
    menu1[15]='<a href="lessons/samech.html" target="content">Samech (Xx)</a>'
    menu1[16]='<a href="lessons/ayin.html" target="content">Ayin (Oo)</a>'
    menu1[17]='<a href="lessons/pey.html" target="content">Pey (Pp, Vv)</a>'
    menu1[18]='<a href="lessons/tzadi.html" target="content">Tzadi (Yy, Zz)</a>'
    menu1[19]='<a href="qoph.html" target="content">Qoph (Qq)</a>'
    menu1[20]='<a href="lessons/resh.html" target="content">Resh (Rr)</a>'
    menu1[21]='<a href="lessons/shin.html" target="content">Shin (Ss)</a>'
    menu1[22]='<a href="lessons/tav.html" target="content">Tav (Tt)</a>'
    
    //Contents for menu 2, and so on, Teachings
    var menu2=new Array()
    menu2[0]='<a href="../spirit_alph.html" target="content">Spirituality of the Alphabet</a>'
    menu2[1]='<a href="../handwriting.html" target="content">Power of Handwriting</a>'
    menu2[2]='<a href="../grid.html" target="_blank">Alphabet Grid</a>'
    menu2[3]='<a href="../news_article.html" target="content">Kauai Island News Article</a>'
    
    var menuwidth='165px' //default menu width
    var menubgcolor='lightyellow'  //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 topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset
    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){ //move up?
    edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight
    if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either?
    edgeoffset=dropmenuobj.y+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
    // -->
    </SCRIPT>
    -----------
    and in the document:
    <a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '150px')"
    onMouseout="delayhidemenu()"
    Jennifer

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
  •