Question

I have a hover event set on an element that use’s jQuery UI’s position function to show a div right underneath it, with the “out” set to hide that div.

The problem is, subsequent hovers position that div further and further on each hover.

Example: http://jsfiddle.net/Shpigford/8ZkgJ/

Hover over the red box, then hover over it again and you’ll see the blue box quickly get positioned further and further to the right.

Same thing happens if I change to a click event. Seems like something odd is happening with positioning when I hide the div and then try to show it again.

Answer 1

Instead of position({...}).show(), use show().position({...}). The reason is that positon won’t work when the element is invisible. You can find the following note at http://api.jqueryui.com/position/:

jQuery UI does not support positioning hidden elements