Results 1 to 4 of 4

Thread: any links drop down menu errors

  1. #1
    Join Date
    May 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default any links drop down menu errors

    1) Script Title: any links drop down menu

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

    3) Describe problem: I am able to load the first 2 menues, but when I enter the 3rd menu i receive errors on the page and the first two won't work any more. I am using Frontpage. Here is my script. Can anyone please help?




    <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: lightgreen;
    }

    </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.crosspointsumter.org/ministries.htm">Ministries Home</a>'
    menu1[1]='<a href="http://www.crosspointsumter.org/men.htm">Men</a>'
    menu1[2]='<a href="http://www.crosspointsumter.org/women.htm">Women</a>'
    menu1[3]='<a href="http://www.crosspointsumter.org/children.htm">Children</a>'
    menu1[4]='<a href="http://www.crosspointsumter.org/youth.htm">Youth</a>'
    menu1[5]='<a href="http://www.crosspointsumter.org/seniors.htm">Seniors</a>'
    menu1[6]='<a href="http://www.crosspointsumter.org/missions.htm">Missions</a>'
    menu1[7]='<a href="http://www.crosspointsumter.org/music.htm">Music</a>'
    menu1[8]='<a href="http://www.crosspointsumter.org/prayer.htm">Prayer</a>'
    menu1[9]='<a href="http://www.crosspointsumter.org/recreation.htm">Recreation</a>'
    menu1[10]='<a href="http://www.crosspointsumter.org/GROW.htm">G.R.O.W.</a>'




    //Contents for menu 2,
    var menu2=new Array()
    menu2[0]='<a href="http://www.crosspointsumter.org/about_us.htm">Who We Are</a>'
    menu2[1]='<a href="http://www.crosspointsumter.org/services.htm">Services</a>'
    menu2[2]='<a href="http://www.crosspointsumter.org/contact_us.htm">Contact Us</a>'




    //Contents for menu 3,
    var menu3=new Array()
    menu3[0]='<a href="http://www.crosspointsumter.org/upcoming_events.htm">What's Happening</a>'
    menu3[1]='<a href="http://www.crosspointsumter.org/bulletin.htm">Bulletin</a>'
    menu3[2]='<a href="http://www.crosspointsumter.org/newsletter.htm">Newsletter</a>'
    menu3[3]='<a href="http://www.crosspointsumter.org/calendar.htm">Calendar</a
    menu3[4]='<a href="http://www.crosspointsumter.org/wednesday.htm">Wednesdays</a
    menu3[5]='<a href="http://www.crosspointsumter.org/links.htm">Links</a


    //Contents for menu 4,
    var menu4=new Array()
    menu4[0]='<a href="http://www.crosspointsumter.org/i'm_new.htm">I'm New</a>'
    menu4[1]='<a href="http://www.crosspointsumter.org/services.htm">Directions</a>'










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

  2. #2
    Join Date
    Feb 2007
    Posts
    293
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    In the last three links for menu 3, you're missing the closing bracket and the single quote that should be in the </a> tag

    I think Frontpage has some way for you to edit in html view, so you can change it there.

  3. #3
    Join Date
    May 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Fixed that, but it's still giving me the same errors.

    Thanks!

  4. #4
    Join Date
    Feb 2007
    Posts
    293
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    OK, first you need to rename the page for new people so it doesn't have an apostrophe. Call it new.htm

    Then, you need to re-write your links in the body section. Don't use font tags. Instead put the style for the links in your stylesheet, and re-write your links like:
    Code:
    <a href="index.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '150px')" onMouseout="delayhidemenu()">HOME</a> |
    <a href="ministries.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu2, '150px')" onMouseout="delayhidemenu()">MINISTRIES</a> |
    <a href="about_us.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu3, '150px')" onMouseout="delayhidemenu()">WHO
          WE ARE</a> |
    <a href="upcoming_events.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu4, '150px')" onMouseout="delayhidemenu()">WHAT'S
          HAPPENING</a> |
    <a href="staff.htm">STAFF</a> |
    <a href="new.htm">I'M NEW</a> |
    <a href="how_to_get_saved.htm">???</a>
    Finally, in the javascript, you can't use apostrophes in the names of your links. You need to either change the name of the link or comment out the apostrophe. So your code would be

    Code:
    <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&#37;;
    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: lightgreen;
    }
    
    </style>
    
    <script type="text/javascript">
    
    /***********************************************
    * AnyLink Drop Down Menu- &#169; 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.crosspointsumter.org/ministries.htm">Ministries Home</a>'
    menu1[1]='<a href="http://www.crosspointsumter.org/men.htm">Men</a>'
    menu1[2]='<a href="http://www.crosspointsumter.org/women.htm">Women</a>'
    menu1[3]='<a href="http://www.crosspointsumter.org/children.htm">Children</a>'
    menu1[4]='<a href="http://www.crosspointsumter.org/youth.htm">Youth</a>'
    menu1[5]='<a href="http://www.crosspointsumter.org/seniors.htm">Seniors</a>'
    menu1[6]='<a href="http://www.crosspointsumter.org/missions.htm">Missions</a>'
    menu1[7]='<a href="http://www.crosspointsumter.org/music.htm">Music</a>'
    menu1[8]='<a href="http://www.crosspointsumter.org/prayer.htm">Prayer</a>'
    menu1[9]='<a href="http://www.crosspointsumter.org/recreation.htm">Recreation</a>'
    menu1[10]='<a href="http://www.crosspointsumter.org/GROW.htm">G.R.O.W.</a>'
    
    
    
    
    //Contents for menu 2,
    var menu2=new Array()
    menu2[0]='<a href="http://www.crosspointsumter.org/about_us.htm">Who We Are</a>'
    menu2[1]='<a href="http://www.crosspointsumter.org/services.htm">Services</a>'
    menu2[2]='<a href="http://www.crosspointsumter.org/contact_us.htm">Contact Us</a>'
    
    
    
    
    //Contents for menu 3,
    var menu3=new Array()
    menu3[0]='<a href="http://www.crosspointsumter.org/upcoming_events.htm">What\'s Happening</a>'
    menu3[1]='<a href="http://www.crosspointsumter.org/bulletin.htm">Bulletin</a>'
    menu3[2]='<a href="http://www.crosspointsumter.org/newsletter.htm">Newsletter</a>'
    menu3[3]='<a href="http://www.crosspointsumter.org/calendar.htm">Calendar</a>'
    menu3[4]='<a href="http://www.crosspointsumter.org/wednesday.htm">Wednesdays</a>'
    menu3[5]='<a href="http://www.crosspointsumter.org/links.htm">Links</a>'
    
    
    //Contents for menu 4,
    var menu4=new Array()
    menu4[0]='<a href="http://www.crosspointsumter.org/new.htm">I am New</a>'
    menu4[1]='<a href="http://www.crosspointsumter.org/services.htm">Directions</a>'
    
    
    
    
    
    
    
    
    
    	
    var menuwidth='165px' //default menu width
    var menubgcolor='lightblue'  //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>
    Last edited by Veronica; 05-14-2007 at 08:04 PM.

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
  •