Recent Topics

Infinite Scroll Plugin

Started by on Dec 18, 2010 – Contents updated: Dec 18, 2010

Dec 18, 2010 11:05    

The plugin gives tou the ability to load next set of posts as you reach the end of the page, so that the user does not have to click and load another page.

http://www.tilqi.com/assets/ssi.jpg

Download : https://sourceforge.net/projects/evocms-plugins/files/infinite_scroll_plugin/

Demo: http://www.eodepo.com/demo/blog1.php

Dec 18, 2010 13:33

Demo doesn't work.

Nice plugin by the way, I'll try it on my website :)

Dec 18, 2010 13:50

sam2kb wrote:

Is page cache enabled?

maybe, i dont know, it is a default 4.0.1 install

Dec 18, 2010 14:00

Use this instead. No need to load jQuery from google if it's included in b2evo already

PHP

function SkinBeginHtmlHead()
{
    $plug_url $this->get_plugin_url();
    
    $inf_content $this->Settings->get'inf_content' );
    $inf_nav $this->Settings->get'inf_nav' );
    $inf_post $this->Settings->get'inf_post' );
    $inf_bufferPx $this->Settings->get'inf_bufferPx' );
    $inf_animate $this->Settings->get'inf_animate' );
    $inf_extraScrollPx $this->Settings->get'inf_extraScrollPx' );
    $inf_loadingText $this->Settings->get'inf_loadingText' );
    $inf_donetext $this->Settings->get'inf_donetext' );
    $inf_debug $this->Settings->get'inf_debug' );
    
 
    $js 'jQuery(document).ready(function() {
        jQuery("'.$inf_content.'").infinitescroll({ 
            navSelector  : "'.$inf_nav.'",
            nextSelector : "'.$inf_nav.' a:first",    
            itemSelector : "'.$inf_post.'",
            loadingImg   : "'.$plug_url.'ajax-loader.gif"';
        
    if(!empty($inf_bufferPx))        $js .= ', bufferPx:'.$inf_bufferPx;
    if(!empty($inf_animate))        $js .= ', animate:'.$inf_animate;
    if(!empty($inf_extraScrollPx))    $js .= ', extraScrollPx:'.$inf_extraScrollPx;
    if(!empty($inf_loadingText))    $js .= ', loadingText:"'.$inf_loadingText.'"';
    if(!empty($inf_donetext))        $js .= ', donetext:"'.$inf_donetext.'"';
    if(!empty($inf_debug))            $js .= ', debug:'.$inf_debug;
    
    $js .= '});
        });';
 
    require_js'#jquery#' );
    require_js$plug_url.'jquery.infinitescroll.js'true );
    add_js_headline$js );
}

Dec 18, 2010 14:10

sam2kb wrote:

Use this instead. No need to load jQuery from google if it's included in b2evo already

PHP

function SkinBeginHtmlHead()
{
    $plug_url $this->get_plugin_url();
    
    $inf_content $this->Settings->get'inf_content' );
    $inf_nav $this->Settings->get'inf_nav' );
    $inf_post $this->Settings->get'inf_post' );
    $inf_bufferPx $this->Settings->get'inf_bufferPx' );
    $inf_animate $this->Settings->get'inf_animate' );
    $inf_extraScrollPx $this->Settings->get'inf_extraScrollPx' );
    $inf_loadingText $this->Settings->get'inf_loadingText' );
    $inf_donetext $this->Settings->get'inf_donetext' );
    $inf_debug $this->Settings->get'inf_debug' );
    
 
    $js 'jQuery(document).ready(function() {
        jQuery("'.$inf_content.'").infinitescroll({ 
            navSelector  : "'.$inf_nav.'",
            nextSelector : "'.$inf_nav.' a:first",    
            itemSelector : "'.$inf_post.'",
            loadingImg   : "'.$plug_url.'ajax-loader.gif"';
        
    if(!empty($inf_bufferPx))        $js .= ', bufferPx:'.$inf_bufferPx;
    if(!empty($inf_animate))        $js .= ', animate:'.$inf_animate;
    if(!empty($inf_extraScrollPx))    $js .= ', extraScrollPx:'.$inf_extraScrollPx;
    if(!empty($inf_loadingText))    $js .= ', loadingText:"'.$inf_loadingText.'"';
    if(!empty($inf_donetext))        $js .= ', donetext:"'.$inf_donetext.'"';
    if(!empty($inf_debug))            $js .= ', debug:'.$inf_debug;
    
    $js .= '});
        });';
 
    require_js'#jquery#' );
    require_js$plug_url.'jquery.infinitescroll.js'true );
    add_js_headline$js );
}

thank you.. i have updated the download link.

I am already having problems understanding which comes first when you insert via require_js, add_headline, or directly within skinbeginhtmlhead

Dec 18, 2010 14:53

You should always include headlines with add_headline or similar build-in functions.

Dec 18, 2010 14:57

BTW instead of that highly inefficient hack with paged results, you can comment the following line in /inc/_core/ui/results/_results.class.php : 700

PHP

// Make sure we're not requesting a page out of range:
if( $this->page $this->total_pages )
{
    //$this->page = $this->total_pages;
}

Dec 18, 2010 15:17

sam2kb wrote:

BTW instead of that highly inefficient hack with paged results, you can comment the following line in /inc/_core/ui/results/_results.class.php : 700

PHP

// Make sure we're not requesting a page out of range:
if( $this->page $this->total_pages )
{
    //$this->page = $this->total_pages;
}

thanks for the input. it says "ugly fix" in the description already P:
but that would still be a core hack. i wonder why it still has not been fixed in v4

Dec 18, 2010 18:46

Just for kicks, you don't need the skin, or core, hack.

SkinBeginHtmlHead() is your friend ;) Run your code in there and return an error to your ajax.

¥

Dec 18, 2010 19:01

¥åßßå wrote:

Just for kicks, you don't need the skin, or core, hack.

SkinBeginHtmlHead() is your friend ;) Run your code in there and return an error to your ajax.

¥

well, i have tried that already, and unfortunately that doesn't do.

Dec 18, 2010 19:07

Assuming your code relies on a 404 header .. it wouldn't (content has already been sent), but it's easy enough to kick out a detectable string.

¥

Dec 18, 2010 19:16

The code searches for specific DOM tags, so we can just break the output.

SkinBeginHtmlHead()

PHP

global $paged$MainList;
 
if( $paged $MainList->total_pages )
{
    echo '</head>';
    echo '<h2>404 Not Found</h2>';
    exit;
}

Dec 18, 2010 19:18

¥åßßå wrote:

Assuming your code relies on a 404 header .. it wouldn't (content has already been sent), but it's easy enough to kick out a detectable string.

¥

There must be a hook like AfterMainListLoaded, what do you think?

Dec 19, 2010 03:38

sam2kb wrote:

I added per-blog settings if you don't mind :)

Those are really needed since different skins use different classes for posts and navigation.

http://pastebin.com/raw.php?i=E9uG61EV

right, great!

i have updated the plugin and the download link.
included and changed the script to minified.
updated default values
removed hack thing
updated readme

One thing about the plugin: Don't forget to re-initiate your jquery goodness for the newly added content(like lightbox, anything). There is a

Code

function(arrayOfNewElems){
     // optional callback when new content is successfully loaded in.

but it did not work for me.Would anyone gets this thing right like to share it here

Dec 19, 2010 05:40

One thing about the plugin: Don't forget to re-initiate your jquery goodness for the newly added content(like lightbox, anything).

What are you talking about?

Dec 19, 2010 12:28

i mean jquery wont work in loaded posts (like lightbox etc.) unless you re-run your jquery code.

Dec 31, 2010 09:18

I need to figure out how to fix a few things before we put this plugin on the shelf:

* The plugin gets stuck if you access the blog from another page like paged=2, as it basically tries to load the first link in the navigation div.

* Featured posts gets included in the loop, and loads at the beginning of every loaded page.

Any ideas on how to fix these ?

Feb 16, 2011 10:55

hey

When I use the plugin (manual or auto), once it reaches the last post, it infinitely loads the last post. Why is that?

Jan 30, 2012 16:02

Hello,

Hello,

I tried to install the "Infinite Scroll Plugin" with "b2evo_ru" skin but it seems that it doesn't work.
I added in the plugin settings: .top_menu at "Content Div" and .bPost at "Post Div" but it seems that the script doesn't have the .navigation div (is missing also in the styile.css file)

Here are my modified settings:

Content Div: #content, #tq-main .Posts .tq-g .top_menu
Navigation Div: .navigation
Post Div: .post .bPost

Can you please tell me what should I change in the above settings?

Thanks

Jan 30, 2012 16:18

One correction:

Post Div: .bPost


Form is loading...

powered by b2evolution – This forum is powered by b2evolution CMS, a complete engine for your website.