Broken onmouseout

[unemployment]

This function fails.  I want to set the onmouseout to have a delay of 500 milliseconds

 

comp_list.onmouseout = window.setTimeout(function (){
	 if (hasClass(comp_list, 'block'))
	 {
		 removeClass(comp_list, 'block');
		 removeClass(comp_drop, 'active');
	 }
 }, 500);

[jcanker]

Define "fails."  Does it throw an error?  Does it not wait?  Does it wait too long?  What is it doing that it shouldn't, or not doing that it should?

[unemployment]

Define "fails."  Does it throw an error?  Does it not wait?  Does it wait too long?  What is it doing that it shouldn't, or not doing that it should?

 

It does not remove the classes nor does it seem to be issuing the millisecond delay.

[jcanker]

Have you tried with an alert to ensure that you're entering the loop in the first place?

[unemployment]

Have you tried with an alert to ensure that you're entering the loop in the first place?

 

My alert doesn't issue an error, plus... my text editor doesn't like the syntax so it must be a syntax error.  Any other way to write this?

[jcanker]

No, what I meant was to use the alert() function inside the if statement to notify you when you're entering the condition.

 

If you're getting a syntax error, that would be it, but it could be a missed closing quote, parenthetical, semicolon, etc earlier in the code.  This particular snippet shows up fine in ExpressionWeb 4 without any syntax error.  If your editor is color-coded then you can get a better gauge as to where it goes off the rails.

 

Change your code to:

comp_list.onmouseout = window.setTimeout(function (){
    if (hasClass(comp_list, 'block'))
   {			 
        alert("We're entering into the if hasClass statement");
        removeClass(comp_list, 'block');
        removeClass(comp_drop, 'active');
    }	 
}, 500);

That will let you know whether it if statement is evaluating to true and entering the conditional or not.  When it's working, just remove the alert() statement. 

[unemployment]

No, what I meant was to use the alert() function inside the if statement to notify you when you're entering the condition.

 

If you're getting a syntax error, that would be it, but it could be a missed closing quote, parenthetical, semicolon, etc earlier in the code.  This particular snippet shows up fine in ExpressionWeb 4 without any syntax error.  If your editor is color-coded then you can get a better gauge as to where it goes off the rails.

 

Change your code to:

comp_list.onmouseout = window.setTimeout(function (){
    if (hasClass(comp_list, 'block'))
   {			 
        alert("We're entering into the if hasClass statement");
        removeClass(comp_list, 'block');
        removeClass(comp_drop, 'active');
    }	 
}, 500);

That will let you know whether it if statement is evaluating to true and entering the conditional or not.  When it's working, just remove the alert() statement.

 

the if is not issuing the alert. Below is my entire script which only breaks on the onmouseout event.  The commented onmouseout event works, but it just does not have the delay.

 

addOnload(function()
{	
var comp_drop = document.getElementById('comp_drop');
var comp_list = document.getElementById('comp_list');

comp_drop.onclick = function (){
	if (hasClass(this, 'active'))
	{
		removeClass(this, 'active');
		removeClass(comp_list, 'block');
	} 
	else
	{
		addClass(this, 'active');
		addClass(comp_list, 'block');
	}
	return false
}

comp_drop.onmouseover = function (){
	if (!hasClass(this, 'active'))
	{
		addClass(this, 'active');
		addClass(comp_list, 'block');
	} 
}

comp_list.onmouseover = function (){
	if (!hasClass(this, 'block'))
	{
		addClass(this, 'block');
		addClass(comp_drop, 'active');
	} 
}

 comp_list.onmouseout = window.setTimeout(function (){
     if (hasClass(comp_list, 'block'))
    {         
         alert("We're entering into the if hasClass statement");
         removeClass(comp_list, 'block');
         removeClass(comp_drop, 'active');
     }   
 }, 500);

//comp_list.onmouseout =function (){
//		if (hasClass(comp_list, 'block'))
//	{
//		removeClass(comp_list, 'block');
//		removeClass(comp_drop, 'active');
//	}
//}

});

[jcanker]

Earlier you said it wasn't removing the classes.  Is it removing the classes or not?

[unemployment]

Earlier you said it wasn't removing the classes.  Is it removing the classes or not?

 

No the onmouseout is not removing the class.

[jcanker]

Below is my entire script which only breaks on the onmouseout event.  The commented onmouseout event works, but it just does not have the delay.

No the onmouseout is not removing the class.

 

Please understand, I'm trying hard to help you, but you have to help me help you, which includes being clear about symptoms and willing to follow troubleshooting advice.

 

With your code, if it's not removing the classes, then it's probably not entering that portion of the if/else statement.  PLEASE PLACE AN ALERT() STATEMENT IN THE IF EVALUATION BLOCK AS I REQUESTED EARLIER.  Run the code and test the mouse out behavior.  If you get the alert window popping up with the coded message and it's still not removing the classes, that's a completely different symptom.  First we have to ensure that it's entering the IF block. 

[unemployment]

Below is my entire script which only breaks on the onmouseout event.  The commented onmouseout event works, but it just does not have the delay.

No the onmouseout is not removing the class.

 

Please understand, I'm trying hard to help you, but you have to help me help you, which includes being clear about symptoms and willing to follow troubleshooting advice.

 

With your code, if it's not removing the classes, then it's probably not entering that portion of the if/else statement.  PLEASE PLACE AN ALERT() STATEMENT IN THE IF EVALUATION BLOCK AS I REQUESTED EARLIER.  Run the code and test the mouse out behavior.  If you get the alert window popping up with the coded message and it's still not removing the classes, that's a completely different symptom.  First we have to ensure that it's entering the IF block.

 

Well I almost fixed the issue.  Review the code below.  I now have different issue.  First, this function is for a drop down and when you leave the drop down I want a 500 millisecond delay.  The problem I am now having is that the function executes while I am still hovered over the drop down.  I only want the timer to start after I leave the drop down list.

 

As a result, my alert should only execute when I leave the drop down.  (The alert will be removed once it is working)

 

comp_list.onmouseout=function(){
     setTimeout(function (){
           alert("function entered")
           if (hasClass(comp_list, 'block'))
            {
               alert("hasClass satisified")
               removeClass(comp_list, 'block');
               removeClass(comp_drop, 'active');
            }
         }, 3500);
     }

[KevinM1]

EDIT: What element is comp_list?  And what's its relationship to comp_drop?  I'm thinking there's an event bubbling issue at play here.

[unemployment]

EDIT: What element is comp_list?  And what's its relationship to comp_drop?  I'm thinking there's an event bubbling issue at play here.

 

comp_drop is the drop down arrow and comp_list is the info in the drop down menu.  HTML is below

 

<li class="marr">
<a href="../clng.php">Company Settings<div id="comp_drop" class="menu_arr_down">&#9660;</div></a>
<dl id="comp_list">
	<dt></dt>
	<dd class="bbs"><a href="clanding.php">Show all</a></dd>
	<dd class="first"><a href="../csings.php?c=ign">ign</a></dd>   
	<dd class="last"><a href="../csings.php?c=pr">Pr</a></dd>   
</dl>								
</li>

[KevinM1]

When you say 'hovered over the drop down', do you mean the mouseout effect is running when you're still hovering on comp_list, or comp_drop?

[unemployment]

When you say 'hovered over the drop down', do you mean the mouseout effect is running when you're still hovering on comp_list, or comp_drop?

 

Yes, it runs when I am still hovering / mousingover comp_list

[KevinM1]

Hmm... it could be, like I said before, an event bubbling issue.  http://www.quirksmode.org/js/events_order.html