PDA

View Full Version : onClick Problems

Sbolton
03-24-2010, 06:55 AM
In a perfect world ... I would like to have the menu display onClick and stay up until another onClick.. (the way i set up the javascript function using document.getElementsByTagName("a"); is not what i needed b/c the top should not be a link just a Onclick spot for the sub nav.


(this is prob a css forum question) how would i get the blue backgrund to be pushed over to the inside of the border when you hover and also break that in to another box right under the main nav so the top of the blue div with dashed border would go right below research resources, services, About the Lib. grey div....

window.onload = initAll;

function initAll() {
var allLinks = document.getElementsByTagName("a");

for (var i=0; i<allLinks.length; i++) {
if (allLinks[i].className.indexOf("menuLink") > -1) {
allLinks[i].onclick = function() {return false;}
allLinks[i].onmouseover = toggleMenu;
}
}
}

function toggleMenu() {
var startMenu = this.href.lastIndexOf("/")+1;
var stopMenu = this.href.lastIndexOf(".");
var thisMenuName = this.href.substring(startMenu,stopMenu);

document.getElementById(thisMenuName).style.display = "block";

this.parentNode.className = thisMenuName;
this.parentNode.onmouseout = toggleDivOff;
this.parentNode.onmouseover = toggleDivOn;
}

function toggleDivOn() {
document.getElementById(this.className).style.display = "block";
}

function toggleDivOff() {
document.getElementById(this.className).style.display = "none";
}




<head>

<link rel="stylesheet" rev="stylesheet" href="script01.css" />
<script type="text/javascript" language="Javascript" src="script01.js">
</script>
</head>
<body>
<div class="mainMenu">
<a href="menu1.htm" class="menuLink">Research Resources</a>
<ul class="menu" id="menu1">
<li><a href="#">Library Catalog</a></li>
<li><a href="#">Library Databases A-Z</a></li>
<li><a href="#">Resources by Subject</a></li>
<li><a href="#">Find Articles</a></li>
<li><a href="#">Find Books</a></li>
<li><a href="#">Find Journals</a></li>
<li><a href="#">Find News &amp; Newspapers</a></li>
</ul>
</div>
<div class="mainMenu">
<a href="menu2.htm" class="menuLink">Services</a>
<ul class="menu" id="menu2">
<li><a href="#">Borrow &amp; Renew</a></li>
<li><a href="#">Reserves</a></li>
<li><a href="#">Interlibrary Loan</a></li>
<li><a href="#">Services for Distance Learners</a></li>
<li><a href="#">Services for Faculty</a></li>

</ul>
</div>
<div class="mainMenu">
<a href="menu3.html" class="menuLink">About the Libraries

</a>
<ul class="menu" id="menu3">
<li><a href="#">Locations &amp; Hours</a></li>
<li><a href="#">Collections</a></li>
<li><a href="#">Special Collections &amp; Archives</a></li>
<li><a href="#">Events, Exhibits &amp; Publications</a></li>
<li><a href="#">Departments &amp; Staff</a></li>
<li><a href="#">Spaces &amp; Places</a></li>
<li><a href="#">Support the Libraries</a></li>
</ul>
</div>
</body>
</html>



body {
background-color: white;
color: black;
}

div {
margin:3px;
width: 200px;
background-color:#33CCFF;
float: left;
text-align:center;
padding:-2px;


}

div .menuLink {

width: 200px;
background-color: grey;
float: left;
text-align:center;
padding:2px;


}

ul.menu {
position:relative;
left:50px;
display: none;
list-style-type: none;
margin: 0;
padding: 0;
border:2px dashed black;


}

ul.menu li {
font: "Times New Roman", helvetica, sans-serif;
padding-left: 10px;
text-align:left;
font-size:14px;


}

a.menuLink, li a {
text-decoration: none;
color: black;

}

a.menuLink {
font-size: 16px;
font-weight: bold;
}

li a:hover {
background-color: #060;
color: white;
}
Dormilich
03-24-2010, 07:54 AM
In a perfect world ... I would like to have the menu display onClick and stay up until another onClick..

this would require capturing a click event, which naturally does not work in IE. however, I’d recommend a CSS only dropdown menu (Suckerfish Dropdown), since that even works with JS disabled.
Sbolton
03-24-2010, 03:41 PM
That would be how i would do it, my problem is i must do it with javascript.. :mad:
Kor
03-24-2010, 04:05 PM
this would require capturing a click event, which naturally does not work in IE.
Doesn't? Give it a try

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
#container{
background-color: #999999;
height: 100px;
width: 100px;
}
table{
background:#99FFCC;
border:none;
width:50px;
}
</style>
<script type="text/javascript">
document.onclick=check;
function check(e){
var target = (e && e.target) || (event && event.srcElement);
var obj = document.getElementById('container');
checkParent(target)?obj.style.display='none':null;
}
function checkParent(t){
while(t.parentNode){
if(t==document.getElementById('container')){
return false
}
t=t.parentNode
}
return true
}
</script>
</head>
<body>
<div id="container">
<table cellpadding="2" cellspacing="1">
<tr>
<td>click</td>
<td>ouside</td>
</tr>
<tr>
<td>to hide</td>
<td>the div</td>
</tr>
</table>
</div>
</body>
</html>