Jquery callbacks with masonry pluggin

Question

I have a basic toggle switch that shows the clicked on div while closing all other similar divs. This works just fine, the toggle is not the issue. See below:

$(document).ready(function(){
 $('.threadWrapper > .littleme').click(function() {
  $(this).next().toggle('slow');
  $(this).toggle('slow');
  $('.littleme').not(this).next().hide('slow');
  $('.littleme').not(this).show('slow');
  return false;
 }).next().hide();
});

I also have made use of the Masonry pluggin for jQuery, which organises all selected div elements horrizontally and then vertically. Brilliant that works as well for all kinds of different div heights. See below:

$(function(){
    $('#mainContent').masonry({
    columnWidth: 200, 
    itemSelector: '.threadWrapper:visible',
});
});

What I want it to do is reorganise the layout every time a div expands or collapses. In effect triggering the .masonry command as a callback for the initial .click function. This is what isn't working for me. Appologies for the beginners question.

See how its currently working here: kalpaitch.com

Andrew

Gaby - Thanks for the syntax check, I'm pretty good at fluffing those up and then spending about half an hour running round looking for them.

Cyro - Thats perfect and works, I will be using this for the near future. What I had intended to add in was how this would be achieved in the case of show/hide/toggling these WITH an animation speed (code above changed accordingly). Then the masonry call would fire before the divs are expanded (as is currently happening at kalpaitch.com). Many thanks for the answer though, its definitely easier this way.

Answer 1

You have a wrong path where you include the masonry.js file..

you use js/jquery.masonry.js when it should be JS/jquery.masonry.js (capital JS)

and you have an extra comma (,) at the end of the options you pass to masonry ..

After you fix those errors in your example, just run the masonry code again like Cryo mentioned in his answer...

Answer 2

Try re-running the masonry call to readjust the page after the click changes resolve:

$(document).ready(function(){
 $('.threadWrapper > .littleme').click(function() {
  $(this).next().toggle();
  $(this).toggle();
  $('.littleme').not(this).next().hide();
  $('.littleme').not(this).show();

  // re-run masonry
  $('#mainContent').masonry({
    columnWidth: 200, 
    itemSelector: '.threadWrapper:visible'
  });

  return false;
 }).next().hide();
});

EDIT: Looking at the Masonry docs it seems that Masonry will save your initial settings so you just have to call the main method again. This should work as well:

$(document).ready(function(){
 $('.threadWrapper > .littleme').click(function() {
  $(this).next().toggle();
  $(this).toggle();
  $('.littleme').not(this).next().hide();
  $('.littleme').not(this).show();

  // re-run masonry
  $('#mainContent').masonry();

  return false;
 }).next().hide();
});

Answer 3

I also had a toggle, and couldn't get masonry to reload for that effect. But I did get masonry to reload when items were faded out (filtered).

See: http://jasondaydesign.com/masonry_demo/