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

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:readitforward@randomhouse.com">readitforward@randomhouse.com</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. ) :(

It seems to happen one second after one scrolls to the bottom of the page regardless if you hover the links at the footer or not. I didn't find what causes it yet, but that's a frustrating/interesting bug indeed :) — wildpeaks, Apr 23 '12 at 13:27
It automatically jumped for me, without hovering over the links. — Luke Duddridge, Apr 23 '12 at 13:28
Is it jumping because an element is scaling up to enclose a bitmap? If you specify the size of the element in css so that it is big enough to contain the bitmap, the page won't jump. — Robert Louis Murphy, Apr 23 '12 at 13:32
You're problem lies in the slider at the top of the page. Zoom out enough that you can see the slider and the footer on the same screen, you'll notice the jump as the slide changes. — Ayman Safadi, Apr 23 '12 at 13:41
Thanks; Robert - what do you mean specific dimensions? I've went in and assured the footer area is now defined with a fixed height and width as opposed to %. Is that what you meant? (Still didn't fix btw tho). — Dr Upvote, Apr 23 '12 at 13:44
Just added my slider code - please help if this makes sense to anyone! — Dr Upvote, Apr 23 '12 at 13:52
Thanks, good point. Removed the extra ones, still didn't help tho :/ — Dr Upvote, Apr 23 '12 at 15:59
Looks like there's a 3 or 4 second delay between the mouseover and the jump. Also, it looks to happen also to the 'more' and 'subscribe' links at the bottom of your sidebar. — j08691, Apr 23 '12 at 16:02
[This similar problem with jQuery UI Tabs and toggle fx](http://stackoverflow.com/questions/243794/jquery-ui-tabs-causing-screen-to-jump) seems to indicate it's indeed the height of a container that might be the cause. — wildpeaks, Apr 23 '12 at 16:43
Thanks WildPeaks - any thoughts on translating the code he answered with on that question to work with my code? I've made a few attempts; but I'm not calling an 'event / ui' as a function as the reference question. I think this might do it! — Dr Upvote, Apr 23 '12 at 18:22
Feel free to use as an 'answer' if you have any suggestions! — Dr Upvote, Apr 23 '12 at 18:27
Could I somehow display:block the jQuery slider to maintain height?? — Dr Upvote, Apr 26 '12 at 13:18

Ian · Accepted Answer · 2012-04-28T18:40:56.277

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

Thanks Ian - you've helped describe my struggle further. But still have no solution! — Dr Upvote, Apr 29 '12 at 19:26
Sorry I can't help you any further; I tried every variation of that script I could think of! — Ian, Apr 30 '12 at 14:06
What if you add JavaScript that sets the `min-height` of the container DIV to the current height of the container div? The hard part would be timing it right--you have to do it when all the content is loaded, but not in between slides on the slide show. — Ian, May 02 '12 at 13:43

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

1 Answers1