Results 1 to 4 of 4

Thread: AnyClick Drop Down not working

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

    Unhappy AnyClick Drop Down not working

    I'm trying to get the Any Click drop down menu to work on my site. I'm working with geocities pagebuilder, but originally when I tested out the pre-written script on my site it worked just fine. After I went through and filled in my own information, I couldn't get it to work anymore.

    I'm getting the text links to the menu, but when I mouseover or click I don't get a drop down menu.


    Any suggestions? (I have tried pasting all of the following information into the head section of my page, and I've also tried pasting the hrefs seperately in an inserted html code box (which is a pagebuilder thing).

    Here is my code: (I have not yet specified the reference links)

    <style type="text/css">

    #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: white;
    }

    </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.eloramoon.com">About Mark</a>'
    menu1[1]='<a href="http://www.eloramoon.com">About Amber</a>'
    menu1[2]='<a href="http://www.eloramoon.com">How We Met</a>'
    menu1[3]='<a href="http://www.eloramoon.com">Photo Gallery</a>'

    //Contents for menu 2, and so on
    var menu2=new Array()
    menu2[0]='<a href="http://www.eloramoon.com">The Proposal ~ Mark's Version</a>'
    menu2[1]='<a href="http://www.eloramoon.com">The Proposal ~ Amber's Version</a>'
    menu2[2]='<a href="http://www.eloramoon.com">Photo Gallery</a>'

    //Contents for menu 3, and so on
    var menu3=new Array()
    menu3[0]='<a href="http://www.eloramoon.com">Event Overview</a>'
    menu3[1]='<a href="http://www.eloramoon.com">Cast of Characters</a>'
    menu3[2]='<a href="http://www.eloramoon.com">Ceremony Details</a>'
    menu3[3]='<a href="http://www.eloramoon.com">Reception Details</a>'
    menu3[4]='<a href="http://www.eloramoon.com">Guest Information</a>'

    //Contents for menu 4, and so on
    var menu4=new Array()
    menu4[0]='<a href="http://www.eloramoon.com">Engagement Party</a>'
    menu4[1]='<a href="http://www.eloramoon.com">Bridal Shower</a>'
    menu4[2]='<a href="http://www.eloramoon.com">Bachelor Party</a>'
    menu4[3]='<a href="http://www.eloramoon.com">Rehearsal Dinner</a>'
    menu4[4]='<a href="http://www.eloramoon.com">Wedding Day Itinerary</a>'

    //Contents for menu 5, and so on
    var menu5=new Array()
    menu5[0]='<a href="http://www.eloramoon.com">Updates</a>'
    menu5[1]='<a href="http://www.eloramoon.com">Contact Information</a>'
    menu5[2]='<a href="http://www.eloramoon.com">FAQ</a>'
    menu5[3]='<a href="http://www.eloramoon.com">Guest Information</a>'
    menu5[4]='<a href="http://www.eloramoon.com">Sign our Guestbook</a>'


    var menuwidth='165px' //default menu width
    var menubgcolor='white' //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>



    <a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '150px')" onMouseout="delayhidemenu()">Our Story</a> |

    <a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu2, '150px')" onMouseout="delayhidemenu()">Our Engagement</a> |

    <a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu3, '150px')" onMouseout="delayhidemenu()">Pre-Wedding Events</a> |

    <a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu4, '150px')" onMouseout="delayhidemenu()">The Wedding</a> |

    <a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu5, '150px')" onMouseout="delayhidemenu()">Other Information</a> |

    Here is the link to the test page with all of the above pasted into the head script: www.eloramoon.com/test1

    Here it is with the href links placed in a seperate html box (a pagebuilder feature): www.eloramoon.com/test2

  2. #2
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    Escape apostrophes.
    ' should become \' .

    I'm sure this is in an FAQ somewhere... I was about to link you, but I can't find it now.
    /EDIT: Ah, here she is. http://www.dynamicdrive.com/help.htm#4
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends français | entiendo español | tôi ít hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

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

    Default

    The problem and solution is very simple it looks like from reading your source code: your link code for this script which I pasted below is in the <head> tag of your web page and it needs to be put in the <body> tag of your page. It's just a matter of cutting and pasting it into that area using Notepad or with text edit mode or the "insert html" function of whatever page builder you are using. If you open your page in a web browser (for example Internet Explorer and then click View then Source from that menu) you will see the code for your page and what I am referring to). I have this dynamic drive menu installed on my webpage http://ambushrollerhockey.com if you want to look at the source code to see how its set up (but the page code is a bit long and hard to browse through). Some page builders also allow you to view and edit the source code as well in this text only format. If you can't afford Dreamweaver or FrontPage, you can download Mozilla Composer (www.mozilla.org) which is free along with Firefox browser and which allows you to edit your page as either a text editor or visual editor. If yours does allow text edit mode then just cut and paste this code below from your <head> tag into your <body> tag:

    <a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '150px')" onMouseout="delayhidemenu()">Our Story</a> |

    <a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu2, '150px')" onMouseout="delayhidemenu()">Our Engagement</a> |

    <a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu3, '150px')" onMouseout="delayhidemenu()">Pre-Wedding Events</a> |

    <a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu4, '150px')" onMouseout="delayhidemenu()">The Wedding</a> |

    <a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu5, '150px')" onMouseout="delayhidemenu()">Other Information</a> |

  4. #4
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    Oh, certainly. You should never put visible data in the head. It's for page info and script/style definitions.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends français | entiendo español | tôi ít hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

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
  •