CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Sushil Raghav
Sushil Raghav

Reputation: 253

Page is jumping while clicking on different-2 thumbnail image

Example: http://www.gassmanfg.com/the-g&g-team

I have created this simple show hide content example - but when you are at bottom of page and then click on any thumbnail image it jumps on top or at thumbnail don't no how?

I want to stop this jumping problem

also tried event.preventDefault() but still not working.

event.preventDefault();

Below is the Jquery i am using:

$(document).ready(function () {
    //Default Action
    $(".tab_content").hide();
    $("ul.tabs li:first").addClass("active").show();
    $(".tab_content:first").show();

    //On Click Event
    $("ul.tabs li").click(function () {
        $("ul.tabs li").removeClass("active");
        $(this).addClass("active");
        $(".tab_content").hide();
        var activeTab = $(this).find("a").attr("href");
        $(activeTab).fadeIn();
        if (activeTab == '#tab1') {
            $(window).resize(function () {
                //$("#tab2").css({'display':'block'});
                //$("#map_canvas").css({'width':'630px', 'height':'400px'});
                //initialize();
                //alert('Changed!');
            });
        }
        return false;
    });
});

Upvotes: 1

Views: 226

Answers (1)

Anton Igonin
Anton Igonin

Reputation: 283

$(".tab_content").hide(); - this cause the problem. You page height is becoming smaller while your netx tab is didn't showed yet.

Faced same problem once, my solution was to set min-height of the page before hiding slide. Code looks like this:

 $("ul.tabs li").click(function () {
        $("ul.tabs li").removeClass("active");
        $(this).addClass("active");
        $('.tab_container').css('min-height', $('.tab_container').height()+'px');
        $(".tab_content").hide();
        var activeTab = $(this).find("a").attr("href");
        $(activeTab).fadeIn();
        if (activeTab == '#tab1') {
            $(window).resize(function () {
                //$("#tab2").css({'display':'block'});
                //$("#map_canvas").css({'width':'630px', 'height':'400px'});
                //initialize();
                //alert('Changed!');
            });
        }
        return false;
    });

Upvotes: 5

Related Questions