Question

Fail log

---

— For those eagerly awaiting for yet another Update (April 30 2012, 3:23PM), here it is:

I’ve managed to fix the problem by adding a min-height to my main container. It’s a bad fix, and I hate it – because I have to adjust per content. But this is the only solution I have gathered thus far.

Last minute hints? …

---

Update of unsucess. April 24 2012, 4:35PM EST // WildPeaks identified the problem in his below comment.

I need to maintain defining the height when my slider toggles. I’ved tried multiple attempts at all suggestions in the directed SO reference question, but can’t seem to get the syntax. I’ve also tried different FX’s – HELP!!

<script type="text/javascript">

jQuery(document).ready(function($){
    $("#photo-rotator").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 6000);
});

</script>

—— Original Question Below:

I’ve coded some basic HTML / CSS links within an Unordered List. For a strange reason, on hover, with some of the links, the page jumps and scrolls up. Almost as if the user has clicked an ‘#’. But this occurs on hover?

Here is my COMPLETE footer.php (This is within a WordPress website)

<?php
/**
 * @package WordPress
 * @subpackage Default_Theme
 */
?>

        <div id="endPage">
            <div id="contactus">

                <br /><br />
                <p>Suggestions? Requests? Feedback? Are you talking about our books?<br />
                Send us links to your book reviews and contact us on <a href="http://twitter.com/readitforward">Twitter</a> or <a href="http://www.facebook.com/ReadItForward">Facebook</a> or email us at <a href="mailto:[e-mail]">[e-mail]</a>.
                </p>                
                </div>

<?php //<!-- =-=-=-=-=-=-=-=-=-=BEGIN RH FOOTER-==-=-=-=-=-=-=-=-= --> ?>




    <div id="footer" style="margin-top: 30px;">

    <div style="float:left;"><img src="http://www.osmproduction.com/RIF/wp-content/uploads/2012/04/RIF-Footerlogo.jpg" style="border:0px;" /></div><br />

    <div style="position: absolute; margin-right: -150px; width: 350px; height: 250px; margin-top: 50px; padding-bottom: 15px;">
    <ul id="feetnav" style="list-style: none; padding-left: 5px;">

    <li class="footlink" style="float:left;"><a href="http://www.osmproduction.com/RIF/?cat=9">Free Books</a></li>
    <li class="footlink" style="float:left;"><a href="http://www.osmproduction.com/RIF/?cat=10">Reader Reviews</a></li>
    <li class="footlink" style="float:left;"><a href="http://www.osmproduction.com/RIF/?cat=7">Meet the author</a></li>
    <li class="footlink" style="float:left;"><a href="http://www.osmproduction.com/RIF/?cat=4">Meet Editor</li>
    <li class="footlink" style="float:left;"><a href="http://www.osmproduction.com/RIF/?cat=5">Book Groups</a></li>
    <li class="footlink" style="float:left;"><a href="http://www.osmproduction.com/RIF/?cat=10">Favorites</a></li>
    <li class="footlink" style="float:left;"><a href="http://www.osmproduction.com/RIF/">All Categories</a></li>

    </ul>
    </div>

    <div id="searchfoot" style="margin-left: 550px; margin-top: 75px;">

    <?php get_search_form(); ?>


    </div>

    <br />

    <hr style="color: #fff; border: 1px solid white; height: 1px;" /></hr><br />


    <div id="footer_categories">


    <div style="">

    <ul id="feetnav2" style="list-style: none; padding-left: 5px;">

    <li style="float:left; font-color: #000;"><a href="http://www.osmproduction.com/RIF/?cat=9">The Crown Publishing Group</a></li>
    <li class="footlink" style="float:left;"><a href="http://www.osmproduction.com/RIF/?cat=10">Books</a></li>
    <li class="footlink" style="float:left;"><a href="http://www.osmproduction.com/RIF/?cat=7">Authors</a></li>
    <li class="footlink" style="float:left;"><a href="http://www.osmproduction.com/RIF/?cat=4">Communites</li>
    <li class="footlink" style="float:left;"><a href="http://www.osmproduction.com/RIF/?cat=5">Features</a></li>
    <li class="footlink" style="float:left;"><a href="http://www.osmproduction.com/RIF/?cat=10">Readers Guide</a></li>
    <li class="footlink" style="float:left;"><a href="http://www.osmproduction.com/RIF/">Feature Sites</a></li>
    <li class="footlink" style="float:left;"><a href="http://www.osmproduction.com/RIF/?cat=10">News</a></li>
    <li class="footlink" style="float:left;"><a href="http://www.osmproduction.com/RIF/">Read It Forward</a></li>
    <li class="footlink" style="float:left;"><a href="http://www.osmproduction.com/RIF/?cat=10">CrafterNews</a></li>
    <li class="footlink" style="float:left;"><a href="http://www.osmproduction.com/RIF/">The Recipe Club</a></li>
    <li class="footlink" style="float:left;"><a href="http://www.osmproduction.com/RIF/?cat=10">Books for Better Living</a></li>
    </ul>

    <p class="copyright">Use of this site indicates your consent to the Terms of Use. Copyright &copy; 1995-2012 Random House, Inc. All rights reserved.</p>            
    </div>        
    </div>

</div>
</div>
</div>

<?php
function homepagename() {
    $homepagename = "";
    if(strlen($_SERVER['REQUEST_URI']) < 2) {
        $homepagename = "Read It Forward Homepage";
    }
    print $homepagename;
}
?>

I’ve also tried the below CSS snippet (Doesn’t make too much sense but worth a shot, I guess)

.footlink li:hover { 

margin: 0px;

}

LIVE URL [ http://tinyurl.com/cz6sawg ] (Hover over a few bottom footer links)

Suggested that my slider may be causing it? I can’t seem to find anything in the code that should cause this though? Slider code:

<!-- Top of Page Slider -->


<div id="photo-rotator">
<?php $slide_id=1; ?>
<?php
 $featuredPosts = new WP_Query();
 $featuredPosts->query("showposts=4");
 while ($featuredPosts->have_posts()) : $featuredPosts->the_post();
 ?>


    <div id="slide-<?php echo $slide_id; $slide_id++;?>">
     <a href="<?php the_permalink() ?>" class="post-image">
         <?php the_post_thumbnail( 'rotator-post-image' ); ?>
         <span class="title"><?php the_title(); ?></span>
     </a>
     </div>

    <?php endwhile; ?><!--/close loop-->

    <ul id="slide-nav">
        <?php $nav_id=1; ?>
        <?php while ($featuredPosts->have_posts()) : $featuredPosts->the_post(); ?>
            <li>
                <a href="#slide-<?php echo $nav_id; ?>">
                    <span class="thumbnail" style="display:none;">
                    </span>
                    <? the_title(); $nav_id++;?>

                    <div style="">

                    <!--<?php the_excerpt(); ?>-->

                    <?php if($text= get_post_meta($post->ID, "slidetext", true)) { ?>
                         <div class="">

                         <p style="font-weight: normal; font-size: 14px;"><?php echo $text; ?></p> 

                         </div>
                        <?php } //else { print"<div>"; } ?>  

                    </div>   

                </a>
            </li>
        <?php endwhile; ?><!--/close loop-->
        </ul>
        </div>

<!-- End Top page Slider -->

Here’s the JS initiating the slider:

<script type="text/javascript">
jQuery(document).ready(function($){
    $("#photo-rotator").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 6000);
});

</script>

(Also just tried stipping out the UL / LI within markup and CSS in case somehow the JS was interacting. ) 🙁

Answer 1

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