Load more button instead of infinite scroll on social activity

Blog, Ultimate Member

The social activity plugin is a great add-on for Ultimate Member, it looks great, and offers real interaction on your site between your members. Your users can add pictures, video’s, drop quick notes, etc. I’ve added the UM Tagging plugin to allow users to quickly tag each other, but other than that, it’s perfect. There’s only one feature I don’t really like: the infinite scroll feature. When you scroll down, more items are loaded. This really looks nice, but has the disadvantage a user can never reach the footer. And if you have a mobile website where the right sidebar slides under the main content, a user will also never get to see the right sidebar.

You guessed right: this is the situation I encountered on one of the websites I manage. So the customer asked me to change it to a load more setup. Only 5 posts should get loaded, the user can choose to load more posts by clicking a “load more” button. The number of posts you want to load can be edited in the Ultimate Member settings. For the load more I needed to override the infinite scroll feature of the social activate plugin, if possible without editing the plugin itself, so we can update the plugin without problems when an new update arrives.

Luckily, with some lines of jquery and css this can be fixed fairly easily:

  /*Change infinite scroll into load more button */

  //prevent the infinite scroll from running with a hack 
  $('.um-activity-wall').attr('data-single_post', 'TRUE');

  //set up a function which inserts a load more button, and removes the animated gif
  function ioh_append_loadmore_btn() {
      var lastDiv = $('.um-activity-load:last');
      lastDiv.html('<div class="ioh_load_more btn btn-primary">Load more</div>');
      lastDiv.show();
      lastDiv.addClass('ioh_load_more_container');
      lastDiv.removeClass('um-activity-load');
  }
  ioh_append_loadmore_btn();

  //add an event listener to the added load more button, which executes the loading. 
  $(document).on('click', '.ioh_load_more', function() {
      var wall = jQuery('.um-activity-wall');
      if ( wall.length > 0
          && jQuery(window).scrollTop() + jQuery(window).height() >= wall.offset().top + wall.height()
          // && jQuery('.um-activity-widget:not(.um-activity-new-post):visible').length >= jQuery('.um-activity-wall').attr('data-per_page')
          && Loadwall_ajax === false) {

          Loadwall_ajax = true;
          var lastDiv = $('.ioh_load_more_container:last');
          lastDiv.addClass('um-activity-load');

          jQuery.ajax({
              url: wp.ajax.settings.url,
              type: 'post',
              data: {
                  action: 'um_activity_load_wall',
                  offset: jQuery('.um-activity-widget:not(.um-activity-new-post):visible').length,
                  user_id:  wall.data('user_id'),
                  user_wall: wall.data( 'user_wall' ),
                  hashtag: wall.data('hashtag'),
                  nonce: um_scripts.nonce
              },
              success: function( data ) {
                  jQuery('.um-activity-load').hide();

                  if ( data === '' ) {
                      Loadwall_ajax = true;
                  } else {
                      jQuery('.um-activity-wall').append( data );
                      Loadwall_ajax = false;
                  }

                  ioh_append_loadmore_btn();

              },
              error: function (e) {
                  console.log('UM Social Activity Error', e);
              }
          });
      }

  });

Now we only need to add some styling. I use bootstrap, so adding the classes btn and btn-primary is enough to create a button look. If you don’t use bootstrap, you’ll need to add some button styles yourself.

.ioh_load_more_container {
  margin-top: 25px;
}

.ioh_load_more {
  cursor:pointer;
}

Leave a Reply

Your email address will not be published. Required fields are marked *

×