CODEWITHSUNDEEP
javascriptjqueryjquery-masonry
Sebastian
Sebastian

Reputation: 3628

Creating Masonry items with jQuery

I need to be able to create Masonry items in jQuery rather than HTML. However, the below fails to output anything. By contrast, the commented out HTML equivalent works perfectly.

Is there a workaround for this?

HTML:

<div id="container" class="feed">
    <!-- this would work fine:
        <div class="item">hey</div>
        <div class="item">hi</div>
        <div class="item">hello</div>
    -->
</div>

jQuery:

$("div.feed").html("<div class='item'>hey</div><div class='item'>hi</div><div class='item'>hello</div>");

EDIT

To be clear, that jQuery is appending what it's supposed to where the commented out HTML is. My issue is making Masonry respond to that - the three divs should be side-by-side.

Upvotes: 0

Views: 144

Answers (1)

Ford
Ford

Reputation: 2597

Masonry lays out once and only once unless you bind resize to it using either one of 

msnry.bindResize()
// or with jQuery
$container.masonry('bindResize')

In which case, when the window is resized, the Masonry instance will reload itself by recollecting the items and laying them out again. So there are two options to your problem.

Edit:
You should really use the appended method. Here's an example using your html elements.

var $fragment = $("<div class='item'>hey</div> \
    <div class='item'>hi</div><div class='item'>hello</div>");
$('div.feed').append($fragment).masonry('appended', $fragment);

JSFiddle: http://jsfiddle.net/5xfpF/

Upvotes: 1

Related Questions