Clearing color on Mouse Out [Archive]

JNeal33

04-18-2010, 03:39 AM

As you hover over the menu/title tabs the selected colors change and reset like i want them to but when you completely move the mouse off the menu/title tabs (on to the white of the page where the text would be) the color of the last menu/title tab the mouse was on stays that color (red, yellow, or blue) instead of reseting to grey. You guys are the best and always find a solution. Here is my code: HTML, JavaScript, then CSS (in that order) Thank you guys, i would appreciate any tips or help..

Jake

p.s. you guys have already done some work in my code, if u could glance to see if i gave you guys the credit correctly

HTML CODE:

<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>The 221B Blog</title>
<link href="final.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="final.js"></script>

</head>

<body>

<div id="page">

<div id="menu1" class="menu">
<a href="#">The Return of Sherlock Holmes</a> 
</div>
<div id="menu1List" class="menuList"> 
<ul>
<li class="listItem"><a href="#">The Empty House</a></li>
<li class="listItem"><a href="#">The Norwood Builder</a></li>
<li class="listItem"><a href="#">The Dancing Men</a></li>
<li class="listItem"><a href="#">The Solitary Cyclist</a></li>
<li class="listItem"><a href="#">The Priory School</a></li>
<li class="listItem"><a href="#">Black Peter</a></li>
</ul>
</div>

<div id="menu2" class="menu">
<a href="#">The Return of Sherlock Holmes</a> 
</div>
<div id="menu2List" class="menuList"> 
<ul>
<li class="listItem"><a href="#">The Empty House</a></li>
<li class="listItem"><a href="#">The Norwood Builder</a></li>
<li class="listItem"><a href="#">The Dancing Men</a></li>
<li class="listItem"><a href="#">The Solitary Cyclist</a></li>
<li class="listItem"><a href="#">The Priory School</a></li>
</ul>
</div>

<div id="menu3" class="menu">
<a href="#">The Return of Sherlock Holmes</a> 
</div>
<div id="menu3List" class="menuList"> 
<ul>
<li class="listItem"><a href="#">The Empty House</a></li>
<li class="listItem"><a href="#">The Norwood Builder</a></li>
<li class="listItem"><a href="#">The Dancing Men</a></li>
<li class="listItem"><a href="#">The Solitary Cyclist</a></li>
<li class="listItem"><a href="#">The Priory School</a></li>
</ul>
</div>
</div>

</body>
</html>

JavaScript Code

// script done by "http://www.dynamicdrive.com/
// 04-14-2010, 11:35 AM
// author: vwphillips "Senior Coder"

window.onload = init;

var activeMenu = null;
var clipHgt = 0;
var timeID,timeID2;

function init() {
var menus = new Array();
var allElems = document.getElementsByTagName("*");

for (var i = 0; i < allElems.length; i++) {
if (allElems[i].className == "menu") menus.push(allElems[i]);
}

for (var obj,i = 0; i < menus.length; i++) {
menus[i].onmouseover = changeMenu;
menus[i].onmouseout = function(){ MseOut(); } // script done by "http://www.dynamicdrive.com/ author 04-14-2010, 11:35 AM vwphillips Senior Coders
menus[i].onclick = closeOldMenu;
obj=document.getElementById(menus[i].id+'List'); // script done by "http://www.dynamicdrive.com/"
obj.onmouseout = function(){ MseOut(); } // script done by "http://www.dynamicdrive.com/"
obj.onmouseover = function(){ clearTimeout(timeID2);} // script done by "http://www.dynamicdrive.com/"
}
}

function MseOut() { // script done by "http://www.dynamicdrive.com/"
if (activeMenu) { // script done by "http://www.dynamicdrive.com/"
timeID2 = setTimeout(function(){activeMenu.style.display = "none"; }, 200) // script done by "http://www.dynamicdrive.com/"
}
}

function changeMenu() {
// this function changes the pull-down menu displayed in the document, and to change the color of the title

clearInterval(timeID); // script done by "http://www.dynamicdrive.com/"
clearInterval(timeID2); // script done by "http://www.dynamicdrive.com/"
closeOldMenu();

//finds the menu#list and send the list info to function rollDown()
menuID = this.id + "List";
colorID = this; //getting the current "menu" that is being hovered
activeMenu = document.getElementById(menuID);
activeMenu.style.clip = "rect(0px, 150px, 0px, 0px)";
activeMenu.style.display = "block";
timeID = setInterval("rollDown()", 1);

var colorMenu = new Array(); //making a new array for the colors
var allElems = document.getElementsByTagName("*");

for (var i = 0; i < allElems.length; i++) { //putting all the class names with menu "aka all my title tabs" in the colorMenu Array
if (allElems[i].className == "menu") colorMenu.push(allElems[i]);
}

if (colorID == colorMenu[0] && timeID > 0) { //if colorID "aka Menu" equals number in the colorMenu Array, it turns red
colorMenu[1].style.backgroundColor = "rgb(212, 212, 212)";
colorMenu[2].style.backgroundColor = "rgb(212, 212, 212)";
colorMenu[0].style.backgroundColor = "red";
}
if (colorID == colorMenu[1] && timeID > 0) { //if colorID "aka Menu" equals number in the colorMenu Array, it turns yellow
colorMenu[0].style.backgroundColor = "rgb(212, 212, 212)";
colorMenu[2].style.backgroundColor = "rgb(212, 212, 212)";
colorMenu[1].style.backgroundColor = "yellow";
}
if (colorID == colorMenu[2] && timeID > 0) { //if colorID "aka Menu" equals number in the colorMenu Array, it turns blue
colorMenu[0].style.backgroundColor = "rgb(212, 212, 212)";
colorMenu[1].style.backgroundColor = "rgb(212, 212, 212)";
colorMenu[2].style.backgroundColor = "blue";
}

}

// to simple close the any menu that's active
function closeOldMenu() {
if (activeMenu) {
clearInterval(timeID);
activeMenu.style.display = "none";
activeMenu = null;
}
}

// controls the speed of the rolldown effect of the selected menu#List
function rollDown() {
clipHgt = clipHgt + 10;
if (clipHgt < 400) {
activeMenu.style.clip = "rect(0px, 150px," + clipHgt + "px, 0px)";
} else {
clearInterval(timeID);
clipHgt = 0;
}
}

CSS Code:

* {padding: 0px; margin: 0px; line-height: 1.2}

body {background-color: white; font-family: 'Trebuchet MS', Arial, Verdana, sans-serif; font-size: 12px;
cursor:url(".cur");}

ul {list-style-type: none}

ul a {color: black; text-decoration: none}

#page {width: 1000px}

.menu {position:absolute; top: 0px; width: 140px; height: 35px; z-index: 3;
border: 1px solid black; color: black; background-color: rgb(212, 212, 212);
text-align: center}

.menu a {display: block; width: 140px; height: 35px; color: black; text-decoration: none}

.menu a:hover {color: white; text-decoration: none}

#menu1 {left: 0px}
#menu2 {left: 141px}
#menu3 {left: 282px}

.menuList {position: absolute; top: 36px; width: 140px; z-index: 2;
border: 1px solid black; display: none}
.listItem {text-align: center}
.menuList a {display: block; width: 132px}
.menuList a:hover {color: white}

#menu1List {left: 0px; background-color: red}
#menu2List {left: 141px; background-color: yellow}
#menu3List {left: 282px; background-color: blue}

vwphillips

04-18-2010, 11:34 AM