How can I append new elments returned by Jquery/AJAX with shapeshift ??

[mase857]

First of all , let me say this .. I find shapeshift WAY better than Masonry , it really does a better job , I love the drag and drop feature as well ... How can I apply shapeshift to elements returned by AJAX placed in a div and give them the grid layout look ?

Also , it seems that Shapeflit breaks when I use it inside Jquery tabs .. like if I use it inside a tab , when I click on a tab , the grid layout is broken .. How can I fix those two issues ? Otherwise GOOD job with this plugin !!!

For example with AJAX .. when I scroll , new elements are appended with AJAX .. How can I make shapelift be applied to the new appended elements in the loaded_data div

$(window).scroll(function(){ if ($(window).height() + $(window).scrollTop() == $(document).height()) { // make an ajax call to your server and fetch the next 100, then update //some vars var url = '<?php echo $image_url;?>'; $.ajax({ type:'POST', url: "scroll_data.php", data:{image_url: '<?php echo $image_url;?>'}, success: function(result){

          var obj = $($.parseHTML(result));

           //  how can I append elements with shapelift so they can keep the grid layout ?

            $(".loaded_data").append(obj);
           $('.tweet_link').embedly({
             key: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
              query: {maxwidth:270, maxheight:1100} 
         });

        }
    });
}

});

[ghaliano]

You can insert your returned html ajax element in your container and trigger the $(".ss-container").trigger("ss-rearrange"); event see the https://github.com/McPants/jquery.shapeshift/wiki/2.0-api-documentation#triggering-a-rearrange section

[mase857]

OK .. I'll try it ... Thanks !!!!

[mase857]

It's not working ... the live test site is at http://trialsite.biz/home.php and my code is below

$(window).scroll(function(){
  if ($(window).height() + $(window).scrollTop() == $(document).height()) {
  // make an ajax call to your server and fetch the next 100, then update
  //some vars
  $.ajax({
    type:'POST',
    url: "scroll_data.php",
    data:{image_url: 'http://pbs.twimg.com/profile_images/1821098433/photo__1__normal.JPG'},
    success: function(result){
      var $panel = $('#panel');
        //alert(result);
        var obj = $($.parseHTML(result));
             // append content to first container
             obj.find('.tweet_link').embedly({
               key: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
               query: {maxwidth:270, maxheight:1100},
               done: function() {

                  // append to container 
                      $panel.append(obj).trigger("ss-rearrange");

               }
             });

           }
         });
   }

});

[ghaliano]

hmm, in the given link it look like you use masonry lib for your panel and not the shapeShift one ,,, $(window).on('load', function () { $('#panel').masonry({ itemSelector : '.tweet_box' }); }); ,,, where your shapeshift call ?

[mase857]

That was actually commented out ... If you look at the viewsource of http://www.trialsite.biz/home.php , you'll see that I added $('#panel').shapeshift(); .. What could be going wrong ? does shapeshift work with AJAX as well ?? Thanks in advance ... looking forward to your response . I tried to google it but I couldnt find any answer to this issue

[mase857]

On scroll , the AJAX returns divs not applied to shapeshift ..