Cannot implement dynamic height jQuery Wookmark

Go To StackoverFlow.com

2

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.

2012-04-04 16:46
by jacktheripper


4

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();
}); 
2012-04-04 17:56
by Jarrett Barnett
THanks! Your first suggestion worked : - jacktheripper 2012-04-04 19:27
If you look at it again, the function is now working. However when i use slideToggle instead of toggle, I get unexpected results. Any suggestions - jacktheripper 2012-04-04 19:34
What kind of result do you get with slideToggle?

The problem with slideToggle (slideUp, slideDown) is the CSS that occurs to make that happen. I often like to INSPECT the element that is changing with Firebug (the individual divs where the height change is taking place), and I look at the inline CSS on that element as the event happens. -- It's possible that the CSS that slideUp/slideDown uses is conflicting with the CSS that makes the wookmark work.

My suggestion for this is to use .animate() instead. It allows for more fine tuned control - Jarrett Barnett 2012-04-04 19:45

On the element, display: none goes to display: bloc - jacktheripper 2012-04-04 23:04
Ads