JQuery: Stop page reloading to top

Discussion in 'Web Design and Development' started by Cerebrus' Maw, Jul 26, 2009.

  1. Cerebrus' Maw macrumors 6502

    Joined:
    Mar 9, 2008
    Location:
    Brisbane, Australia
    #1
    Howdy.

    I'm making this little gallery of thumbnails, that if one is clicked on, fadeOut() the current main image, then fadeIn() the clicked on thumbnail.

    Its all working, but the problem is that the page always scrolls back to the top after clicking on the thumbnail and the main image fades out. I've tried using return false; but to no avail. In fact, I've tried using return false on all levels of the stack.

    My images are example.jpg for the main img, and then tn_example.jpg for the thumbnail...

    $(function() {
    $(".photostrip_img")
    .click(function()
    {
    var src = $(this).attr("src");
    src = src.replace('tn_', '');
    $("#main_img").fadeOut("slow", function() {
    $("#main_img").attr("src", src);
    $("#main_img").fadeIn("slow");
    });

    });

    });



    Psudo code.

    For every thumbnail with class photostrip_img
    if clicked on
    get its' source and remove 'tn_' from it.
    fade out the current main image
    once fade out is complete
    change main src to new src
    fade back in


    Thanks in advance.
     
  2. Cerebrus' Maw thread starter macrumors 6502

    Joined:
    Mar 9, 2008
    Location:
    Brisbane, Australia
    #2
    Solved!

    Got the lil bugger....

    I found that I had not declared a height on the div contaiing the main image, so that when the fadeOut completed, the div resized to zero, shortening the page, and only making it look as if it reloaded.

    Declared height, all working fine.

    I was getting paranoid as to why return false; was not working on just my computer.
     

Share This Page