Forum Moderators: open
I want to add a timeout for div.example...so when it (or any of it's children) have no focus or hover states for say five seconds, it changes the class then (instead of instantly).
Here is what I have right now...
<?xml version="1.0" encoding="iso-8859-1"?>
<!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" xml:lang="en">
<head>
<title>example</title>
<style type="text/css">
.hideme {
display: none;
}
div.example {
border: #f0f solid 1px;
}
</style>
<script type="text/javascript">
//<![CDATA[
function change(id, newClass)
{
identity=document.getElementById(id);
identity.className=newClass;
}
//]]>
</script>
</head><body>
<div><a href="#" onmouseout="change('example', 'example');">mouseover to bring div back</a></div>
<div class="example" id="example" onmouseover="change('example', 'hideme');">
<span>example</span>
</div></body>
</html>
Here we go...
<?xml version="1.0" encoding="iso-8859-1"?>
<!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" xml:lang="en">
<head>
<title>example</title>
<style type="text/css">
.hideme {
display: none;
}
div.example {
border: #f0f solid 1px;
}
</style>
<script type="text/javascript">
//<![CDATA[
function blurchange(id, newClass)
{
myTimeout = window.setTimeout(function() {document.getElementById(id).className=newClass;}, 1400);
}
//]]>
</script>
</head><body>
<div><a href="#" blurchange('example', 'hideme');">mouseover to bring div back</a></div>
<div class="example" id="example" onmouseover="change('example', 'hideme');">
<span>example</span>
</div></body>
</html>
- John
