Been searching for an answer to this but no luck yet...
I have a navbar with items that look like this :
<div id="nav_abou" class="navbarnorm" onClick='document.getElementById("nav_abou_text").click()'>
<a id="nav_abou_text" class="navbarnorm" href=http://www.codingforums.com/archive/index.php/http://www.codingforums.com/archive/index.php/"index.jsp?sec=About">About</a>
</div>
As it is any user of Firefox or Mozilla will have to click the text inside the <a></a> tags to make it work. The link text covers only about half the width of the navbar (its 130px). I'd like set off the link if the user clicks anywhere in that parent div.
Any ideas?
Thanks much
Will
If you need it, here is a more complete example of the navbar as it is :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>A test</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href=http://www.codingforums.com/archive/index.php/"britthaven.css" type="text/css">
<script language="javascript" type="text/javascript">
function fGetMenuBackgroundColor() {
return '#000080'
}
function fGetMenuForegroundColor() {
return '#FFFF00'
}
function fMenuMouseOver(objMenuItem) {
objMenuItem.style.color=fGetMenuBackgroundColor();
objMenuItem.style.backgroundColor=fGetMenuForegroundColor();
objMenuItem.style.fontWeight='bold';
objMenuItemText = document.getElementById(objMenuItem.id+"_text");
if (objMenuItemText) {
objMenuItemText.style.color=fGetMenuBackgroundColor();
objMenuItemText.style.backgroundColor=fGetMenuForegroundColor();
objMenuItemText.style.fontWeight='bold';
}
}
function fMenuMouseOut(objMenuItem) {
objMenuItem.style.color=fGetMenuForegroundColor();
objMenuItem.style.backgroundColor=fGetMenuBackgroundColor();
objMenuItem.style.fontWeight='normal';
objMenuItemText = document.getElementById(objMenuItem.id+"_text");
if (objMenuItemText) {
objMenuItemText.style.color=fGetMenuForegroundColor();
objMenuItemText.style.backgroundColor=fGetMenuBackgroundColor();
objMenuItemText.style.fontWeight='normal';
}
}
function fGetSubmenuBackgroundColor() {
return '#FFFFFF'
}
function fGetSubmenuForegroundColor() {
return '#000000'
}
function fSubmenuMouseOver(objMenuItem) {
objMenuItem.style.color=fGetSubmenuBackgroundColor();
objMenuItem.style.backgroundColor=fGetSubmenuForegroundColor();
objMenuItemText = document.getElementById(objMenuItem.id+"_text");
if (objMenuItemText) {
objMenuItemText.style.color=fGetSubmenuBackgroundColor();
objMenuItemText.style.backgroundColor=fGetSubmenuForegroundColor();
}
}
function fSubmenuMouseOut(objMenuItem) {
objMenuItem.style.color=fGetSubmenuForegroundColor();
objMenuItem.style.backgroundColor=fGetSubmenuBackgroundColor();
objMenuItemText = document.getElementById(objMenuItem.id+"_text");
if (objMenuItemText) {
objMenuItemText.style.color=fGetSubmenuForegroundColor();
objMenuItemText.style.backgroundColor=fGetSubmenuBackgroundColor();
}
}
function fSubmenuToggle(objSubmenuItem) {
if (objSubmenuItem.style.display != "none") {
objSubmenuItem.style.display = "none";
} else {
var arystrSubmenuList = new Array("nav_sub_faci");//, "nav_sub_serv", "nav_sub_care");
for (var intSMKnt=0; intSMKnt<arystrSubmenuList.length; intSMKnt++) {
document.getElementById(arystrSubmenuList[intSMKnt]).style.display = "none";
}
objSubmenuItem.style.display = "";
}
}
</script>
<style>
.navbarnorm{
text-decoration: none;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 20px;
background: #000080;
color: #FFFF00;
width: 130px;
cursor:pointer;
padding-top: 3px;
padding-bottom: 3px;
}
.navbarsub{
text-decoration: none;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
background: #FFFFFF;
color: #000000;
width: 100px;
cursor:pointer;
padding-top: 1px;
padding-bottom: 1px;
}
</style>
</head>
<body>
<table width="130px" cellpadding="0" cellspacing="1" border="0">
<tr><td>
<div id="nav_faci" class="navbarnorm" onMouseOver='fMenuMouseOver(document.getElementById("nav_faci"))' onMouseOut='fMenuMouseOut(document.getElementById("nav_faci"))' onClick='fSubmenuToggle(document.getElementById("nav_sub_faci"))'> Facilities</div>
</td></tr>
<tr><td>
<span id="nav_sub_faci" >
<table width="100%" border="0" cellpadding="0" cellspacing="1">
<tr>
<td> </td>
<td>
<div id="nav_sub_faci_sr" class="navbarsub" onMouseOver='fSubmenuMouseOver(document.getElementById("nav_sub_faci_sr"))' onMouseOut='fSubmenuMouseOut(document.getElementById("nav_sub_faci_sr"))' onClick='document.getElementById("nav_sub_faci_sr_text").click()'>
<a id="nav_sub_faci_sr_text" class="navbarsub" href=http://www.codingforums.com/archive/index.php/"index.jsp?sec=Search">Search</a>
</div>
</td>
</tr><tr>
<td> </td>
<td>
<div id="nav_sub_faci_fm" class="navbarsub" onMouseOver='fSubmenuMouseOver(document.getElementById("nav_sub_faci_fm"))' onMouseOut='fSubmenuMouseOut(document.getElementById("nav_sub_faci_fm"))' onClick='document.getElementById("nav_sub_faci_fm_text").click()'>
<a id="nav_sub_faci_fm_text" class="navbarsub" href=http://www.codingforums.com/archive/index.php/"index.jsp?sec=FacMon&fac=BTN74&xinfo=yes">Facility of the Month</a>
</div>
</td>
</tr>
</table>
</span>
</td></tr>
<tr><td>
<div id="nav_abou" class="navbarnorm" onMouseOver='fMenuMouseOver(document.getElementById("nav_abou"))' onMouseOut='fMenuMouseOut(document.getElementById("nav_abou"))' onClick='document.getElementById("nav_abou_text").click()'>
<a id="nav_abou_text" class="navbarnorm" href=http://www.codingforums.com/archive/index.php/http://www.codingforums.com/archive/index.php/"index.jsp?sec=About">About</a>
</div>
</td></tr>
<tr><td><span id="nav_sub_abou" style="display: none"></span></td></tr>
</table>
</body>
</html>
hemebond
02-03-2005, 11:36 PM
<style type="text/css">
#menu a
{
display:block;
}
</style>
http://www.codingforums.com/showpost.php?p=34847&postcount=7
WillGibson
02-04-2005, 12:34 AM
Many thanks for the help friends!
Got it going now :thumbsup: