Link hover glitch - basic UL Links make page jump on hover? Link hover glitch - basic UL Links make page jump on hover? wordpress wordpress

Link hover glitch - basic UL Links make page jump on hover?


In most cases, the jumping isn't caused by the browser following the '#' link. The page jumps because at the midpoint of the animation between the two tab panes, both tab panes are fully transparent and hidden (as in display: none), so the effective height of the whole tabbed section becomes momentarily zero.

And if a zero-height tabbed section causes the page to be shorter, then the page will appear to jump up to compensate, when in reality it's simply resizing to fit the (momentarily) shorter content. Makes sense?

This is from the question that @wildpeaks posted earlier, and I think I know what the problem is. If you zoom out all the way, you can see that it's the slideshow causing the problem. I think that what is happening is that when the slideshow changes, it gets to 0px, and then that makes the page shorter. Just replace "tab panes" with image slideshow.

The code that he gives doesn't work at all, but I will post it here; I think it can be customized to work:

jQuery('#photo-rotator').tabs({        fx: { opacity: 'toggle' },        select: function(event, ui) {                jQuery(this).css('height', jQuery(this).height());                jQuery(this).css('overflow', 'hidden');        },        show: function(event, ui) {                jQuery(this).css('height', 'auto');                jQuery(this).css('overflow', 'visible');        }});

Hope this helps