CODEWITHSUNDEEP
javascriptjqueryhtml
Samzee
Samzee

Reputation: 1

JQuery - IF statement only works two to three times

I'm trying to make this page working that has a vertical line of pictures (thumbnail-sized) which you can then click on to make them scroll to full width and show lots of text and happy stuff. I've already managed to do all that. However, if I click on one thumbnail, any open thumbnails are supposed to close. I've implemented an IF statement and class-checking for that:

$("a#shins-rec1").clickToggle(
function(){
        if ($(".shins-rec").hasClass('done')) {
            $(".shins-rec").filter($(".done").not($(this))).animate({
              left: $(".shins-rec").filter($(".done").not($(this))).width() / 2 - 60,
              width: '120px'}, 250, function(){
                $(this).removeClass('done');
            });
        } else {
            $(this).parent().animate({left: 0, width:'100%'}, 250, function(){
                $(this).addClass('done')
            });
        };
},
function(){
    $(this).parent().animate({
      left: $(this).parent().width() / 2 - 60,
      width: '120px'}, 250, function(){
        $(this).removeClass('done')
    }); // even clicks
});

which works all fine, but after you clicked two or three times on different thumbnails to open them and close the other ones, the already open thumbnail gets stuck and the clicked thumbnail opens as it should open. You have to click on the clicked thumbnail to close the other one, and then you have to wait some time till you can click the clicked thumbnail to properly close it again. After that it just stays like this.

I've already tried doing it with a plugin called Summer of GOTO, because I think it has something to do with checking whether there are any "done" classes or not, so I wanted to make it re-check stuff using goto in JQuery. Using a WHILE statement didn't work either, but that could be because I don't understand that function.

Anyone knows how to solve this?

Thanks in advance.

EDIT: : JSfiddle of what I'm working on

Upvotes: 0

Views: 80

Answers (2)

Samzee
Samzee

Reputation: 1

I've finally gotten the answer to my problem, someone on another forum kind of rewrote my code because it was messy and things were repetitive and they solved the stuckness.

Here is the JSfiddle in case anyone wants to look into it.

For some reason the orientation of the thumbnails changed which made a 0 value for "left" position the thumbnail in the center and a 240 or similar made it shift to the right. But I simply changed that by switching the left-values and changing the 240 or similar into a negative number, as seen below.

var rightPos = -1 * ($('div.content-ins-used').width() / 2 - 60);

Thanks anyway for your help!

Upvotes: 0

Ammar Khan
Ammar Khan

Reputation: 2585

It looks like the click even which you fire on each thumbnail has same ID, ID of the element suppose to be unique, you can use class instead like this

$("a.shins-rec1").clickToggle(
function(){
        if ($(".shins-rec").hasClass('done')) {
            $(".shins-rec").filter($(".done").not($(this))).animate({
              left: $(".shins-rec").filter($(".done").not($(this))).width() / 2 - 60,
              width: '120px'}, 250, function(){
                $(this).removeClass('done');
            });
        } else {
            $(this).parent().animate({left: 0, width:'100%'}, 250, function(){
                $(this).addClass('done')
            });
        };
},
function(){
    $(this).parent().animate({
      left: $(this).parent().width() / 2 - 60,
      width: '120px'}, 250, function(){
        $(this).removeClass('done')
    }); // even clicks
});

Upvotes: 1

Related Questions