PDA

View Full Version : any links drop down menu errors



cpshipman
05-14-2007, 04:56 PM
1) Script Title: any links drop down menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.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>

Veronica
05-14-2007, 05:08 PM
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.

cpshipman
05-14-2007, 05:39 PM
Fixed that, but it's still giving me the same errors.

Thanks!

Veronica
05-14-2007, 06:23 PM
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:


<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



<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>