Thread

Wondering if anyone has seen anything like done in the form of an extension or plug-in for EE2?

http://www.webresourcesdepot.com/load-content-while-scrolling-with-jquery/

You can see the demo here: http://www.webresourcesdepot.com/dnspinger/

The basic idea is to load entries as the user scrolls down. I’m re-doing an artist’s site where we have a long page of rather wide (and heavy) images. If I load the whole page it quickly grows into the megabytes, so I’m seeking a solution like this, but a little shaky on exactly how to integrate with EE.

Searching for an extension or a plug-in that could help.

UPDATE: Found this thread on the old forum:
http://ellislab.com/forums/viewthread/145315/

It’s exactly what I’d like, only it’s a bit outdated - the WP plugin their discussing has been restructured since the thread died, so I can’t apply what they learned from http://www.infinite-scroll.com/.

Here is what the new loadCallback function looks like. Seems fairly different from what Ian and Peter had been working with in this old thread (http://ellislab.com/forums/viewthread/145315/)

function loadCallback(){
        // if we've hit the last page…
        if (props.isDone){ 
            showDoneMsg();
            return false;    
              
        } else {
          
            var children = box.children().get();
            
            // if it didn't return anything
            if (children.length == 0){
              // fake an ajaxError so we can quit.
              return $.event.trigger( "ajaxError", [{status:404}] ); 
            } 
            
            // use a documentFragment because it works when content is going into a table or UL
            while (box[0].firstChild){
              frag.appendChild(  box[0].firstChild );
            }

               $(opts.contentSelector)[0].appendChild(frag);
            
            // fadeout currently makes the <em>'d text ugly in IE6
            props.loadingMsg.fadeOut('normal' ); 

            // smooth scroll to ease in the new content
            if (opts.animate){ 
                var scrollTo = $(window).scrollTop() + $('#infscr-loading').height() + opts.extraScrollPx + 'px';
                $('html,body').animate({scrollTop: scrollTo}, 800,function(){ props.isDuringAjax = false; }); 
            }
        
            // previously, we would pass in the new DOM element as context for the callback
            // however we're now using a documentfragment, which doesnt havent parents or children,
            // so the context is the contentContainer guy, and we pass in an array
            //   of the elements collected as the first argument.
            callback.call( $(opts.contentSelector)[0], children );
        
            if (!opts.animate) props.isDuringAjax = false; // once the call is done, we can allow it again.
        }
    }

I don’t have time right now to figure out what’s changed, but here’s the live example of what I was able to implement if you want to dig:

http://yesyesyall.org/blog/
http://yesyesyall.org/blog/category/inspiration (had to do things slightly different for the category pages)

Also trying to get this to work and having no joy :(

Thanks, Peter. I dug around a bit, can see your updated and complete JS, but without being able to see the raw template code it’s a little tough to puzzle out. I’ll read back through the old thread for more pointers there, otherwise if you get inspired or want to give us a few more hints we’d be grateful!

@James….yes, hellish! Please keep this thread updated with what you learn and I’ll do the same

Devs, this would be a great 10 or 20 dollar extension - just saying!

I’m going to see if i can get this going too

Just be careful of your terminology, Lazy Loading is a little different - just loading what’s not in the viewport until it is scrolled to: http://www.appelsiini.net/projects/lazyload

Great, please keep me posted! And please explain if you can in a little more detail the difference between what we’re after and so called “lazy loading”.

hi has anyone come up with a clear method for accomplishing this? i tried digging through the code on your awesome blog, peter, but although i think i replicated everything, i still can’t get it to work! very frustrating..

just wondered if anyone had made any progress and was willing to share their knowledge.

thanks!

i got it working! It took some fiddling, but it works.  The original post / explanation stands, but the infinite scroll code has changed slightly. The steps are the same, but you just need to weed through to find the appropriate things to change.  Maybe I can make an adaption of it that uses a variable and post it (so people don’t need to sift through and edit all those numbers).  Will try to do it in a few days!

ktz, do you have an easy to understand explanation how you did it?

First I tried following the notes Peter provided. But that didn’t work. Also he mentions a difference between the categories page and the blog page.

So I just copied Peter’s source code and to set up my EE template to work with it. My biggest issue was making sure the script was firing (checking URLs and variable names).

hi everyone, im sorry for the lazy replying - just been too busy to mess around with it.  I tried to create a new version of the infinite loading script that uses variables to parse the appropriate page/post numbers that need editing within, but the original script uses js regular expressions (which is beyond my level of understanding of javascript). Anyhow, i will attempt to remember / explain for the sake of future postings and for my own reference when I no doubt forget what I did 😊

First thing you have to make sure to get right is the layout of your posts within the page.  These are referenced at the beginning so if they aren’t referenced / layed out correctly, the script will fail (it took me a while to figure that out).

In my header, I’ve got the following js:

$(document).ready(function(){
     $('#posts').infinitescroll({
          navSelector : ".navigation",
          nextSelector : "a.next",
          itemSelector : ".post",
     }      
});

Note the selectors as these need to match up with the classes on your page. For instance, my page, the navigation (page next / prev buttons) are house in a div with a class called navigation with the next button having a.class of next.

<div class="navigation">
     <span></span> 
     <a href="/index.php/notes/P3class=next">Next Page</a>
</div>

After this is set up, you need to modify some of the stuff in the infinitescroll script itself.  Since it’s been a while since I edited it, I don’t entirely remember what I edited (sorry), but I know it pertained to the determinePath(path) along with the kickOffAjax function. specifically, these adjust the number of posts to load next as well as how to handle the last few posts.

In the determinePath function, I changed the numbers (almost all of them) and in the kickOffAjax function, I had to adjust the opts.currentPage part to match.  So for instance I changed the determinePath to 3 and then change the opt.currentPage to:

if (opts.currPage == 1) {
     opts.currPage = 0;
}
     opts.currPage+=3;
...

I have posted my edited infinitescroll.js file so you )hopefully) needn’t sift through that unless you want to load more than 3 posts at a time.

I hope that was helpful. Best of luck!

Great work guys, this is just what I was looking for!
I’m gonna give this a try this week, I’ll let you know how it worked out.

Any chance this could be turned into an add-on, in case someone has time to spare? 😉

Hmmm.. Great work Ktz and everyone. I ran into one tiny problem. It does load 3 new articles at the end of each page, but, the same 3 articles constantly.
I’ve tried everything (it seems to me anyway), but can’t get it to load new fresh articles, just the same 3 ones.

Anyone had the same problem? How did you fix it?
The script is implemented here; http://dksp.se/index.php/blog/