CODEWITHSUNDEEP
javascriptjquerycss
Rajan Kumar
Rajan Kumar

Reputation: 63

scroll till active tab

This question is based on my last question.

show or make visible active tab

there were some issues that I have to fix so I have fixed. but still I can't make it work properly.

Like I want to scroll left and right active/clicked tabs to show. please have look to jsfiddle example. such as: when I click on overflowed tab 5 and it should show visible. then from 1 till 4 will be overflowed (hidden) so now If I click on 2 (2 click) then it should scroll to right and show it visible. In reality, there will be N number of list(li) elements.

I just found don't know why but jsfiddle example doesn't work on IE.

Thank you...

Jsfiddle

$(document).on('click', '.liClicked', function () {
    var idValue = ($(this).attr('id'));
    console.log(idValue);
    var idValues = ($(".element ul li#" + idValue));
    console.log(idValues);

    // $(idValues).css('left','-50px');

    $('.element').animate({
        "left": "-=50px",
    }, "slow")

});

$("#right").click(function () {
    var calcs = ($('ul li#tab1').width());

    $(".element").animate({
        "left": "+=" + calcs,
    }, "slow");
});

$("#left").click(function () {
    $(".element").animate({
        "left": "-=50px"
    }, "slow");
});

Upvotes: 0

Views: 1877

Answers (1)

user2704238
user2704238

Reputation: 505

Try this:

 $(document).on('click', '.liClicked', function() {
    var idValue  = ($(this).attr('id'));
     console.log(idValue);
     var idValues = ($(".element ul li#" + idValue));
     console.log(idValues);

     // $(idValues).css('left','-50px');


     var me = $(this);
     $('.element').animate({
         "left": $('li#' + me.prop('id')).position().left * -1 ,
     }, "slow")

 });

Also, it isn't recommended to have two elements with the same ID

Upvotes: 2

Related Questions