jQuery fade making page jump

Question

For some reason jQuery's fadeIn is making my page jump to the top. Each different div it fades in makes the scroll bar go a different size so I think this might be why 'return false' isn't working. Here is the code:

    jQuery(document).ready(function($) {

//When page loads...
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content

//On Click Event
$("ul.tabs li").click(function() {

    $("ul.tabs li").removeClass("active"); //Remove any "active" class
    $(this).addClass("active"); //Add "active" class to selected tab
    $(".tab_content").hide();
    var activeTab = $(this).find("a").attr("href");
    $(activeTab).fadeIn('slow', function() {
  $(this).show(); });
return false
});
});

I would appreciate if anyone could help out. Here is the site :

www.matthewruddy.com/demo

It's the tabbed links above the main content. Each one fades in the top five posts from that category.

Thanks in advance. Matthew.

score 12 · Answer 1 · answered Aug 26 '10 at 11:46

12

The issue isn't anything with links, though I understand that's the first thought, it's the transition itself.

For a split second (one frame, 13ms to be exact, between the hide and the first frame of the fade in) there is no content in the area the tab panels go, so the page scrolls up because the document was shorter.

To avoid this you need to prevent the document getting any smaller, luckily for your particular page that's pretty easy. Just change this:

<div class="tab_container">

To this:

<div class="tab_container" style="height: 516px;">

Or give it external CSS:

.tabs_container { height: 516px; }

This will prevent the .tab_content divs being gone for that one frame from resizing the page.

answered Aug 26 '10 at 11:46

Nick Craver

623,446
136
1,297
1,155

Thanks I sortof understand what you mean except I cannot define the div's height because in the themes admin options page the user can define how many entries are displayed. At the moment it is set to fix but the user could set it to more or less, altering the height.. – Matthew Ruddy Aug 26 '10 at 12:56
1

@Matthew - You could set it to whatever it is on each load, like this: `jQuery(".tab_container").height(function(i, h) { return h; });` – Nick Craver Aug 26 '10 at 13:14
Thanks this sortof works however is there a way to get it to get the height of each .tab_content? At the moment when you click a different tab with less than 5 posts the height doesn't change so there is a load of empty space. Thanks again though. – Matthew Ruddy Aug 26 '10 at 15:02
Also, the text is going funny colours when fading in Firefox.. Any ideas? – Matthew Ruddy Aug 26 '10 at 15:21
@Matthew - You have to decide how you want it to behave here...if you don't go with a consistent height, the page will still jump when changing tabs (same document height changing issue), what do you *want* to happen? – Nick Craver Aug 26 '10 at 17:31
Thank you. Your answer exactly answered an issue I was running into. – Robert Hyatt Aug 13 '15 at 18:47

score 2 · Answer 2 · edited Nov 07 '11 at 12:05

You can't use fadeTo instead of fadeIn. For example:

//Hide all content
$(".tab_content").hide();
//Activate first tab
$(".TabsScheda li:first").addClass("active").show();
//Show first tab content
$(".tab_content:first").show(); 

//On Click Event
$(".TabsScheda li").click(function() {
    //Remove any "active" class
    $(".TabsScheda li").removeClass("active");
    //Add "active" class to selected tab
    $(this).addClass("active");
    //Hide all tab content
    $(".tab_content").fadeTo("slow", 0);
    //Find the href attribute value to identify the active tab + content
    var activeTab = $(this).find("a").attr("href");
    //Fade in the active ID content
    $(activeTab).fadeTo("slow", 1);
    return false;
}

score 1 · Answer 3 · answered Aug 26 '10 at 11:49

Instead of returning false, do e.preventDefault() (why can be found here: http://css-tricks.com/return-false-and-prevent-default/):

$("ul.tabs li").click(function(e) {
    e.preventDefault()
    $("ul.tabs li").removeClass("active"); //Remove any "active" class
    $(this).addClass("active"); //Add "active" class to selected tab
    $(".tab_content").hide();
    var activeTab = $(this).find("a").attr("href");
    $(activeTab).fadeIn('slow', function() {
    $(this).show(); });

});

But the problem has nothing to do with the return false, because the link isn't followed. The problem is you hide the current tab content , and then fade in the new one. This results in changing height of your body so the scrollbar is getting shorter because the old content is hidden making you pop to the top. You could try to get the current height of the div, the height of the content that will be loaded and alter the height of the div dynamically.

And how could I do that ? :P I'm only a beginner when it comes to jQuery. — Matthew Ruddy, Aug 26 '10 at 12:15

score 1 · Answer 4 · answered May 29 '11 at 08:25

I think that using fadeTo is much cleaner solution than assigning height via CSS. That way you don't have to worry about the height of the content you are swapping in or out.

An example with a fade out of some content and a fade in of data passed into the function (e.g. as result of an ajax call):

Note that you have to use fadeTo to fade the content back in (as opposed to just fadeIn) in order to return the opacity to something visible.

function swapData(data)
{
  sel = '#tab_container';
  $(sel).fadeTo(50, 0.10, function() { $(sel).html(data).fadeTo(300, 1) } );
}

score 0 · Answer 5 · answered Aug 26 '10 at 11:28

Another useful tip, more so when there is a <noscript> url for a link, you can return false when your script has finished executing return false;. This stops the default action of the link from being executed, i.e. going to the href. For browsers without JS, the user would redirect to the url as normal.

jQuery fade making page jump

5 Answers5

Linked