Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Issues with isotope appending

I am using isotope to build a smooth grid gallery. Currently I am having issues with the append feature: http://isotope.metafizzy.co/docs/methods.html#appended

If I call the append like this

$('#loadMore').click(function(){
    val='<div class="content-box masonry-brick img11"><a href="#"><img src="images/1.jpg" style="width: 290px; height: 163.36666666666667px; "><div class="portfolio-more"><div class="portfolio-icon"></div></div></a><div class="content-box-content"><h3 class="post-info">Lifestyle / People</h3><h2>Street Life</h2></div></div>';

    var $container = $('#grid-gallery');
    $container.isotope( 'appended', val)

    return false;
  }); 

Then isotopes spits out the following error msg:

[content] has no method 'filter'

If I add positioning to the div, then it works fine, except the new element is loaded to that position and remains fixed.

like image 639
Chris Samson Avatar asked Apr 05 '12 18:04

Chris Samson


1 Answers

Change:

$container.isotope( 'appended', val);

To

$container.isotope( 'append', $(val) );

Or you could do this if you want it cleaner....

$('#loadMore').click(function(){

    val= $('<div class="content-box masonry-brick img11"><a href="#"><img src="images/1.jpg" style="width: 290px; height: 163.36666666666667px; "><div class="portfolio-more"><div class="portfolio-icon"></div></div></a><div class="content-box-content"><h3 class="post-info">Lifestyle / People</h3><h2>Street Life</h2></div></div>');

    var $container = $('#grid-gallery');
    $container.isotope( 'insert', val );

    return false;
}); 
like image 70
Andy Avatar answered Oct 01 '22 02:10

Andy