CODEWITHSUNDEEP
jqueryjquery-masonry
Chapsterj
Chapsterj

Reputation: 6625

masonry appended not working

I first try to append a template but got the same issue where it fails to append it to the projects element. Then tried to just append a jquery object called div and it does not seem to append it to the dom element projects.

var projects = $('#projects');
var tmpl = template({items : list});
console.log("render html ",  $(tmpl));
var div = $('<div class="item">WHY IS THIS NOT WORKING</div>');
projects.masonry( 'appended', div, true );

Why would this not work?

Upvotes: 1

Views: 3327

Answers (3)

Sonu Kumar Singh
Sonu Kumar Singh

Reputation: 81

Following Solution work for me:

var container = $('.masonry-container');

container.masonry({ 
   columnWidth: '.item', 
   itemSelector: '.item' 
});

$(container).append( data ).masonry("reloadItems").masonry("layout");

Upvotes: 8

Mudaser Ali
Mudaser Ali

Reputation: 4329

Following solutions works for me:-

var projects = $('#projects'); 
var elems = []; 
var fragment = document.createDocumentFragment(); 

var elem = $('<div class="item">WHY IS THIS NOT WORKING</div>').get(0); 
fragment.appendChild(elem); 
elems.push(elem);
projects.appendChild(fragment); 
msnry.appended(elems);

Upvotes: 2

Interrobang
Interrobang

Reputation: 17434

You haven't actually appended the <div> to your #projects container.

The 'appended' method on masonry just triggers layout of newly-appended elements.

Try projects.append(div) before you call Masonry again.

Upvotes: 3

Related Questions