• Hi!

    I have an issue while using infinite scroll with loading sliders. In the page, the first slider is loading correctly but when we scroll, the slider that is on the second page is not displayed because some div or class are not there.

    For the infinite scroll effect I use this script :

    /**
     * jquery.clever-infinite-scroll.js
     * Working with jQuery 2.1.4
     *
     * Twitter: @watarutwt
     * GitHub: @wataruoguchi
     */
    /* global define, require, history, window, document, location  */
    (function(root, factory) {
      "use strict";
      if (typeof define === "function" && define.amd) {
        define(["jquery"], factory);
      } else if (typeof exports === "object") {
        factory(require("jquery"));
      } else {
        factory(root.jQuery);
      }
    })(this, function($) {
      "use strict";
      /**
       * Elements it reffers. Each page must has those selectors.
       * The structure must be same as article1.html
       * #contentsWrapper, .content, #next
       */
      $.fn.cleverInfiniteScroll = function(options) {
        /**
         * Settings
         */
        var windowHeight = (typeof window.outerHeight !== "undefined") ? Math.max(window.outerHeight, $(window).height()) : $(window).height(),
          defaults = {
            contentsWrapperSelector: "#contentsWrapper",
            contentSelector: ".content",
            nextSelector: "#next",
            loadImage: '<a class="et_pb_button">Voir plus d\'articles </a>',
            offset: windowHeight,
          },
          settings = $.extend(defaults, options);
    
        /**
         * Private methods
         */
        var generateHiddenSpans = function(_title, _path) {
            return "<span class='hidden-title' style='display:none'>" + _title + "</span><span class='hidden-url' style='display:none'>" + _path + "</span>";
          },
          setTitleAndHistory = function(_title, _path) {
            // Set history
            history.replaceState(null, _title, _path);
            // Set title
            $("title").html(_title);
          },
          changeTitleAndURL = function(_value) {
            // value is an element of a content user is seeing
            // Get title and path of the article page from hidden span elements
            var title = $(_value).children(".hidden-title:first").text(),
              path = $(_value).children(".hidden-url:first").text();
            if ($("title").text() !== title) {
              // If it has changed
              $(settings.contentSelector).removeClass("active");
              $(_value).addClass("active");
              setTitleAndHistory(title, path);
              $(document).trigger('clever-infinite-scroll-url-change', [title, path]);
            }
          };
    
        /**
         * Initialize
         */
        // Get current page's title and URL.
        var title = $("title").text(),
          path = $(location).attr("href"),
          documentHeight = $(document).height(),
          threshold = settings.offset,
          $contents = $(settings.contentSelector);
        // Set hidden span elements and history
        $(settings.contentSelector + ":last").append(generateHiddenSpans(title, path));
        $(settings.contentSelector).addClass("active");
        setTitleAndHistory(title, path);
    
        /**
         * scroll
         */
        var lastScroll = 0,
          currentScroll;
        $(window).scroll(function() {
          // Detect where you are
          window.clearTimeout($.data("this", "scrollTimer"));
          $.data(this, "scrollTimer", window.setTimeout(function() {
            // Get current scroll position
            currentScroll = $(window).scrollTop();
    
            // Detect whether it's scrolling up or down by comparing current scroll location and last scroll location
            if (currentScroll > lastScroll) {
              // If it's scrolling down
              $contents.each(function(key, value) {
                if ($(value).offset().top + $(value).height() > currentScroll) {
                  // Change title and URL
                  changeTitleAndURL(value);
                  // Quit each loop
                  return false;
                }
              });
            } else if (currentScroll < lastScroll) {
              // If it's scrolling up
              $contents.each(function(key, value) {
                if ($(value).offset().top + $(value).height() - windowHeight / 2 > currentScroll) {
                  // Change title and URL
                  changeTitleAndURL(value);
                  // Quit each loop
                  return false;
                }
              });
            } else {
              // When currentScroll == lastScroll, it does not do anything because it has not been scrolled.
            }
            // Renew last scroll position
            lastScroll = currentScroll;
          }, 200));
    
          if ($(window).scrollTop() + windowHeight + threshold >= documentHeight) {
            // If scrolling close to the bottom
    
            // Getting URL from settings.nextSelector
            var $url = [$(settings.nextSelector).attr("href")];
            $(settings.nextSelector).remove();
            if ($url[0] !== undefined) {
              // If the page has link, call ajax
              if (settings.loadImage !== "") {
                $(settings.contentsWrapperSelector).append("<a class='et_pb_button' id='cis-load-img'>Lire l'article suivant</a>");
              }
              $.ajax({
                url: $url[0],
                dataType: "html",
                success: function(res) {
                  // Get title and URL
                  title = $(res).filter("title").text();
                  path = $url[0];
                  // Set hidden span elements and history
                  $(settings.contentsWrapperSelector).append($(res).find(settings.contentSelector).append(generateHiddenSpans(title, path)));
                  if ($(res).find(settings.contentSelector).find(settings.nextSelector).length === 0) {
                    //If there is no nextSelector in the contentSelector, get next Slecter from response and append it.
                    $(settings.contentsWrapperSelector).append($(res).find(settings.nextSelector));
                  }
                  documentHeight = $(document).height();
                  $contents = $(settings.contentSelector);
                  $("#cis-load-img").remove();
                  $(document).trigger('clever-infinite-scroll-content-loaded');
                }
              });
            }
          }
        }); //scroll
    
        return (this);
      }; //$.fn.cleverInfiniteScroll
    });

    I think there is an issue with some jquery that is not loaded.

    Can someone help me fixing this ?

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author simonpedge

    (@simonpedge)

    Couple of things…

    1) If you have multiple SA sliders on a page, then each slider must have a unique CSS ID (see the “CSS #id for Slider” setting under “Slider Style”)

    2) Try ticking the “DOMContentLoaded event” checkbox (under “Other Settings”) for each slider – this generally resolved ‘jQuery not loaded yet’ type issues.

    Thread Starter popau33

    (@popau33)

    Hi,thanks you for the answer (and sorry to answer back so late) ! I’ve tried what you suggest but unfortunately, the content of the slider still doesn’t load in the infinite load… For example when you scroll on this page : https://www.bloomers.eco/klaoos/

    Plugin Author simonpedge

    (@simonpedge)

    I’ve no idea. I would guess that the Ajax Loader which is loading each individual post into the page is adding the HTML code but is not firing off the required JavaScript event in order to execute the SA jQuery initialisation code (whether that be the ‘on ready’ event or ‘DOMContent loaded’ event).

    When a SA is loaded on the page, there are 2 parts, the HTML code containing slider+slides and the jQuery code which is executed to initialise the Owl Carousel slider. The 2nd part is executed by a standard DOM page load event, the ‘on ready’ event (which is commonly used), but I also provided the option to load the Owl Carousel jQuery code within the ‘DOMContentLoaded’ event.

    Maybe contact the developer of the Infinite Scrolling plugin to see if they have a suggestion.

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

The topic ‘Issue loading sliders using infinite scroll’ is closed to new replies.