Question

I have wordpress enabled website where I want to create a featured block. This featured block will have featured articles fading one after another. I got it working by using the fadeIn and fadeOut APIs of jQuery, but there is a problem with the implementation.

Here is the code I have –

var count=0;
var sticky_count=<?php echo count($sticky);?>;

jQuery(document).ready(featured_block);

function featured_block() {   
    jQuery(".featured" + count % sticky_count).delay(5000).fadeOut(callback);
}

function callback() {
    count++;
    jQuery(".featured" + count % sticky_count).fadeIn().delay(5000);
    jQuery(".featured" + count % sticky_count).fadeOut(callback);
}

The fadeIn – fadeOut effect is working fine till the user navigates to the bottom of the page. When the user is at the bottom of the page, the entire page scrolls up when the fade switch happens.

You can see this in action at http://www.ronakg.com

Please advice how can I avoid the page scroll.

EDIT: Here’s how the HTML code looks like –

<div class="featured0">
    ...
</div>

<div class="featured1" style="display:none">
    ...
</div>

...

Answer 1

Try giving the containing element of the blocks that fade in and fadeout a static height: attribute with CSS.

Wrap <div id="featured"> block with another div.

<div id="rotator" style="height: 340px;">
    <div id="featured">
     ...
    </div>
</div>