I'm new to Javascript and am having a bit of an issue with using a NOT selector, and adding a class during the function, hopefully this will make sense to someone.

I am creating a small gallery, and my goal is to have clickable navigation, however the active image will redirect to another page when clicked.

Code is as follows:

    $("ul#mainGallery li:not(.active) a").click(function(){
      var thisListClass = $(this).parent().attr('class');
         var activeListId = $(this).parent().attr('id');
         var newMarginLeft = (activeListId-3) * -200;
         var animateAction = {};
          animateAction['margin-left'] = newMarginLeft + 'px';
        $("ul#mainGallery").animate(animateAction, 1000);
        $('li.active img').animate({width:'100px', height:'100px'},1000)
        $(this + 'img').animate({width:'300px', height:'300px'},1000)
        $(li.active).removeClass('active');
        $(this).parent().addClass('active');
        return false;

I know there is likely a much better way to do this, but I can't get my head around it.

Edit: I should probably say what the problem is...

When an active image is clicked, it follows the hyperlink all is well.

When a non active image is clicked, it begins the animation, then (i assume) when the 'active' class is added, instead of returning false, it returns true and follows the hyperlink.

I'm new to Javascript and am having a bit of an issue with using a NOT selector, and adding a class during the function, hopefully this will make sense to someone.

I am creating a small gallery, and my goal is to have clickable navigation, however the active image will redirect to another page when clicked.

Code is as follows:

    $("ul#mainGallery li:not(.active) a").click(function(){
      var thisListClass = $(this).parent().attr('class');
         var activeListId = $(this).parent().attr('id');
         var newMarginLeft = (activeListId-3) * -200;
         var animateAction = {};
          animateAction['margin-left'] = newMarginLeft + 'px';
        $("ul#mainGallery").animate(animateAction, 1000);
        $('li.active img').animate({width:'100px', height:'100px'},1000)
        $(this + 'img').animate({width:'300px', height:'300px'},1000)
        $(li.active).removeClass('active');
        $(this).parent().addClass('active');
        return false;

I know there is likely a much better way to do this, but I can't get my head around it.

Edit: I should probably say what the problem is...

When an active image is clicked, it follows the hyperlink all is well.

When a non active image is clicked, it begins the animation, then (i assume) when the 'active' class is added, instead of returning false, it returns true and follows the hyperlink.

• javascript
• jquery
• css-selectors

• read more about the not selector – Ibu Commented May 30, 2011 at 20:26
• do you actually have $(li.active) or $('li.active') on the third to last line? Also 4th to last line is probably not doing anything because what is "this" do you mean $('#' + this.id + ' img')? If you have runtime errors (like li is undefined and you are trying to get the active property, then return false happen and the link will be followed. – lambacck Commented May 30, 2011 at 21:06
• ah, thanks, I was missing the '' on that line, my class wasn't being removed. The 4th last line is working, although could probably be written better, it is selecting the image that is within THIS ($(this) is a list item) – CharlesRock Commented May 30, 2011 at 21:30

2 Answers 2

You are binding the click event to $("ul#mainGallery li:not(.active) a") whenever that code is run (presumably on document load). The items which are not active at that point will have that item bound, and changing the class afterwards on other items won't bind this event to them. You will need to either change how you bind it or check inside the function whether the item has that class.

Something like this:

$("ul#mainGallery li a").click(function(){
if(!$(this).parent().hasClass('active')){


      var thisListClass = $(this).parent().attr('class');
         var activeListId = $(this).parent().attr('id');
         var newMarginLeft = (activeListId-3) * -200;
         var animateAction = {};
          animateAction['margin-left'] = newMarginLeft + 'px';
        $("ul#mainGallery").animate(animateAction, 1000);
        $('li.active img').animate({width:'100px', height:'100px'},1000)
        $(this + 'img').animate({width:'300px', height:'300px'},1000)
        $('li.active').removeClass('active');
        $(this).parent().addClass('active');
        return false;
}

EDIT, or if you prefer to continue using the same selector with the :not and everything, then switch your click function to .live()

To stop the default behaviour use the preventDefault() function

$("ul#mainGallery li:not(.active) a").click(function(e){
   e.preventDefault(); // will stop the default behaviour
}

Read more on Jquery docs