Context menu item link still selected after click

[travelrats]

Hi

Here's my problem - I've been trying to figure this out for a while and ran out of ideas...

• <div> id1 contains <div> id2 (a geographical map)
• <div> id2 contains a context menu made out of an <ul> list. the context menu operations work fine, links are hovered, etc
• When I click one context menu items named "view large", <div> id2 is moved to another parent element, <div> id3 and resized. The move is performed using appendChild()

It all works, but when I right click on the new, larger map, the "view large" context menu item is functional, but still selected. It seems to me that the only cause for this behavior is the fact that the id2 object has changed parents, because the other context menu operations end with deselecting the menu.

The context menu styles are controlled with CSS. The menu class is "pmenu". The unselected item is "ul.pmenu li a" and the selected one is " ul.pmenu li a:hover". It looks like the link never becomes "unhovered" when the parent is removed and placed somewhere else.

You can see all this at http://travelrats.blogspot.com. Right click on the map and select "view large map". Then on the large map, right click again - the name of the menu item changes to "back to blog", but it is still selected.

Any ideas will be highly appreciated
Thanks,
Fritz

[travelrats]

No reply to my post but I think I have an idea; even if I still lack a deep understanding of the inner works of the html DOM, at least I was able to fix the problem.

In case anybody is interested: the menu item link stays selected because the menu <ul> node itself is moved together with the <div> map container, to a different parent node in the document, before the "onclick" operation is completed. Therefore, IE is unable to notify the link that the operation has completed and it is no longer in the ":hover" state. I'm not sure how that mechanism really works, but it seems common sense. I have not been able to call anchor.blur() explicitly and make it lose focus.

The fix is simple: do not move the context menu <ul> element together with the <div> element containing the map. Leave the menu anywhere on the page in a container that is not being moved or made invisible - this way it can be used by the large map and the small map containers, and since it is not moved with the map, the operation can complete and the link is de-selected.

Cheers,
Fritz
http://travelrats.blogspot.com

[acoder]

Hi Fritz

Thanks for that info.