jQuery is behaving really odd

Question

I have a jQuery script that fades in and fades out between containers inside their parent container. Depending on the button (design, web) clicked, it determines which container (#design, #web) fades out and which one fades in in its place.

Now, the crux is here, both these containers (#design,#web) differ in height, so when I fade out and fade in between these containers, the page jumps up to a specific position directly after the fadeIn() function call finishes. That position (x,y) is exactly the same as the position the page would have been at if no containers (#design,#web) were visible inside the parent container (i.e. an empty container) and the page was scrolled all the way to the bottom.

Has anyone else encountered this before? Any advice is greatly appreciated, as this issue is bugging me endlessly.

PS. I have tested this in Firefox and Safari and both show the same issue.

// edit 1: Here is a URL which you can check out: http://toolboxstudio.co.za/version3/?page=packages

If you want to see how the container would look empty: http://toolboxstudio.co.za/version3/?page=packages#empty, you can then click on a button (Design or Web) just below the banner. It will fade in the correct content, and toggle between the two. Make certain your page fits just the whole page with empty container in with no extra space beneath the footer. Then click on the buttons and scroll a small ways down, toggle between the two buttons. You'll see what I mean about the page jumping.

Here's the code:

$("div.design.button a").click(function () {
    $(this).parent("div").addClass("active");
    $("div.web.button").removeClass("active");

    if ($("div.web_content").is(":visible")) {
        $("div.web_content").fadeOut(function () {
            $("div.design_content").fadeIn();
        });
    } else {
        $("div.design_content").fadeIn();
    }
    window.location.hash = "#design";
    resizeWindow();

    e.returnValue = false;
    e.preventDefault();

    return false;

    alert("hello");     
});

$("div.web.button a").click(function () {
    $(this).parent("div").addClass("active");
    $("div.design.button").removeClass("active");

    if ($("div.design_content").is(":visible")) {
        $("div.design_content").fadeOut(function () {
            $("div.web_content").fadeIn();
            return false;
        });
    } else {
        $("div.web_content").fadeIn();
        return false;
    }
    window.location.hash = "#web";
    resizeWindow();

    e.returnValue = false;
    e.preventDefault();

    return false;

    alert("world");
});

Answer 1

I think I fixed it by changing the code to this:

$("div.design.button a").click(function () {
    $(this).parent("div").addClass("active");
    $("div.web.button").removeClass("active");

    if ($("div.web_content").is(":visible")) {
        $("div.web_content").fadeOut();
        $("div.design_content").fadeIn();
            return false;
    } else {
        $("div.design_content").fadeIn();
    }
    window.location.hash = "#design";
    resizeWindow();

    e.returnValue = false;
    e.preventDefault();

    return false;

    alert("hello");     
});

$("div.web.button a").click(function () {
    $(this).parent("div").addClass("active");
    $("div.design.button").removeClass("active");

    if ($("div.design_content").is(":visible")) {
        $("div.design_content").fadeOut();
        $("div.web_content").fadeIn();
    } else {
        $("div.web_content").fadeIn();
    }
    window.location.hash = "#web";
    resizeWindow();

    e.returnValue = false;
    e.preventDefault();

    return false;

    alert("world");
});

@galambalazs:

No, I don't think that's it, as I removed that first and nothing changed. I just didn't suspect it would be the callback function error I made that would be the culprit.

Sorry all, I really struggled for hours with this, StackOverflow is always my last resort. And then I just decided to try something and that did the trick.

Sorry I can't upload the code so you can see what I mean by "it works now", SEACOM is down and we have limited resources available, our FTP port is blocked now.

Answer 2

Hello Anriëtte Combrink, you totally forgot to mention the event in the click event Handler,

I think return false is just enough,

please remove the following lines

e.returnValue = false;
e.preventDefault();

since you haven't specified e (event) you can't use returnValue, preventDefault

I think this should work, if not please let us know

Have a Good Day !!