Does not work if whole page is visible on screen

  • Hello,

    This plugin works great, but i found one little bug. There is no scroll action when all initial posts are visible on the screen. (there is no scrollbar, yet…). It should load the next posts untill a scrollbar appears.

    I’m also looking for a combination of the ‘load more’ button and infinte scroll function. Is this possible? i tried adding the ‘load more’ button manually to the html but it does not hook the action to the button. (the used js is not a delegate function)

    Kind regards, Vinzz.

Viewing 1 replies (of 1 total)
  • Thread Starter vinzzb

    (@vinzzb)

    i’ve edited main.js and now the ‘read more’ button and infinite scroll are working together. I broke the other options, but i don’t need that. I’d like to see this implemented tho.

    This is what i changed:

    Replace:

                    mapLoading = function() {
                    $('.malinky-ajax-pagination-loading[data-paginator-count="' + mymapPaginatorCount + '"]').show(), "load-more" != mymapPagingType && "infinite-scroll" != mymapPagingType || $('#malinky-ajax-pagination-button[data-paginator-count="' + mymapPaginatorCount + '"]').text(mymapLoadingMorePostsText)
                },
                mapLoaded = function() {
                    $('.malinky-ajax-pagination-loading[data-paginator-count="' + mymapPaginatorCount + '"]').hide(), "load-more" != mymapPagingType && "infinite-scroll" != mymapPagingType || $('#malinky-ajax-pagination-button[data-paginator-count="' + mymapPaginatorCount + '"]').text(mymapLoadMoreButtonText), clearTimeout(mymapLoadingTimer)
                },
                mapFailed = function() {
                    $('.malinky-ajax-pagination-loading[data-paginator-count="' + mymapPaginatorCount + '"]').hide(), clearTimeout(mymapLoadingTimer)
                },
                mapInfiniteScroll = debounce(function() {
                    if (!infiniteScrollRunning) {
                        var a = ($(document).height() - $(window).scrollTop() - $(window).height(), $(mymapPostsWrapperClass + '[data-paginator-count="' + mymapPaginatorCount + '"]').offset().top),
                            t = $(mymapPostsWrapperClass + '[data-paginator-count="' + mymapPaginatorCount + '"]').outerHeight();
                        $(window).height() + $(window).scrollTop() + mymapInfiniteScrollBuffer > a + t && (infiniteScrollRunning = !0, mapLoading(), mapLoadPosts())
                    }
                }, 250);
            "infinite-scroll" == mymapPagingType ? $(mymapNextPageSelector + '[data-paginator-count="' + mymapPaginatorCount + '"]').attr("href") && (mapAddLoader(), $(mymapPaginationClass + '[data-paginator-count="' + mymapPaginatorCount + '"]').remove(), window.addEventListener("scroll", mapInfiniteScroll)) : "load-more" == mymapPagingType ? $(mymapNextPageSelector + '[data-paginator-count="' + mymapPaginatorCount + '"]').attr("href") && ($(mymapPaginationClass + '[data-paginator-count="' + mymapPaginatorCount + '"]').last().after('<div class="malinky-load-more"><a href="' + mymapNextPageUrl + '" id="malinky-ajax-pagination-button" class="malinky-load-more__button" data-paginator-count="' + mymapPaginatorCount + '">' + mymapLoadMoreButtonText + "</a></div>"), mapAddLoader(), $(mymapPaginationClass + '[data-paginator-count="' + mymapPaginatorCount + '"]:not(:has(>a#malinky-ajax-pagination-button[data-paginator-count="' + mymapPaginatorCount + '"]))').remove(), $('#malinky-ajax-pagination-button[data-paginator-count="' + mymapPaginatorCount + '"]').click(function(a) {
                a.preventDefault(), $(this).addClass("malinky-load-more__button-disable"), mymapLoadingTimer = setTimeout(mapLoading, 750), mapLoadPosts()
            })) : "pagination" == mymapPagingType && (mapAddLoader(), $(document).on("click", mymapPaginationClass + '[data-paginator-count="' + mymapPaginatorCount + '"] a', function(a) {
                a.preventDefault(), mymapLoadingTimer = setTimeout(mapLoading, 750), mymapNextPageUrl = a.currentTarget.href, mapLoadPosts()
            }), window.addEventListener("popstate", function(a) {
                mymapNextPageUrl = document.URL, mapLoadPosts()
            }))
        },
        setUp = function() {

    With:

                    mapLoading = function() {
                    $('.malinky-ajax-pagination-loading[data-paginator-count="' + mymapPaginatorCount + '"]').show(), "infinite-scroll" != mymapPagingType || $('#malinky-ajax-pagination-button[data-paginator-count="' + mymapPaginatorCount + '"]').text(mymapLoadingMorePostsText)
                },
                mapLoaded = function() {
                    $('.malinky-ajax-pagination-loading[data-paginator-count="' + mymapPaginatorCount + '"]').hide(),  "infinite-scroll" != mymapPagingType || $('#malinky-ajax-pagination-button[data-paginator-count="' + mymapPaginatorCount + '"]').text(mymapLoadMoreButtonText), clearTimeout(mymapLoadingTimer)
                },
                mapFailed = function() {
                    $('.malinky-ajax-pagination-loading[data-paginator-count="' + mymapPaginatorCount + '"]').hide(), clearTimeout(mymapLoadingTimer)
                },
                mapInfiniteScroll = debounce(function() {
                    if (!infiniteScrollRunning) {
                        var a = ($(document).height() - $(window).scrollTop() - $(window).height(), $(mymapPostsWrapperClass + '[data-paginator-count="' + mymapPaginatorCount + '"]').offset().top),
                            t = $(mymapPostsWrapperClass + '[data-paginator-count="' + mymapPaginatorCount + '"]').outerHeight();
                        $(window).height() + $(window).scrollTop() + mymapInfiniteScrollBuffer > a + t && (infiniteScrollRunning = !0, mapLoading(), mapLoadPosts())
                    }
                }, 250);
            
			$(mymapNextPageSelector + '[data-paginator-count="' + mymapPaginatorCount + '"]').attr("href") && ($(mymapPaginationClass + '[data-paginator-count="' + mymapPaginatorCount + '"]').last().after('<div class="malinky-load-more"><a href="' + mymapNextPageUrl + '" id="malinky-ajax-pagination-button" class="malinky-load-more__button" data-paginator-count="' + mymapPaginatorCount + '">' + mymapLoadMoreButtonText + "</a></div>"), mapAddLoader(), $(mymapPaginationClass + '[data-paginator-count="' + mymapPaginatorCount + '"]:not(:has(>a#malinky-ajax-pagination-button[data-paginator-count="' + mymapPaginatorCount + '"]))').remove(), window.addEventListener("scroll", mapInfiniteScroll), $('#malinky-ajax-pagination-button[data-paginator-count="' + mymapPaginatorCount + '"]').click(function(a) {
                a.preventDefault(), $(this).addClass("malinky-load-more__button-disable"), mymapLoadingTimer = setTimeout(mapLoading, 750), mapLoadPosts()
				}))
        },
        setUp = function() {

    Set the option to ‘infinite scroll’ in the Ajax settings.

    With these changes in place, the ‘read more’ button is visible and the infinite scroll works.

    • This reply was modified 6 years, 8 months ago by vinzzb.
Viewing 1 replies (of 1 total)
  • The topic ‘Does not work if whole page is visible on screen’ is closed to new replies.