Floating menus overlapping !

Hi


I have a 4x3 table of images.
When the user move the mouse over an image, a floating menu will appear so the user can select a menu item.

The code is working fine if I only have one cell.

However, I have a 12 adjacent cells in a 3x4 table. The problem is when the user move the mouse in order to select a floating menu item, the mouse eventually will move over another cell (image) and will cause the other cell to show its floating menu.

Is there a way to avoid that? like to disable all the other floating menus if there is an open menu?  

I put the whole project together in one zip file. You can unzip it and figure out the problem!


    problem.zip

Not to be rude, but PLEASE AVOID "COPY AND PASTE LINKS" ANSWERS!
HandyMannyAsked:
Who is Participating?
 
HandyMannyConnect With a Mentor Author Commented:
I found the solution and it is so simple!
I just added a flag which equals 0 initially.
When I open a menu I check if the flag value = 0, in that case I put flag = 1 and open the floating menu. otherwise I do not open the floating menu.
When I close a menu I put the flag value = 0 again!

I have attached the same file after applying the solution

problem.zip
0
 
Matthew KellyCommented:
Do you need the 2 second timeout?

If you change: var timeout = 2000; to var timeout = 0;

It will only display one at a time.
0
 
HandyMannyAuthor Commented:
If I set the timeout = 0 the user won't able to catch the floating menu!
0
All Courses

From novice to tech pro — start learning today.