Change class if element and children have no focus or hover?

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
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?

Post by JAB Creations »

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?
User avatar
Burrito
Spockulator
Posts: 4715
Joined: Wed Feb 04, 2004 8:15 pm
Location: Eden, Utah

Post by Burrito »

look at setTimeout() or setInterval()...the former would probably be better suited for what you're trying to do unless you want it to be a recurring event.
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Post by JAB Creations »

I have no clue how to go about creating this type of script. I've got my nose in a JavaScript book looking at some of the stuff people used in previous posts though.
User avatar
Burrito
Spockulator
Posts: 4715
Joined: Wed Feb 04, 2004 8:15 pm
Location: Eden, Utah

Post by Burrito »

well as a sample,

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>
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Post by JAB Creations »

Couldn't we do something like...

<form action="" onblur="formblue(myTimeout);">

and then use setTimeout?
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Post by JAB Creations »

Ok, I've tried this but without success...
function blurchange(id, newClass)
{
myTimeout = window.setTimeout(function() {document.getElementById(id).className=newClass;}, 400);
}
<form onblur="blurchange('signin', 'prompt');"
I get no errors or anything at all.
User avatar
Burrito
Spockulator
Posts: 4715
Joined: Wed Feb 04, 2004 8:15 pm
Location: Eden, Utah

Post by Burrito »

I'm not 100% sure on this, but I don't think that form is an element that takes focus per se. Therefore it really wouldn't be blurred.

there are elements within a form that can take focus, but the form itself I believe does not.
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Post by JAB Creations »

You're correct...
http://www.w3.org/TR/xhtml-modularizati ... entsmodule

Also the validator agrees with you. :P

I suppose this will be an onmouseout event...
<form onmouseout="blurchange('signin', 'prompt');">
function blurchange(id, newClass)
{
myTimeout = window.setTimeout(function() {document.getElementById(id).className=newClass;}, 1400);
}
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?
User avatar
Burrito
Spockulator
Posts: 4715
Joined: Wed Feb 04, 2004 8:15 pm
Location: Eden, Utah

Post by Burrito »

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?
that's correct...you'll have to write a function that checks the browser type and uses 'toElement' for IE and 'relatedTarget' for FF.

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 :P

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.
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Post by JAB Creations »

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?
function blurchange(id, newClass)
{
window.setTimeout(function()
{document.getElementById(id).className=newClass;}, 3000);}
User avatar
Burrito
Spockulator
Posts: 4715
Joined: Wed Feb 04, 2004 8:15 pm
Location: Eden, Utah

Post by Burrito »

see my post above, you'll need to do a little searching for those methods I listed for you...
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Post by JAB Creations »

I've relentlessly searched for cancelBubble and stoppropagation and I can't say I've learned very much from what I've found. I haven't seen any examples that relate except for an example script on MS developer's site and it's implementation was confusing. :?
User avatar
Burrito
Spockulator
Posts: 4715
Joined: Wed Feb 04, 2004 8:15 pm
Location: Eden, Utah

Post by Burrito »

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)});
}
Post Reply