0

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.

CharlesRock
  • 25
  • 2
  • 6
  • read more about the [not selector](http://api.jquery.com/not-selector/) – Ibu May 30 '11 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 May 30 '11 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 May 30 '11 at 21:30

2 Answers2

2

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

Ibu
  • 42,752
  • 13
  • 76
  • 103
  • he has `return false` in his code, which prevents the default link action. – Niklas May 30 '11 at 20:34
  • It does stop the default link action. http://stackoverflow.com/questions/1357118/javascript-event-preventdefault-vs-return-false – Niklas May 30 '11 at 20:56
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()

Niklas
  • 29,752
  • 5
  • 50
  • 71
  • Oh Thankyou.. I think this will work, I actually had planned on doing that then discovered the Not selector. – CharlesRock May 30 '11 at 20:36
  • The `not` selector is great, just need to know when to use it. – Niklas May 30 '11 at 20:37
  • Thanks, I had tried using the .live() function but had the same problem. (Actually your code still does the same thing too). I had to move the removeClass and addClass section outside of the IF statement – CharlesRock May 30 '11 at 20:49
  • I am wondering why adding the active class within the IF statement would cause the IF statement to validate as FALSE? – CharlesRock May 30 '11 at 21:03
  • I'm not sure I am following you now, could you paste a copy of the code you are referring to? – Niklas May 30 '11 at 21:07
  • Basically in the code you provided above. The IF statement is executed if the class != active. Further down in the IF statement, the class is changed to active. What is happening, is the animation is executed, and midway through the animation(im assuming when the class is changed to 'active'), it breaks out of the IF statement and returns true. When I moved $(this).parent().addClass('active'): out of the IF statement, it works correctly (the way I assumed it would in the code you provided). – CharlesRock May 30 '11 at 21:22
  • Found another error in the code, don't know if that was the problem you were just talking about, `$(li.active).removeClass('active');` has not quotes around the selector, should be `$('li.active').removeClass('active');`. I've updated my post with the change as well. Not sure about `$(this + 'img')` either, what are you trying to do there, because it doesn't look quite right. If you want the `img` elements under $(this), then you need to change it to `$(this).find('img')` – Niklas May 30 '11 at 21:24
  • Ahhh yes, just added the single quotes and it works now. $(this + 'img') did in fact work properly, however I will change it to what you said as it's likely better. – CharlesRock May 30 '11 at 21:34