[Plugin: Infinite Scroll] can't get it working

  • Hey community,

    I am pretty frustrated with this one. I modified the Shakengrid free theme for my homepage and wanted to add infinite scroll to it.
    But now, after several days, I still can’t get it to work, and I don’t know what else I could do.

    https://www.botbots.de

    I don’t use the WP plugin, but call the “jquery.infinitescroll.min.js” in the scripts section of the header along with the function.

    The structure of my page should work according to the infos on https://www.infinite-scroll.com

    This is my structure:

    <div id="sort" class="masoned" style="position: relative; height: 919px;">
    <div class="box" style="position: absolute; left: 10px; top: 10px; margin: 10px;">
    <div class="box" style="position: absolute; left: 300px; top: 10px; margin: 10px;">
    <div class="box" style="position: absolute; left: 590px; top: 10px; margin: 10px;">
    <div class="box" style="position: absolute; left: 880px; top: 10px; margin: 10px;">
    <div class="box" style="position: absolute; left: 880px; top: 144px; margin: 10px;">
    <div class="box" style="position: absolute; left: 590px; top: 265px; margin: 10px;">
    <div class="box" style="position: absolute; left: 10px; top: 280px; margin: 10px;">
    <div class="box" style="position: absolute; left: 300px; top: 280px; margin: 10px;">
    <div class="box" style="position: absolute; left: 10px; top: 369px; margin: 10px;">
    <div class="box" style="position: absolute; left: 880px; top: 399px; margin: 10px;">
    <div class="box" style="position: absolute; left: 590px; top: 405px; margin: 10px;">
    <div class="box" style="position: absolute; left: 10px; top: 458px; margin: 10px;">
    <div class="box" style="position: absolute; left: 880px; top: 518px; margin: 10px;">
    <div class="box" style="position: absolute; left: 300px; top: 535px; margin: 10px;">
    <div class="box" style="position: absolute; left: 590px; top: 630px; margin: 10px;">
    <div class="pagination">
        <div class="prev">
        <a href="https://www.botbots.de/page/2/"> older entries </a>
        </div>
        <div class="next"></div>
    </div>
</div>

    And this is the script:

    <script type="text/javascript">

	function infinite_scroll_callback() {
						}
	jQuery(document).ready(function($) {

	$('#sort').infinitescroll({
	debug           : false,
	loading			: {
	img			: "https://www.botbots.de/wp-content/uploads/2012/01/infinite_loop_loading.png",
	},
	state			: {
	currPage	: "1"
	},
	nextSelector    : "div.pagination div.prev a",
	navSelector     : "div.pagination",
	contentSelector : "#sort",
	itemSelector    : "#sort div.box",
	pathParse		: ["https://www.botbots.de/page/", "/"]
	},  function() { jQuery('#sort').isotope( 'appended', jQuery( arguments[0] )); } );
});
</script>

    Maybe, after several attempts I messed up all the code, but I just don’t see it anymore. Where could the problem be?

    Thanks in advance
    Christoph

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

  • Hi Christoph,
    I can’t see anything obviously wrong (callback might need tweaking, but it doesn’t get to that point).

    Could you try upgrading the jQuery version you're using on your blog to 1.6+? I seem to remember there were issues with using versions older than this, in the WordPress plugin we check to make sure the version being used it at least 1.6.

    Ignore that… just looked at the actual library and it looks fine.. (the url version said 1.4.4 so confused me!). I’ll try and have a better look tonight for you. (Did you not have any luck with the actual infinite-scroll WP plugin?)

    Cheers

    Thread Starter ChristophZollinger

    (@christophzollinger)

    Hey there,

    yes, I upgraded the jquery library manually some days ago. I had the actual plugin installed before, but it didn’t work, so I wanted to give the manual process a try, as I think, that I have a bit more control over it.

    But thanks for checking in.

    Anonymous User 907751

    (@anonymized-907751)

    Same problem on my website, it doesn’t seem to be loading and it’s set the right way. Also, there seems to be a problem with the backend when browsing via Chrome.

    Hi Guys,
    Going to run another full sweep on my test rig, the code has been in alpha/beta for months so its probably something specific causing the issue that I haven’t spotted. Will post back soon ??

    @daniel I couldn’t find any issues on my rig. I’ve been looking through your site’s HTML and agree its not loading and not giving a reason… which isn’t helpful! Theres a couple of things I do notice though..
    You’re loading jQuery twice (perhaps this is conflicting?)
    https://cdn.bloginity.com/wp-includes/js/jquery/jquery.js?c3a98b
    https://cdn.bloginity.com/wp-content/themes/b6/js/jquery-1.4.2.min.js

    I think the latter is built into your theme, 1.4.2 is quite out of date (the latest infinite-scroll will only work with 1.6+). Perhaps try removing that and see if you get any luck?

    Also, could you switch the “Debug” setting to on please? Your visitors shouldn’t see anything different, it just unminifies the code and allows debug messages I can see in console.

    Thanks!

    Thread Starter ChristophZollinger

    (@christophzollinger)

    Hey everybody,

    I threw everything out of my code, I think it cant be more simple.
    The masonry stuff works, so the itemselectors are right. But still, the infinite scroll doesnt seem to work. I even copied the sample code into mine.

    Have a check on

    Thanks

    Thread Starter ChristophZollinger

    (@christophzollinger)

    Downloaded the newest version of the wordpress plugin and used it with my test page, it works !!

    Now I can start customizing

    Thanks

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘[Plugin: Infinite Scroll] can't get it working’ is closed to new replies.