Home/ Questions/Q 6703973
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T07:14:05+00:00

I’m trying to add an function to an a click event to my code.

  • 0

I’m trying to add an function to an a click event to my code. This is to use Isotope.js, a pretty cool jQuery tool, by the way.

So the code below works as follows: Clicking on the data-filter link in the <ul> fires isotope. That populates the page with the various <li> that match the data-filter parameter. All good.

But then I have additional code that modifies the size of one <li> so I need isotope to fire the following on the click of any <li> – Isotope is a dynamic page layout tool that uses masonry.

.isotope( 'reLayout', callback )

Which resets layout properties and lays-out every item element.
See – isotope.js relayout

I think I just need another piece of code for the script that triggers the relayout function when an <li> is clicked.

This is what I have…

<ul><a class="black" href="#" data-filter=".'.$folder.'">'.$folder.'</a> </ul>';

<li><a href="'.$file.'">'.rtrim($name,'.mp3').'</a></li>;

<script>
  $('#filters a').click(function(){
  var selector = $(this).attr('data-filter');
  $('#container').isotope({ filter: selector });
  return false;
});

$('#container').isotope({
  masonry : {
    columnWidth : 1
  }

 }); 
</script>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
          // change size of clicked element
      $container.delegate( '.element', 'click', function(){
        $(this).toggleClass('large');
        $container.isotope('reLayout');
      });

    This is the code http://isotope.metafizzy.co/demos/relayout.html page uses when they do exactly what you are trying to do. This same approach should work for you to.

    So $container would be your $(“#container”) and .element would be the same as the elements in your container. This adds or removes a class “large” which the class “large” has css which gives that element a larger size. Then as you noted the isotope gets called with “relayout”.

    • 0