rpp block overlapping

This topic contains 2 replies, has 2 voices, and was last updated by somuch77 somuch77 7 years, 1 month ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #4806
    somuch77
    somuch77
    Participant

    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 7 years, 1 month ago by somuch77 somuch77.
    #4808
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    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 :)


    #4811
    somuch77
    somuch77
    Participant

    this is awesome! thanks

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.