I have set up a test site using masonry and am using isotope for sorting.
I have also set up a button at the bottom that the user can click to ajax load more posts.
I have the ajax loading working properly, but when the new posts get appended to the bottom of the container the first four posts at the top all shift out of place. If I keep clicking 'load more' all subsequent posts that load load perfectly and nothing else shifts. It seems to be only the first four posts, on the first ajax load.
Anyone know why this is happening?? It's driving me crazy
Ajax Load File
// ajaxLoop.js
jQuery(function($){
var page = 1;
var loading = true;
var $window = $(window);
var $ajaxLoadMoreButton = $("body.blog .ajaxLoadMoreButton");
var $content = $("body.blog #container");
var load_posts = function(){
$.ajax({
type : "GET",
data : {numPosts : 1, pageNumber: page},
dataType : "html",
url : "wp-content/themes/twentytwelve/loopHandler.php",
beforeSend : function() {
if(page !=1) {
}
},
success : function(data){
$data = $(data);
if($data.length){
$data.hide();
$content.append($data).masonry('reload');
$data.fadeIn(500, function(){
$("#temp_load").remove();
loading = false;
});
} else {
$("#temp_load").remove();
}
},
error : function(jqXHR, textStatus, errorThrown) {
$("#temp_load").remove();
alert(jqXHR + " :: " + textStatus + " :: " + errorThrown);
}
});
}
$ajaxLoadMoreButton.click(function() {
loading = true;
page++;
load_posts();
});
});
To anyone else having this issue, after digging for hours through documentation and asking for help on SO and other sites, I have resolved the issue. The issue apparently lies within -webkit browsers and the transform property that is placed on masonry elements after appending new ones.
I used this as a reference: http://isotope.metafizzy.co/docs/help.html#disabling_transforms
and then I used this code to disable all transforms on elements:
$("#container").isotope({
itemSelector : ".brick",
transformsEnabled: false, // disables all transform properties
getSortData : {
name : function () {
$tag = $("#container").find("a[rel=tag]").text();
}
}
});