Question

<script>
$(window).load(function () {
    var $wall = $('#content');
    $wall.imagesLoaded(function () {
        $wall.masonry({
            itemSelector: '.oddpost',
        isAnimated: true
    });
    $(".oddpost").each (function (idx, el) {   
     if ($(el).position().left < $(el).width()) {
      $('.rightarrow', el).show();
     }
     else {
      $('.leftarrow', el).show();
     }
 });
});

$wall.infinitescroll({
    navSelector: '#pagination',
    nextSelector: '#pagination li a.pagination_nextlink',
    itemSelector: '.oddpost',
    loadingImg: "http://static.tumblr.com/qrevc1p/WTKlx2dsg/gsnjnwui-um.gif",
    loadingText: " ",
    donetext: " ",
    bufferPx: 100,
    debug: false,
    errorCallback: function () {
        $('#infscr-loading').animate({
            opacity: .8
        }, 2000).fadeOut('normal');
    }
}, function (newElements) {
    var $newElems = $(newElements);
    $newElems.hide();
    $newElems.imagesLoaded(function () {
        $wall.masonry('appended', $newElems, {
            isAnimated: true,
            animationOptions: {
                duration: 900,
                easing: 'linear',
                queue: false
            }
        }, function () {
            $newElems.fadeIn('slow');    
        });
    });
  });
$('#content').show(500);
  });
  </script>

I’m using that script on a Tumblr theme I’m working on to apply masonry and infinite scrolling on it. It’s a two column layout so the divs only goes either to the left or to the right. And aside from applying masonry on the theme, it also puts an arrow(.rightarrow) on the div that goes to the left and a different arrow(.left arrow) for the ones that goes to the right.

So far all of that is working fine now. My problem starts when the next page is loaded. Apparently, the arrow codes only applies on the first page but not on the newly appended elements. I’ve tried iterating the arrow codes on different parts of the codes but i Had no lucks on it. It’s really starting to confuse me. I’m not new to jQuery but I’m really having a hard time trying to make this work.

Can anybody tell me which part I should put the arrow codes so it would apply to the newly appended divs too?

Answer 1

You need to run the code that shows the arrows after they have been added to the page.

I recommend you use a function to avoid copy/paste.

/**
 * Shows the appropiate arrow for a given element.
 */
function showArrowOn(el) {
  if ($(el).position().left < $(el).width()) {
    $('.rightarrow', el).show();
  } else {
    $('.leftarrow', el).show();
  }
}

$(window).load(function () {
  ...
  $(".oddpost").each(function (idx, el) { 
     // Using function to show the arrows on the items at window load.
     showArrowOn(el); 
  }
}

$wall.infinitescroll({
  ...
  $newElems.imagesLoaded(function () {
    $wall.masonry('appended', $newElems, {
      ...
      }, function () { 
        // Show the arrows once the new elems are appended.
        $newElems
          .fadeIn('slow')
          .each(function () { showArrowOn(this); });
      });

});

You might have some troubles with your logic for showing the arrows on the new elements, because these are not visible at the time you ask jQuery for their position and width (depends on your css), if you are having trouble, try the following:

$newElems.fadeIn('slow', function () { showArrowOn(this); });

To calculate the arrow to show once the item is visible.