drop down navigation errors

•

What is DaniWeb IT Discussion Community?

You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 330,120 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 4,026 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.

Join our community!

•

FAQ | Community Rules | Welcome Guide

Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting

Thread Tools Display Modes

Views: 202 | Replies: 0

•

Join Date: May 2008

Posts: 1

Reputation: usagiyuri is an unknown quantity at this point

Rep Power: 0

Solved Threads: 0

usagiyuri

Offline

Newbie Poster

drop down navigation errors

10 Days Ago

Hello,

Im having trouble getting a button to link to a banquet page, I know its probably somethign simple but i cant seem to figure it out

DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

 Help with Code Tags 
 javascript Syntax (Toggle Plain Text) 
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style type="text/css">
 
/* Sample CSS definition for the example list. Remove if desired */
.dropmenudiv{
position:absolute;
background-color:#99CDFF;
border:1px solid #04255A;
font:bold 16px timesnewroman;
color:#04255A;
line-height:25px;
z-index:100;
text-align:center;
}
 
.dropmenudiv a{
display: block;
text-indent: 1px;
border: 1px solid #04255A;
padding: 0px 2;
text-decoration: none;
font-weight: bold;
color:#04255A;
text-align:center;
}
 
.dropmenudiv a:hover{ /*hover background color*/
background-color: #99CDFF;
display: block;
text-indent: 1px;
border-bottom: 1px solid #04255A;
padding: 0px 2;
text-decoration: none;
font-weight: bold;
color:#04255A;
}
.navlist
{
font-family:verdana;
font-weight:bold;
font-size:12px;
color: #a4a4a4;
line-height:25px;
text-decoration:none;
}
.navlist a:hover
{
	font-family:Sans Serif;
	font-weight:bold;
	font-size:12px;
	color: #ff0000;
	line-height:25px;
	text-decoration:none;
}
 
.anylinkcss{
position:absolute;
visibility: hidden;
border:1px solid gray;
border-bottom-width: 0;
font:normal 11px Sans Serif;
line-height: 18px;
z-index: 100;
background-color: white;
width: 205px;
}
 
.anylinkcss a{
color: black;
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid gray;
padding: 1px 0;
text-decoration: none;
font-weight: bold;
text-indent: 5px;
}
 
.anylinkcss a:hover{ /*hover background color*/
background-color: #F8FBBD;
color: black;
}
</style>
 
 
 
<script language="javascript">
var disappeardelay=250  //menu disappear speed onMouseout (in miliseconds)
var enableanchorlink=0 //Enable or disable the anchor link when clicked on? (1=e, 0=d)
var hidemenu_onclick=1 //hide menu when user clicks within menu? (1=yes, 0=no)
var horizontaloffset=1 //horizontal offset of menu from default location. (0-5 is a 
 
good value)
 
/////No further editting needed
 
var ie5=document.all
var ns6=document.getElementById&&!document.all
 
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){
if (ie5||ns6)
dropmenuobj.style.left=dropmenuobj.style.top=-500
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=ie5 && !window.opera? 
 
iecompattest().scrollLeft+iecompattest().clientWidth-15 : 
 
window.pageXOffset+window.innerWidth-15
dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
if (windowedge-dropmenuobj.x-obj.offsetWidth < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure+obj.offsetWidth+(horizontaloffset*2) //no space 
 
to the right of page? Move menu over to the left
}
else{
var topedge=ie5 && !window.opera? iecompattest().scrollTop : window.pageYOffset
var windowedge=ie5 && !window.opera? 
 
iecompattest().scrollTop+iecompattest().clientHeight-15 : 
 
window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move menu up?
edgeoffset=dropmenuobj.contentmeasure-obj.offsetHeight
if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either? (position 
 
at top of viewable window then)
edgeoffset=dropmenuobj.y
}
}
return edgeoffset
}
function dropdownmenu(obj, e, dropmenuID){
document.getElementById("cssexamples").style.color = "#ff0000";
if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
if (typeof dropmenuobj!="undefined") //hide previous menu
dropmenuobj.style.visibility="hidden"
clearhidemenu()
if (ie5||ns6){
obj.onmouseout=delayhidemenu
dropmenuobj=document.getElementById(dropmenuID)
if (hidemenu_onclick) 
 
dropmenuobj.onclick=function(){dropmenuobj.style.visibility='hidden'}
dropmenuobj.onmouseover=clearhidemenu
dropmenuobj.onmouseout=ie5? function(){ dynamichide(event)} : function(event){ 
 
dynamichide(event)}
showhide(dropmenuobj.style, e, "visible", "hidden")
dropmenuobj.x=getposOffset(obj, "left")
dropmenuobj.y=getposOffset(obj, "top")
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, 
 
"rightedge")+obj.offsetWidth+horizontaloffset+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+"px"
}
return clickreturnvalue()
}
 
function clickreturnvalue(){
if ((ie5||ns6) && !enableanchorlink) 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 (ie5&&!dropmenuobj.contains(e.toElement))
delayhidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, 
 
e.relatedTarget))
delayhidemenu()
}
 
function delayhidemenu(){
delayhide=setTimeout("dropmenuobj.style.visibility='hidden'",disappeardelay)
document.getElementById("cssexamples").style.color = "#a4a4a4";
}
 
function clearhidemenu(){
if (typeof delayhide!="undefined")
clearTimeout(delayhide)
}
</script>
</HEAD>
 
<BODY>
 
<table border=0 cellspacing=0 cellpadding=0>
  <tr>
           <td><a href="index.html"><img border="0" 
 
src="_images/home.jpg"></a></td></tr>
<tr>
           <td><a href="officers.html"><img border="0" 
 
src="_images/officers.jpg"></a></td></tr>
 
<tr>
	<td><a href="amalgamates.html"><img border="0" 
 
src="_images/amalgamate.jpg"></a></td>
</tr>
 
<tr>
           <td><a href="negotiation.html"><img border="0" 
 
src="_images/negotiation.jpg"></a></td></tr>
 
<tr>
           <td><a style="text-decoration: none;color:#a4a4a4;"  
 
onMouseover="dropdownmenu(this, event, 'anylinkmenu1')" href="banquet.html" 
 
onClick="return clickreturnvalue()" id="cssexamples"><img border="0" 
 
src="_images/banguet.jpg"></a></td></tr>
 
<tr>
           <td><a href="contactus.html"><img border="0" 
 
src="_images/contact.jpg"></a></td></tr>
</table>   
 
<div id="anylinkmenu1" class="dropmenudiv" style="width: 180px;visibility:hidden;">
<a href="caterers.html">Caterers</a>
<a href="pictures.html">Pictures</a>
<a href="directions.html">Directions</a>
</div>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style type="text/css">

/* Sample CSS definition for the example list. Remove if desired */
.dropmenudiv{
position:absolute;
background-color:#99CDFF;
border:1px solid #04255A;
font:bold 16px timesnewroman;
color:#04255A;
line-height:25px;
z-index:100;
text-align:center;
}

.dropmenudiv a{
display: block;
text-indent: 1px;
border: 1px solid #04255A;
padding: 0px 2;
text-decoration: none;
font-weight: bold;
color:#04255A;
text-align:center;
}

.dropmenudiv a:hover{ /*hover background color*/
background-color: #99CDFF;
display: block;
text-indent: 1px;
border-bottom: 1px solid #04255A;
padding: 0px 2;
text-decoration: none;
font-weight: bold;
color:#04255A;
}
.navlist
{
font-family:verdana;
font-weight:bold;
font-size:12px;
color: #a4a4a4;
line-height:25px;
text-decoration:none;
}
.navlist a:hover
{
	font-family:Sans Serif;
	font-weight:bold;
	font-size:12px;
	color: #ff0000;
	line-height:25px;
	text-decoration:none;
}

.anylinkcss{
position:absolute;
visibility: hidden;
border:1px solid gray;
border-bottom-width: 0;
font:normal 11px Sans Serif;
line-height: 18px;
z-index: 100;
background-color: white;
width: 205px;
}

.anylinkcss a{
color: black;
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid gray;
padding: 1px 0;
text-decoration: none;
font-weight: bold;
text-indent: 5px;
}

.anylinkcss a:hover{ /*hover background color*/
background-color: #F8FBBD;
color: black;
}
</style>



<script language="javascript">
var disappeardelay=250  //menu disappear speed onMouseout (in miliseconds)
var enableanchorlink=0 //Enable or disable the anchor link when clicked on? (1=e, 0=d)
var hidemenu_onclick=1 //hide menu when user clicks within menu? (1=yes, 0=no)
var horizontaloffset=1 //horizontal offset of menu from default location. (0-5 is a 

good value)

/////No further editting needed

var ie5=document.all
var ns6=document.getElementById&&!document.all

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){
if (ie5||ns6)
dropmenuobj.style.left=dropmenuobj.style.top=-500
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=ie5 && !window.opera? 

iecompattest().scrollLeft+iecompattest().clientWidth-15 : 

window.pageXOffset+window.innerWidth-15
dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
if (windowedge-dropmenuobj.x-obj.offsetWidth < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure+obj.offsetWidth+(horizontaloffset*2) //no space 

to the right of page? Move menu over to the left
}
else{
var topedge=ie5 && !window.opera? iecompattest().scrollTop : window.pageYOffset
var windowedge=ie5 && !window.opera? 

iecompattest().scrollTop+iecompattest().clientHeight-15 : 

window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move menu up?
edgeoffset=dropmenuobj.contentmeasure-obj.offsetHeight
if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either? (position 

at top of viewable window then)
edgeoffset=dropmenuobj.y
}
}
return edgeoffset
}
function dropdownmenu(obj, e, dropmenuID){
document.getElementById("cssexamples").style.color = "#ff0000";
if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
if (typeof dropmenuobj!="undefined") //hide previous menu
dropmenuobj.style.visibility="hidden"
clearhidemenu()
if (ie5||ns6){
obj.onmouseout=delayhidemenu
dropmenuobj=document.getElementById(dropmenuID)
if (hidemenu_onclick) 

dropmenuobj.onclick=function(){dropmenuobj.style.visibility='hidden'}
dropmenuobj.onmouseover=clearhidemenu
dropmenuobj.onmouseout=ie5? function(){ dynamichide(event)} : function(event){ 

dynamichide(event)}
showhide(dropmenuobj.style, e, "visible", "hidden")
dropmenuobj.x=getposOffset(obj, "left")
dropmenuobj.y=getposOffset(obj, "top")
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, 

"rightedge")+obj.offsetWidth+horizontaloffset+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+"px"
}
return clickreturnvalue()
}

function clickreturnvalue(){
if ((ie5||ns6) && !enableanchorlink) 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 (ie5&&!dropmenuobj.contains(e.toElement))
delayhidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, 

e.relatedTarget))
delayhidemenu()
}

function delayhidemenu(){
delayhide=setTimeout("dropmenuobj.style.visibility='hidden'",disappeardelay)
document.getElementById("cssexamples").style.color = "#a4a4a4";
}

function clearhidemenu(){
if (typeof delayhide!="undefined")
clearTimeout(delayhide)
}
</script>
</HEAD>

<BODY>

<table border=0 cellspacing=0 cellpadding=0>
  <tr>
           <td><a href="index.html"><img border="0" 

src="_images/home.jpg"></a></td></tr>
<tr>
           <td><a href="officers.html"><img border="0" 

src="_images/officers.jpg"></a></td></tr>
	
<tr>
	<td><a href="amalgamates.html"><img border="0" 

src="_images/amalgamate.jpg"></a></td>
</tr>

<tr>
           <td><a href="negotiation.html"><img border="0" 

src="_images/negotiation.jpg"></a></td></tr>
	
<tr>
           <td><a style="text-decoration: none;color:#a4a4a4;"  

onMouseover="dropdownmenu(this, event, 'anylinkmenu1')" href="banquet.html" 

onClick="return clickreturnvalue()" id="cssexamples"><img border="0" 

src="_images/banguet.jpg"></a></td></tr>

<tr>
           <td><a href="contactus.html"><img border="0" 

src="_images/contact.jpg"></a></td></tr>
</table>   
                                                    
<div id="anylinkmenu1" class="dropmenudiv" style="width: 180px;visibility:hidden;">
<a href="caterers.html">Caterers</a>
<a href="pictures.html">Pictures</a>
<a href="directions.html">Directions</a>
</div>
</BODY>
</HTML>