Question

i have a problem with my jquery code which is disabling all the text after i click the next profile.

Fig.1 : you will notice here that i can highlight the text and highlight the scrollbar in first frame.

Fig.2 : you will notice here that none of all are highlighted.

here’s the jquery source that im currently using.

    $(document).ready(function(){
    $('.productList').hide(); // hide all details

    $('#thumbsets li').bind('click',function() {
        var tsLi = $(this).index(); // all elements have already an index
        $('.productList:eq('+ tsLi +')').siblings().fadeTo(400,0).end().fadeTo(400,1);
    });
});

i use this at all of my portfolio section. most of it are images. however, i tried to create a sample list of user profiles with this script function, but i found out that after my navigation switched to next profile member, it was already disabled (technically says, i can’t scroll or highlight the text content).

is there possible way to adjust the script here? i doubt that the cause of my issue is:

            var tsLi = $(this).index(); // all elements have already an index
        $('.productList:eq('+ tsLi +')').siblings().fadeTo(400,0).end().fadeTo(400,1);

hope someone can help me about this. thanks in advance.

Answer 1

fadeTo ^docs manipulates only the opacity. So the faded elements become invisible but are still there and on top of the other elements.. (so you can not highlight those..)

you should use fadeIn ^docs and fadeOut ^docs instead, because those will also hide/show the element as well..

$('.productList:eq('+ tsLi +')').siblings().fadeOut(400).end().fadeIn(400);