Load more button

$(function(){ $("div").slice(0, 10).show(); // select the first ten $("#load").click(function(e){ // click event for load more e.preventDefault(); $("div:hidden").slice(0, 10).show(); // select next 10 hidden divs and show them if($("div:hidden").length == 0){ // check if any hidden divs still exist alert("No more divs"); // alert if there are none left } }); });

<!DOCTYPE html> <html lang="en"> <head> <title>How To Create Javascript Load More Content On Click Button</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body>  <div class="list"> <div class="list-element">Product 1</div> <div class="list-element">Product 2</div> <div class="list-element">Product 3</div> <div class="list-element">Product 4</div> <div class="list-element">Product 5</div> <div class="list-element">Product 6</div> </div>  <button id="loadmore">Load More...</button> </body> </html>

using show more button show infinite content

/*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);
              }
          });
      }

  });

Posted by: Guest on December-07-2020

Source

Answers for "Load more button"

Code answers related to "Load more button"

Code answers related to "Whatever"

Browse Popular Code Answers by Language

Popular Programming Languages

Advertisements

Company

Compilers

Help

Connect with us