rpp block overlapping

[somuch77Participant]

my rpp item/block overlapping. i have 6 item on rpp, on desktop it start as 3 above and 3 bottom, on mobile, i change it with css (using @media) and the position changed to 2 top, 2 mid, and 2 bottom.
on mobile, sometimes top 2 position above (overlapping) mid 2. check on screenshot
the wrong one http://imgur.com/1VjUTAy
after resize fixed http://imgur.com/mvwE3Kk (from portrait to landscape to portrait again).

it seems appear because the isotope start too quick when the block haven’t fully ready. here’s almost similar problem on stackoverflow. http://stackoverflow.com/questions/8622906/isotope-overlapping-images

i’m new with jquery and js, i don’t know where to fix, please give me detailed fix. thank you so much!

• This topic was modified 8 years, 11 months ago by  somuch77.

[Ernest MarcinkoKeymaster]

Hi!

Thank you for reporting this. The stackoverflow link was actually very useful. I’ve once experienced this issue, but I thought it was just some one time rendering problem.

It looks like that the problem is indeed the too early loading of the isotope, when the images are not loaded yet – and the block height calculation is incorrect. I think the best solution is to force a layout change when the images are loaded. That way the isotope loads with the page, and re-renders the correct spacing when the images are ready, without causing a lag.

You will have to do 2 things in order to fix this until I incorporate a bugfix:

1. Open up the plugin file plugins/related-posts-pro/js/nomin/type.wrapper.js and go to lines 89 – 107, where you should see this:

create_isotope: function() {
 return isotope = new rpp_isotope( this.o.node, {
      // options
      itemSelector: this.o.elements,
      layoutMode: this.o.isotopeLayout,
      filter: this.o.filterFns[this.o.initiallyShow],
      sortBy: this.o.defSortValue,
      sortAscending: (this.o.defSortOrder=="desc"?false:true),
      getSortData: {
        rpp_title: this.o.titleSelector,
        rpp_relevance: this.o.relevanceSelector + ' parseInt',
        category: '[data-category]',
        weight: function( itemElem ) {
          var weight = $( itemElem ).find('.weight').text();
          return parseFloat( weight.replace( /[\(\)]/g, '') );
        }
      }
 });
},

replace that function with this code:

create_isotope: function() {
 var iso = new rpp_isotope( this.o.node, {
      // options
      itemSelector: this.o.elements,
      layoutMode: this.o.isotopeLayout,
      filter: this.o.filterFns[this.o.initiallyShow],
      sortBy: this.o.defSortValue,
      sortAscending: (this.o.defSortOrder=="desc"?false:true),
      getSortData: {
        rpp_title: this.o.titleSelector,
        rpp_relevance: this.o.relevanceSelector + ' parseInt',
        category: '[data-category]',
        weight: function( itemElem ) {
          var weight = $( itemElem ).find('.weight').text();
          return parseFloat( weight.replace( /[\(\)]/g, '') );
        }
      }
 });
 $(window).load(function() {
   iso.layout();
 });
 return iso;
},

2. Change the javascript source to non-minified – because the change is applied only there. Go to the Compatibility Settings submenu and change the Javascript source option to Non minified: https://i.imgur.com/fsXFjNr.png

After clearing your cache and refreshing the page a few times the issue should be solved.

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[somuch77Participant]

this is awesome! thanks

[Author]

Posts