eloramoon
08-04-2005, 04:19 PM
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
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