I recently coded a custom function that efficiently positions absolute divs within a container by calculating top positions and heights:
$.fn.gridB = function() {
var o = $(this); //UPDATED from var o = $(this[0]);
o.each(function() {
var a1top = o.find('.article1').position().top;
var a1height = o.find('.article1').height();
var a0top = o.find('.article0').position().top;
var a0height = o.find('.article0').height();
var a2top = o.find('.article2').position().top;
var a2height = o.find('.article2').height();
var a3height = o.find('.article3').height();
var a4height = o.find('.article4').height();
var a5height = o.find('.article5').height();
if (a0height > a1height + a1top) {
$('.article3', o).css('top', a0top + a0height + 20);
} else if (a0height < a1height + a1top) {
$('.article3', o).css('top', a1top + a1height + 20);
}
$('.article4', o).css('top', a2top + a2height + 20);
$('.article5', o).css('top', a2top + a2height + 20);
$('.article6', o).css('top', a2top + a2height + a5height + 40);
$('.article7', o).css('top', a2top + a2height + a5height + 40);
var lastChildPos = o.find('div:last-child').position().top;
var lastChildHeight = o.find('div:last-child').height();
o.height(lastChildPos + lastChildHeight + 20);
});
};
The container with the class ".fours" performs perfectly on window load. However, when triggered after an ajax infinite scroll load, it fails to accurately position the absolute divs inside the subsequent ".fours" container:
function loadArticle(pageNumber) {
$('a#inifiniteLoader').fadeIn('fast');
$.ajax({
url: "wp-admin/admin-ajax.php",
type: 'POST',
data: "action=infinite_scroll&page_no=" + pageNumber + '&loop_file=loop',
success: function(html) {
$('a#inifiniteLoader').fadeOut('1000');
$("#content").append(html); // Content will be loaded here
$('.fours:last').preloader_index();
$('.fours').gridB(); // UPDATED from $('.fours:last').gridB();
$('.article a').on({
mouseenter: function() {
if (!$('.preloader', $(this).parent('.article')).length > 0) {
$(this).stop().css('opacity', '1');
}
},
mouseleave: function() {
if (!$('.preloader', $(this).parent('.article')).length > 0) {
$(this).stop().css('opacity', '0');
$('.article-info', $(this).parent('.article')).stop().fadeTo(200, 0);
}
}
});
}
});
return false;
}
I am close to resolving the issue. When I include .fours:last in the gridB() function call post ajax success, only the top position of the divs is calculated disregarding the heights. Removing :last results in neglecting both top position and heights.
Any assistance appreciated.
UPDATE: Below is an example of the HTML related to this issue:
<div id="content">
<div class="fours">
<div class="article article0">
<div><img src="url" /></div>
</div>
<div class="article article1">
<div><img src="url" /></div>
</div>
<div class="article article2">
<div><img src="url" /></div>
</div>
<div class="article article3">
<div><img src="url" /></div>
</div>
</div>
<!-- Next ".fours" div loads here through ajax function -->
</div>
UPDATE 2: Modified the gridB function line to var o = $(this); from var o = $(this[0]); and adjusted the function call to $('.fours').gridB(); instead of $('.fours:last').gridB(); The script now correctly positions all absolute divs within the ajax-loaded sets but with values identical to the first set of articles. A more targeted approach required as :last does not suffice.