WordPress.org

Ready to get started?Download WordPress

Forums

[Infinite Loop] can't get it working (1 post)

  1. ChristophZollinger
    Member
    Posted 2 years ago #

    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.

    http://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 http://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="http://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			: "http://www.botbots.de/wp-content/uploads/2012/01/infinite_loop_loading.png",
    	},
    	state			: {
    	currPage	: "1"
    	},
    	nextSelector    : "div.pagination div.prev a:first",
    	navSelector     : "div.pagination",
    	contentSelector : "#sort",
    	itemSelector    : "#sort div.box",
    	pathParse		: ["http://www.botbots.de/page/", "/"]
    	}, function() { window.setTimeout(infinite_scroll_callback(), 1); } );
    });
    </script>

Topic Closed

This topic has been closed to new replies.

About this Topic

  • RSS feed for this topic
  • Started 2 years ago by ChristophZollinger
  • This topic is not resolved
  • WordPress version: 3.1.1