Infinite scrolling with jquery plugin jscroll

Endless scrolling is today's trend, alternative to the traditional paging method. This tutorial guides you how to use jquery plugin to implement it and still accessible by search engines.

What is endless scrolling (infinite scrolling)?

Infiniite scrolling also called endless scrolling is a alternative to paging in which another page of content is presented to user on the same page automatially (when the user scrolls to the bottom of the page, the next page content is added to the same page without requiring user input). This behaviour continues until user stops scrolling or next page is not available. 

So in the tutorial we are using jquery plugin called jscroll to create endless scrolling in CodeIgniter web application. First the following controller method renders the the first page using views. 

		public function index()
    {
        $this->links(0, 10, $data, 1, false);
    }

public function links($start, $count, $data, $pagenum, $onlycontent)
    {

        $query = $this->db->query('select * from links limit ' . $start . ',' . $count);
        $totalrows= $query->num_rows();
        $data['links'] = $query->result();
        $data['nextlink'] = '/link/p/' . ($pagenum + 1);
        if (!$onlycontent) {
            $this->load->view('link/index', $data);
        } else {
            if($totalrows>0)
            {
            $this->load->view('link/links', $data);
            }
            else{
                echo('');
            }
        }
        if (!$onlycontent) $this->load->view('link/scroll', $data);
    } 

views/link/index.php

		//link/index.php
<div class="container">
<ul class="media-list scroll" data-ui="jscroll-default">
    <?php
    include('links.php');
    ?>

</ul>
</div>
 

scroll is the main div where the next page contents will be appended by the plugin. 

views/link/links.php

		<?php
foreach ($links as $link) {
    include('item.php');
}
?>

<a href="<?php echo($nextlink)?>" class="scroll-next" >Next</a> 

The jquery plugin uses the url of the last anchor tag to fetch the next page content. 

views/link/item.php

		<li class="media">
    <a class="pull-left" href="#">

        <?php
        if ($link->thumbnailpath != null) {
            echo('<img width="100px" src="' . $link->mediaserver . "link/thumb/" . $link->id . '" />');

        } else {
            echo('<img class="media-object" data-src="holder.js/64x64">');
        }
        ?>

    </a>

    <div class="media-body">
        <h4 class="media-heading"><?php echo($link->title) ?></h4>

        <p>
            <?php echo($link->summary) ?>
        </p>
    </div>

</li>
<hr/> 

views/link/scroll.php

		<div class="container">
    <div class="row">
        <div class="span12 pagination navigation">
            <?php if (isset($paging)) {
                echo($paging);
            }?>
        </div>
    </div>
</div>

<script>

    $('.scroll').jscroll();

</script>
 

Dont forget to add jscroll javascript file on the header of your applicaiton. 

<script type="text/javascript" src="/static/js/jquery.jscroll.min.js"></script>

Now its time to write more methods on the controller which will be used this jquery plugin to fetch contents and append them to the main div. 

Loading..

You can customize your loading html by passing option on jscroll function. I added the loading html with font-awesome loading icon. It looks great. 

$('.scroll').jscroll({loadingHtml:'<i class="icon-spinner icon-spin icon-2x"></i> Loading.... '});

 

		public function page($onlycontent = false)
    {
        $pagen = $this->uri->segment(3);
        if ($pagen == null || $pagen == 0) {
            $pagen = 1;
        }

        $start = ($pagen - 1) * 10;
        $this->links($start, 10, $data, $pagen, $onlycontent);
    }

    public function p()
    {
        $this->page(true);
    } 

The above controller method only renders only partial content for the next page. The main div and the javascripts are not rendered. 

 

Is it search engine friendly?

Since search engine dont run javascrpt codes, they see the page as normal page with normal paging. Search engnies use next link to get next page contents. 


Like us

See also

Spring security and sessionRegistry on grails

How to configure sessionRegistry in grails project. How to get list of online users (currently loggedin users) in grails.

Email Confirmation Example: Grails

Email confirmation example on Grails application.

Infinite scrolling with jquery plugin jscroll

Endless scrolling is today's trend, alternative to the traditional paging method. This tutorial guides you how to use jquery plugin to implement it and still accessible by search engines.