Change class if element and children have no focus or hover?
Moderator: General Moderators
- JAB Creations
- DevNet Resident
- Posts: 2341
- Joined: Thu Jan 13, 2005 6:44 pm
- Location: Sarasota Florida
- Contact:
Change class if element and children have no focus or hover?
Ok IoI I've got one more challenge. There is a sign-in form the the other scripts I wrote about are directly related to. Now to finish off it's natural behavior to the human tendency I'd like to make the form element hide by itself after a timeout if it (or it's child elements) have no focus or hover. There is of course something they can move their mouse over to unhide the form if they knock the mouse away for longer then lets say, four seconds?
- JAB Creations
- DevNet Resident
- Posts: 2341
- Joined: Thu Jan 13, 2005 6:44 pm
- Location: Sarasota Florida
- Contact:
well as a sample,
you might try something like this:
(untested)
you might try something like this:
(untested)
Code: Select all
<script>
function startHide(obj)
{
setTimeout("hideIt(obj)",3000) // 3000 is miliseconds so that's 3 seconds
}
function hideIt(obj)
{
obj.style.display = 'none';
}
</script>
<div onMouseOut="startHide(this)">blah</div>- JAB Creations
- DevNet Resident
- Posts: 2341
- Joined: Thu Jan 13, 2005 6:44 pm
- Location: Sarasota Florida
- Contact:
- JAB Creations
- DevNet Resident
- Posts: 2341
- Joined: Thu Jan 13, 2005 6:44 pm
- Location: Sarasota Florida
- Contact:
- JAB Creations
- DevNet Resident
- Posts: 2341
- Joined: Thu Jan 13, 2005 6:44 pm
- Location: Sarasota Florida
- Contact:
You're correct...
http://www.w3.org/TR/xhtml-modularizati ... entsmodule
Also the validator agrees with you.
I suppose this will be an onmouseout event...
http://www.w3.org/TR/xhtml-modularizati ... entsmodule
Also the validator agrees with you.
I suppose this will be an onmouseout event...
<form onmouseout="blurchange('signin', 'prompt');">
However it simply hides the form regardless of the fact that it is still being hovered. I assume once the mouse moves over a child element that this counts as no longer being over the form regardless that the form is the parent?function blurchange(id, newClass)
{
myTimeout = window.setTimeout(function() {document.getElementById(id).className=newClass;}, 1400);
}
that's correct...you'll have to write a function that checks the browser type and uses 'toElement' for IE and 'relatedTarget' for FF.JAB Creations wrote:I assume once the mouse moves over a child element that this counts as no longer being over the form regardless that the form is the parent?
I would help you do it, but I can't remember the syntax for both off the top of my head...I just remember the property names
if you really get stuck with it, I'll try and find some examples I've written in the past tomorrow to help you with it.
edit: after a little more careful thought, I think what you'll need is cancelBubble and stopPropagataion...not what I listed above...sry.
- JAB Creations
- DevNet Resident
- Posts: 2341
- Joined: Thu Jan 13, 2005 6:44 pm
- Location: Sarasota Florida
- Contact:
This works ~BUT~ it does NOT take CHILD elements in to consideration!
So while the mouse may be over the form if it goes over an input within the form it executes the script! How do we prevent that?
So while the mouse may be over the form if it goes over an input within the form it executes the script! How do we prevent that?
function blurchange(id, newClass)
{
window.setTimeout(function()
{document.getElementById(id).className=newClass;}, 3000);}
- JAB Creations
- DevNet Resident
- Posts: 2341
- Joined: Thu Jan 13, 2005 6:44 pm
- Location: Sarasota Florida
- Contact:
this is something I wrote a while back for a drop-down menu using css...it's not exactly what you're looking for, but the same principle applies:
Code: Select all
function showLeftVizzy(obj,e)
{
navvy = document.getElementById('somediv');
navvy.style.left = lef + "px";
navvy.style.top = topz + 30 + "px";
if (window.event)
event.cancelBubble=true;
else if (e.stopPropagation)
e.stopPropagation();
navvy.style.display = "block";
//obj.onmouseout=hideLeftVizzy;
navvy.onmouseover=clearhidemenu;
navvy.onmouseout = (ie ? function(){ dynamichide(event)} : function(event){ dynamichide(event)});
}