Page 1 of 1

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

Posted: Sun Jul 23, 2006 9:22 pm
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?

Posted: Sun Jul 23, 2006 9:25 pm
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.

Posted: Sun Jul 23, 2006 9:27 pm
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.

Posted: Sun Jul 23, 2006 9:33 pm
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>

Posted: Sun Jul 23, 2006 10:25 pm
by JAB Creations
Couldn't we do something like...

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

and then use setTimeout?

Posted: Sun Jul 23, 2006 10:45 pm
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.

Posted: Sun Jul 23, 2006 10:49 pm
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.

Posted: Sun Jul 23, 2006 10:58 pm
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?

Posted: Sun Jul 23, 2006 11:51 pm
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.

Posted: Mon Jul 24, 2006 2:29 pm
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);}

Posted: Mon Jul 24, 2006 3:12 pm
by Burrito
see my post above, you'll need to do a little searching for those methods I listed for you...

Posted: Mon Jul 24, 2006 6:38 pm
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. :?

Posted: Mon Jul 24, 2006 6:44 pm
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)});
}