Stop/start 'hover' on click

Question

Hi! I am a newbe as it comes to jQuery.. I'm working on my portfolio, and i'm stuck.. I have a page with all portfolio-items (images) that can be sorted by category. So when i press on category 'Art', all the other catergory's turn to a low opacity so the selected category stay''s highlighted. See it working here: link text

But when I hover over the items with the low opacity, they become highlighted again. How do i lock this .hover function temporary so that when a category is selected, the other items (images) do nothing when hovered?

this is the code i used for the hover in the index.html (this for each category):

 var $j = jQuery.noConflict();$j(document).ready(function(){    
    $j(".art").css({opacity: 0});   // Loaded at 0 opacity
    $j(".art").fadeTo(900, 0.8);    // Onload fade items to 80%

    $j(".art").hover(function(){
    $j(this).fadeTo("fast", 1.0);   // Rollover at 100%
    },function(){
    $j(this).fadeTo("fast", 0.8);   // Rollout at 80%
    });
});

And this code for the category filter (code is a external .js file):

    $(document).ready(function() {  
 $('ul#navfilter a').click(function() {       
  $(this).css('outline','none');
  $('ul#navfilter .current').removeClass('current');
  $(this).parent().addClass('current');
  var filterVal = $(this).text().toLowerCase().replace(' ','-');  
  if(filterVal == 'all') {
   $('.wrap .hidden').fadeTo('slow' ,0.8).removeClass('hidden');
  } else {
   $('.wrap .masonryWrap > div').each(function() {           
    if(!$(this).hasClass(filterVal)) {  
     $(this).fadeTo('slow' ,0.08).addClass('hidden');
    } else {
     $(this).fadeTo('slow' ,0.8).removeClass('hidden');
    }
   });
  }
  return false;
 });
});

I hope someone can help..

Thanks!

------edit-----

Oké i changed the event-handler in the first codeblock to:

$j(".art").hover(function() {
    if ( ! j$(this).hasClass("hidden") ) {
         $j(this).fadeTo("fast", 1.0);  
    } // Rollover at 100%
},function(){
    if ( ! j$(this).hasClass("hidden") ) {
        $j(this).fadeTo("fast", 0.8);   // Rollout at 80%
    }
});

Like CrazyJugglerDrummer said. But now the hover function doesn't work at all.. And I got a syntax error on a line far further in the document (see last line below):

<script type="text/javascript">$(function(){
    //run masonry when page first loads
    $('.wrap').masonry(); 

    //run masonry when window is resized
     $(window).resize(function() {
        $('.wrap').masonry();
     });
 }) //syntax error on this line </script>

Now i putted in the 'noConflict' and followed 'RUSS CAM's advice like this:

<script type="text/javascript">
jQuery.noConflict();jQuery(document).ready(function($) {
    //run masonry when page first loads
    jQuery('.wrap').masonry(); 

    //run masonry when window is resized
     jQuery(window).resize(function() {
        jQuery('.wrap').masonry();
     }); 

           }); // Still syntax error on this line
</script>

But now i still got the syntax error on the last line from above.

Am I doing something wrong here?

Answer 1

First of all, if you;re using $(document).ready(), you can avoid the noConflict() call to begin by using

jQuery(document).ready(function($) { ... }); // pass in jQuery as $ argument

in your hover() event handler, you just need to check for the hidden CSS class, and if present, don't perform the opacity change (via the fade).

Answer 2

Change your event handler in the first codeblock to:

$j(".art").hover(function() {
    if ( ! $j(this).hasClass("hidden") ) {
         $j(this).fadeTo("fast", 1.0);  
    } // Rollover at 100%
},function(){
    if ( ! $j(this).hasClass("hidden") ) {
        $j(this).fadeTo("fast", 0.8);   // Rollout at 80%
    }
});

If the element is hidden (hasClass("hidden")) then we don't fade it in or out. :D

Answer 3

Thanks CrazyJugglerDrummer, only now i get a syntax error on line 206 in the html file, see last line below

<script type="text/javascript">$(function(){
//run masonry when page first loads
$('.wrap').masonry(); 

//run masonry when window is resized
 $(window).resize(function() {
    $('.wrap').masonry();
 }); 

       }) //syntax error on this line </script>

This happens when i put in your code. and when i launch, all the portfolio items don't fadeIn and hover at all when te page loads.

Can somebody tell me what is causing the syntax error? And is the syntax error the reason why nothing fades in (when page loads) or hover's anymore?

Answer 4

Got it working now! I changed the event handler below:

$j(".art").hover(function() {
    if ( ! j$(this).hasClass("hidden") ) {
         $j(this).fadeTo("fast", 1.0);  
    } // Rollover at 100%
},function(){
    if ( ! j$(this).hasClass("hidden") ) {
        $j(this).fadeTo("fast", 0.8);   // Rollout at 80%
    }
});

to the code below:

$j(".art").hover(function(){
        if(!$j(this).hasClass("hidden")){
    $j(this).fadeTo("fast", 1.0); }  // Rollover at 100%
    },function(){
        if(!$j(this).hasClass("hidden")){
    $j(this).fadeTo("fast", 0.8); }  // Rollout at 80%
    });

Now i don't get the syntax error and the hover is only working for the visible items!

:)

Thank you all for your help!

Answer 5

I like that effect. Nice work. You can also take a different approach with filtering masonry, which is was I did. When filtering, I added and removed a hidden class and reloaded masonry. So the elements rearrange themselves as they are filtered in or out.

See: http://jasondaydesign.com/masonry_demo

But I am really digging your effect, the only issue being is if you have a box towards the bottom of the page with a big space in between other of the same category. A use may scroll down some, not see a box highlighted for a while and not make it to the bottom of the page.