Question

I have some divs that have dynamic heights controlled by a ‘click’ function as below:

$('.expand').click(function() {
  $(this).next('.collapse').slideToggle();
});

I am attempting to apply the jQuery wookmark plugin to the divs, and it works, apart from when their heights are dynamically resized by expanding one of the sections. From the documentation, I copied over one of the examples to my code, and the dynamic height works

        $(document).ready(new function() {
          // Prepare layout options.
          var options = {
            autoResize: true, // This will auto-update the layout when the browser window is resized.
            container: $('#container'), // Optional, used for some extra CSS styling
            offset: 30, // Optional, the distance between grid items
            itemWidth: 300 // Optional, the width of a grid item
          };

          // Get a reference to your grid items.
          var handler = $('.outerwrapper');

          // Call the layout function.
          handler.wookmark(options);

          // Capture clicks on grid items.
          handler.click(function(){
            // Randomize the height of the clicked item.
            var newHeight = $('img', this).height() + Math.round(Math.random()*300+30);
            $(this).css('height', newHeight+'px');

            // Update the layout.
            handler.wookmark();
          });
        });

You can see this working here. How can I make it so that when you click one of the headings inside the divs, the layout updates, as it does in the example. Thanks in advance.

Answer 1

Usually third party jQuery plugins include some kind of “Refresh” or “Resize” function.

Taking a quick look at the function, it doesn’t appear to have one; however, since there is an “autoResize” option (which will reload the layout on browser resize), you could simply create a click event that triggers the “resize” event like so:

JAVASCRIPT:

$("h1.resize").live("click", function()
{
    $(window).trigger('resize');
}); 

http://api.jquery.com/trigger/

http://api.jquery.com/resize/

---

EDIT:
Re-reading the question again,
Looks like this:
handler.wookmark();

should refresh the layout (based on your posted code). So you should be able to use that instead of the resize trigger.

$("h1.resize").live("click", function()
{
    handler.wookmark();
});