Switching layouts page jumping (improvement to script)

Question

I'm using this script to switch layouts in a page:

$("span.switcher").click(function () {
    $("span.switcher").toggleClass("swap"); /*!*/
    $("ol.search-results").fadeOut("fast", function() {
        $(this).fadeIn("fast").toggleClass("grid");
});

The script works fine, the problem I have is that if the switch view is down the page, the layout changes and then the page jumps back up.

If I add 'return false' right where you see the /* ! */ in the second line the script doesn't work.

Also, as you can see, I'm using < span > instead of < a > since I was told that using other element other than < a > would stop the page from jumping.

Any idea how to fix the jumping of the page?

Thanks.

Looks like you're missing the closing curly bracket `}` for your callback to `fadeOut()`. Is that just a typo here? — user113716, May 19 '10 at 21:28

score 2 · Answer 1 · answered May 19 '10 at 22:23

2

You need to reference the event in the function call and stopPropagation on it:

$("span.switcher").click(function (event) {

    event.stopPropagation();

    $("span.switcher").toggleClass("swap"); /*!*/
    $("ol.search-results").fadeOut("fast", function() {
        $(this).fadeIn("fast").toggleClass("grid");
    });

});

This stops the click from being notified to anything other than this binding.

answered May 19 '10 at 22:23

mVChr

49,587
11
107
104

Unfortunately your suggestion didn't work :(. It stops the switch view altogether. Any other ideas? Thanks. – Ricardo Zea May 20 '10 at 13:44
You might need the stopPropagation() at the end. Otherwise, I'll think about it when I have a moment and get back to you. – mVChr May 20 '10 at 18:09

score 2 · Accepted Answer · edited May 23 '17 at 12:30

2

As this blog post mentions, the page is scrolled up because

fadeOut sets the css property display to none.

The solution, also given in the blog, would be to use fadeTo() instead of fadeOut() and fadeIn(), like this:

$("span.switcher").click(
    function () {
        $("span.switcher").toggleClass("swap");
        $("ol.search-results").fadeTo("fast", 0,
            function () {
                $(this).fadeTo("fast", 1).toggleClass("grid");
            }
        );
    }
);

Regarding using an a element instead of span, you can do several things to prevent the default behaviour of the link (which would be to jump to the top of the page if its href attribute was "#"). How to do this and the effects of it is discussed in this SO question.

edited May 23 '17 at 12:30

Community

1
1

answered May 19 '10 at 22:31

Simen Echholt

11,243
2
34
26

This one worked 50%. The page doesn't jump back up... all the way, it jumps back up to the middle of the page (maybe a little bit lower than the middle, but still jumps). Any other suggestions? Thanks. – Ricardo Zea May 20 '10 at 13:46
Too bad :/ [This](http://pastebin.com/4VWqfn7U) is the HTML/JS i used to test with. Maybe you can get something useful out of it :) – Simen Echholt May 20 '10 at 19:02
Thanks for your help Simen. Yes, that test code does actually jump back up the page as well, as I said, not all the way, just a little below the middle of the page :(. Thanks again though, appreciate your help and your time. – Ricardo Zea May 20 '10 at 19:27
Interesting, what browser are you using? – Simen Echholt May 20 '10 at 21:57
I test in all these: IE6, IE7, IE8, FF3.6.x, Chrome, Safari 3.2.x, Safari 4.x, Opera 10.x – Ricardo Zea May 21 '10 at 15:49
Sorry for my such-late answer selection. I started from scratch another implementation of the switch view script and added your fix to it and it worked perfectly. The 'fadeTo' function was the key. Thanks a lot for your help. I stayed with the use of < span > for SEO reasons since the "a href=" element should be used for actual links instead of 'triggers' since they are second to H1 tags in SEO weight. Thanks again. – Ricardo Zea Dec 27 '10 at 18:08

Switching layouts page jumping (improvement to script)

2 Answers2