JQuery slider refocuses page on tab rotation

Question

I have a simple JQuery Slider to rotate through tabs to display different blog story headlines and pictures. The problem is that if you're viewing the page anywhere beneath the slider, each time the slider rotates, it automatically moves the page so that you're looking at the slider again.

This does not happen if you're above the blog slider.

Please help!

My code:

$(document).ready(function(){
    $("#featured").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 8000, false);
    $("#featured").hover(  
        function() {  
            $("#featured").tabs("rotate",0,false);  
        },  
        function() {  
            $("#featured").tabs("rotate",8000,false);  
        }  
    );

I'm using the Featured Content Slider using Jquery UI found at: http://webdeveloperplus.com/jquery/featured-content-slider-using-jquery-ui/ — Josh Shapiro, Mar 21 '12 at 16:11
Can't seem to reproduce the error. Mind if we saw the rest of your code? — rgin, Mar 21 '12 at 16:17

score 0 · Answer 1 · edited May 23 '17 at 10:08

0

A great answer is at: JQuery UI Tabs Causing Screen to "Jump"

As Mike Petrovich explains, there is a point in the rotating tab animation where both the outgoing and incoming div are set to display:none. This causes the vertical height of the page to shrink, which makes the display 'jump' upwards.

edited May 23 '17 at 10:08

Community

1
1

answered Apr 02 '12 at 19:01

Josh Shapiro

1

JQuery slider refocuses page on tab rotation

1 Answers1