Question

I am working on a website http://dev.io-web.com/portfolio.aspx and am having difficulty with the slider that I programmed. For some reason when you click to change slides it resets the position of the scrolling on the site to the top. Is there a way to make it not change the position of the screen? I’ll include part of the code for the slider as well so it’s easier to understand what I’m doing:

$(".slide1").click(function() {
    if(current_slide != "slide1"){
            $(".arrow").animate({"margin-left":"349px"});
            if(current_slide == "slide2"){
                $(".slide2_display").stop(true,true).fadeOut().hide();
                $(".slide1_display").fadeIn().show();
                current_slide = "slide1";
                $("#slide2content").hide();
                $("#slide1content").show();
            }
            else if(current_slide == "slide3"){
                $(".slide3_display").stop(true,true).fadeOut().hide();
                $(".reps_display").fadeIn().show();
                current_slide = "slide1";
                $("#slide3content").hide();
                $("#slide1content").show();
            }
            else{
                $(".slide4_display").stop(true,true).fadeOut().hide();
                $(".slide1_display").fadeIn().show();
                current_slide = "slide1";
                $("#slide4content").hide();
                $("#slide1content").show();
            }

    }
});

I have this coded for each of the 4 different displays. It should only change the displays and not change the scrolling of the page, but maybe the click function automatically does something like that. Any help with a solution would be greatly appreciated. Feel free to take a look at the work in progress at the url listed above.

Answer 1

This is happening because when you use jQuery.hide() to hide your div, its container .PortfolioSlider is being resized to 0px for a split second because it is empty. This shrinks the height of the page and causes the browser to jump to the top of the page.

This is fixed simply by applying a fixed height of 660px to the css of .PortfolioSlider