Advanced Search

Results 1 to 6 of 6

Thread: Anylink Drop Down Menu Problem

  1. #1
    Join Date
    Sep 2006
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Anylink Drop Down Menu Problem

    1) Script Title: Anylink Drop Down Menu

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...pmenuindex.htm

    3) Describe problem: I've just tried setting up several drop down menus on a website I'm just starting up - http://kingslynnstars.sitesled.com. I've got two menus working, but when I try adding more, none of them show, not even the ones that were working before!

    Here's the CSS and script that actually work with the current two menus I have:

    Code:
    <style type="text/css">
    
    #dropmenudiv{
    position:absolute;
    border:1px solid #0000C0;
    border-bottom-width:0;
    font-family:tahoma;
    font-size:12px;
    z-index:100;
    font-weight:bold;
    }
    
    #dropmenudiv a{
    width:100%;
    display:block;
    text-indent:3px;
    border-bottom:1px solid #0000C0;
    padding:1px 0;
    text-decoration:none;
    font-weight:bold;
    font-size:12px;
    font-family:tahoma;
    }
    
    #dropmenudiv a:hover{ /*hover background color*/
    background-color:#FFFFC0;
    }
    
    </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://kingslynnstars.sitesled.com/doolan.shtml">Kevin Doolan</a>'
    menu1[1]='<a href="http://kingslynnstars.sitesled.com/batchelor.shtml">Troy Batchelor</a>'
    menu1[2]='<a href="http://kingslynnstars.sitesled.com/harding.shtml">Trevor Harding</a>'
    menu1[3]='<a href="http://kingslynnstars.sitesled.com/nermark.shtml">Daniel Nermark</a>'
    menu1[4]='<a href="http://kingslynnstars.sitesled.com/topinka.shtml">Tomas Topinka</a>'
    menu1[5]='<a href="http://kingslynnstars.sitesled.com/mills.shtml">Chris Mills</a>'
    menu1[6]='<a href="http://kingslynnstars.sitesled.com/oliver.shtml">John Oliver</a>'
    
    //Contents for menu 2
    var menu2=new Array()
    menu2[0]='<a href="http://kingslynnstars.sitesled.com/recentnews.shtml">Recent News</a>'
    menu2[1]='<a href="http://kingslynnstars.sitesled.com/newsarchives.shtml">News Archives</a>'
          
    var menuwidth='165px' //default menu width
    var menubgcolor='FFE773'  //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="-500px"
    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-topedge
    }
    }
    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>

    Here's the other menu codes that I want added into the previous script, that don't actually end up working I might add:

    Code:
    //Contents for menu 3
    var menu3=new Array()
    menu3[0]='<a href="http://smg.photobucket.com/albums/v257/em1500uk/Kings%20Lynn%20Stars%20Speedway">Emma's (Unofficial)</a>'
    menu3[1]='<a href="http://community.webshots.com/user/klstars">Steve's (Official)</a>'
    
    //Contents for menu 4
    var menu4=new Array()
    menu4[0]='<a href="http://starsrus.proboards3.com/index.cgi">Unofficial Fan Forum</a>'
    menu4[1]='<a href="http://speedwayupdates.proboards60.com/index.cgi">Speedway Updates</a>'

    Here's the code where the menu actually is on my page:

    Code:
    <tr>
          <td colspan="3" id="menu" align="center">
          <a href="http://kingslynnstars.sitesled.com/index.shtml"><b>Home</b></a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '150px')" onMouseout="delayhidemenu()"><b>Rider Profiles</b></a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu2, '150px')" onMouseout="delayhidemenu()"><b>News/Archives</b></a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu3, '150px')" onMouseout="delayhidemenu()"><b>Pictures</b></a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu4, '150px')" onMouseout="delayhidemenu()"><b>Forums</b></a>
          </td>
    </tr>

    Why are the new menus not showing up, along with the previously working ones when I add the news ones in?!

  2. #2
    Join Date
    Jul 2006
    Location
    Canada
    Posts
    2,581
    Thanks
    13
    Thanked 28 Times in 28 Posts

    Default

    An element can only have ONE id. Having more than one menu with the id "menu" is invalid.
    - Mike

  3. #3
    Join Date
    Sep 2006
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    So how do I solve my problem exactly? I'm sorry I'm somewhat of a novice at this stuff lol.

  4. #4
    Join Date
    Sep 2006
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hmmmm...

  5. #5
    Join Date
    Sep 2006
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Actually don't worry about it. Problem solved

  6. #6
    Join Date
    Sep 2006
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Actually no maybe not I had it working a little while ago with four menus and now I've added two more on, it's not working again...

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <title>KINGS LYNN "Money Centre" STARS: Premier Trophy Winners 2006</title>
    <link rel="stylesheet" type="text/css"
    href="style.css" />
    <meta name="Generator" content="Alleycode HTML Editor">
    <meta name="Description" content="A fansite for the speedway team from Kings Lynn.">
    <meta name="Keywords" content="em1500uk, kings lynn stars, kings lynn, saddlebow, norfolk arena, premier league, british, speedway, tomas topinka, troy batchelor, daniel nermark, chris mills, john oliver, trevor harding, kevin doolan">
    
    <style type="text/css">
    
    #dropmenudiv{
    position:absolute;
    border:1px solid #0000C0;
    border-bottom-width:0;
    font-family:tahoma;
    font-size:10px;
    z-index:100;
    font-weight:bold;
    }
    
    #dropmenudiv a{
    width:100%;
    display:block;
    text-indent:3px;
    border-bottom:1px solid #0000C0;
    padding:1px 0;
    text-decoration:none;
    font-weight:bold;
    font-size:10px;
    font-family:tahoma;
    }
    
    #dropmenudiv a:hover{ /*hover background color*/
    background-color:#FFFFC0;
    }
    
    </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 riderprofiles
    var riderprofiles=new Array()
    riderprofiles[0]='<a href="http://kingslynnstars.sitesled.com/doolan.shtml">Kevin Doolan</a>'
    riderprofiles[1]='<a href="http://kingslynnstars.sitesled.com/batchelor.shtml">Troy Batchelor</a>'
    riderprofiles[2]='<a href="http://kingslynnstars.sitesled.com/harding.shtml">Trevor Harding</a>'
    riderprofiles[3]='<a href="http://kingslynnstars.sitesled.com/nermark.shtml">Daniel Nermark</a>'
    riderprofiles[4]='<a href="http://kingslynnstars.sitesled.com/topinka.shtml">Tomas Topinka</a>'
    riderprofiles[5]='<a href="http://kingslynnstars.sitesled.com/mills.shtml">Chris Mills</a>'
    riderprofiles[6]='<a href="http://kingslynnstars.sitesled.com/oliver.shtml">John Oliver</a>'
    
    //Contents for news
    var news=new Array()
    news[0]='<a href="http://kingslynnstars.sitesled.com/recentnews.shtml">Recent News</a>'
    news[1]='<a href="http://kingslynnstars.sitesled.com/newsarchives.shtml">News Archives</a>'
    
    //Contents for media
    var media=new Array()
    media[0]='<a href="http://smg.photobucket.com/albums/v257/em1500uk/Kings%20Lynn%20Stars%20Speedway">Emma's Unofficial Photos</a>'
    media[1]='<a href="http://community.webshots.com/user/klstars">Steve's Official Photos</a>'
    media[2]='<a href="http://kingslynnstars.sitesled.com/videos.shtml">Emma's Unofficial Videos</a>'
    
    //Contents for site
    var site=new Array()
    site[0]='<a href="http://kingslynnstars.sitesled.com/about.shtml">About The Webmiss</a>'
    site[1]='<a href="http://kingslynnstars.sitesled.com/credits.shtml">Site Credits</a>'
    site[2]='<a href="http://kingslynnstars.sitesled.com/contact.shtml">Contact</a>'
    
    //Contents for forums
    var forums=new Array()
    forums[0]='<a href="http://starsrus.proboards3.com/index.cgi">Unofficial Fan Forum</a>'
    forums[1]='<a href="http://speedwayupdates.proboards60.com/index.cgi">Speedway Updates</a>'
    
    //Contents for otherlinks
    var otherlinks=new Array()
    otherlinks[0]='<a href="http://kingslynnstars.sitesled.com/officialsites.shtml">Official Sites</a>'
    otherlinks[1]='<a href="http://kingslynnstars.sitesled.com/unofficialsites.shtml">Unofficial Sites</a>'
          
    var menuwidth='165px' //default menu width
    var menubgcolor='FFE773'  //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="-500px"
    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-topedge
    }
    }
    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>
    </head>
    
    <body>
    <table cellspacing="0" cellpadding="0" border="0" align="center" width="60%">
    
    <tr>
          <td colspan="3" id="header">
    <a href="http://kingslynnstars.sitesled.com"><img src="http://www.photosled.com/data/1273/klsheader.jpg" width="550" height="400" border="0" alt=""></a>
          </td>
    </tr>
    
    <tr>
          <td colspan="3" id="emptyrow"></td>
    </tr>
    
    <tr>
          <td colspan="3" id="menu" align="center">
    <a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, riderprofiles, '150px')" onMouseout="delayhidemenu()"><b>Rider Profiles</b></a> // <a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, news, '150px')" onMouseout="delayhidemenu()"><b>News</b></a> // <a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, media, '150px')" onMouseout="delayhidemenu()"><b>Media</b></a> // <a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, site, '150px')" onMouseout="delayhidemenu()"><b>Site</b></a> // <a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, forums, '150px')" onMouseout="delayhidemenu()"><b>Forums</b></a> // <a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, otherlinks, '150px')" onMouseout="delayhidemenu()"><b>Other Links</b></a>
          </td>
    </tr>
    
    <tr>
          <td colspan="3" id="emptyrow"></td>
    </tr>
    
    <tr>      
          <td id="content" valign="top">

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
  •