Scriptaculous & onMouseOver/onMouseOut

I'm experiencing some problems with scriptaculous and onmouseover/onmouseout for divs within table cells. What is happening is that when the div appears when the mouse is hovered over the table cell, and then the mouse is hovered over the div within the cell, the image in that div begins to flicker, simulating the Appear and Fade effects simultaneously. Here's the code:

<table>
		<tr>
		<td style="width: 212px; height: 275px; background: url(upload/thumbs/thumbnail_1.jpg) no-repeat; vertical-align: text-middle; text-align: center;" onMouseOver="new Effect.Appear('delete1', {duration:.3});" onMouseOut="new Effect.Fade('delete1', {duration:.3});"><div id="delete1" style="background-color: transparent; display: none;"><a href="deleteslide.php?a=delete&t=1"><img src="deleteimg.png" style="border: 0;" /></a></div></td>
		</tr>
	</table>

HTML:

From what I'm understanding, the div is appearing and since it is on top of the table cell, it is acting as if it is an onMouseOut, even though the cursor is within the cell. Is there another way of doing this? Are divs within cells even valid for web standards?

 

create a setTimout when the mouse leaves the parent and then cancel it when it enters the child container. See:

http://ellicerecycle.com/residential/

 

I'm having a similar problem, and I checked out the recycling site, GreatMetro. I see it works very smoothly. I have tried to replicate what you have produced, but I'm still having issues. Will you look at what I've got up & provide me with guidance, please?

You can see the work in progress at brainflex.ca/catta

The stylesheet that controls the elements 'menu' and 'chair-nav' that are being "Effect-ed" is at brainflex.ca/catta/external/oneColFixCtr.css

If there's any other info you need to help me, please let me know!

Thank you kindly.

 

Hi BelliLint,
What I did on the recycling site is create a function to remove the submenu, and that function ran within a 200ms timeout; if the mouse entered the inner div within that 200ms, then the timeout would be cancelled with clearTimeout.

So, the outer div would have two functions:

1.) onmouseover = show submenu

onmouseover='showSub();'

Code (markup):

2.) onmouseout = create a timeout that lasts 200ms to hide submenu

onmouseout = 'clearDiv=setTimeout('hideSub', 200);'

Code (markup):

Then the inner div would have a function:

1.) onmouseover = cancel the clearDiv timeout

onmouseover = 'clearTimeout('clearDiv');'

Code (markup):

Unfortunately, scriptaculous / prototype does not (to my knowledge) have a "hover" function like JQuery does, so whenever you enter a nested div, you not only fire off a mouseover on the nested div, but a mouseout on the containing div. This is called event bubbling.

I'm not too familiar with cancelling propagation or event bubbling with vanilla javascript, but the simplest solution I know of is to basically:

1.) attach an onmouseout event listener to the outer div that says "In 200 milliseconds, close the submenu".
2.) attach an onmouseover event listener to the inner div that says "cancel the previous request to close the submenu".

The 200 millisecond delay is quick enough not to annoy the user when they actually leave the menu with their mouse, but is slow enough to make up for any browser lag as the mouse transitions from the outer div to the inner div.

As I learn more about CSS and unobtrusive Javascript, I realize that this is not even an ideal situation; If someone has javascript turned off, or if they're browsing from, say, an Iphone, the menu is useless. However, since you asked to clarify, I did.

Hope this helps.

 

wow thank you for your super-quick reply!

I understand that it's not ideal to have nav use javascript, but this site if for a very specific & particular high-end market. This is not a site to be viewed on an iPhone!

Thank you for clarifying anyhow. I am going to spend some time with your explanation to try to understand it.

 

No problem, if you need any more help, send me a PM.

Cheers

 

GreatMetro,

I see that your reply is explaining why you did what you've done. I tried to apply this functionality to my site-in-progress, but it doesn't seem to be helping. Did you take a look at the site-in-progress that I provided a link to?

 

p.s. I can't send a PM to you - I get a message that says that you've chosen not to receive them.

 

I'm not too sure what functionality you're trying to achieve? When a user hovers over the word "MENU", it should fade down while the menu items fade up?

If that's the case, I'd move away from unordered lists and floats and just use absolutely positioned DIVs instead.

Let me know

 

That is indeed the functionality I'm going for. I did as you suggested and it took care of a different issue that I hadn't even addressed yet.

I'm using Firefox, and if I approach the word "menu" from the left, and don't even get on top of it, you'll see it slide down, and the navigation will slide up. It works well for me if I slink at it from the side. So making those changes you suggested actually made the slide-up of the navigation work more smoothly - it had a bit of a stutter before.

However, I still have the issue that it just doesn't work when you hover over the element entirely. Will you take a look again, please?

Thank you.