Infinite Scroll

Developer

Laisvunas

3rd Party (Commercial)
Current Version: 1.2.1

License Agreement

Buy Now!

$18.00
Qty:

EE Version Support

  • ExpressionEngine 1.x
  • ExpressionEngine 2

Compatibility

If an item is crossed out, it might be untested, not applicable or incompatible. Contact the developer to be sure.

  • Updater
  • Multi Site Manager
  • Stand Alone Entry Form
  • Low Variables
  • Content Elements
  • Better Workflow
  • Matrix
  • Grid
  • Webservice
  • Publisher

Requirements

  • jQuery for the Control Panel

Add-On Type(s)

Plugin

Tags

Allows you to implement infinite scroll functionality in ExpressionEngine. Any ExpressionEngine tag outputting pagination links is supported!

THE TAG {exp:infinite_scroll:wrapper}

This tag is used to wrap all contents of the embed template (see the examples’ code).
It has following parameters:

1) embed_template_url - required. Allows you to specify URL of the embed template.
You must specify full URL, i.e. starting with “http”. This parameter accepts inside its value
the following ExpressionEngine variables: site_id, site_url, site_index, homepage.

2) ajax_container - required. Allows you to specify HTML id parameter of the HTML element
which will act as the container to place data loaded by AJAX.

3) process_indicator - optional. Allows you to specify HTML class parameter of the HTML element
which will act as the indicator of the page being loaded by AJAX.

4) next_chunk_link - optional. Allows you to specify HTML class parameter of the HTML element
which will act as the button which should be clicked in order to load next piece of data (“More” button).
This parameter MUST BE defined when you use “More” button to load next piece of data.

5) infinite_scroll_vars - optional. Should be used when there is a need to output embed variables inside embed template.
Inside main template you should specify embed variable “infinite_scroll_vars” which contains pipe-delimited list of variables,
e.g. infinite_scroll_vars=“channel|category”. Then in the embed template you should add parameter infinite_scroll_vars=”{embed:infinite_scroll_vars}”.
Thus listed variables then can be used by adding to their names “infinite_scroll_embed_”, e.g. {infinite_scroll_embed_channel}, {infinite_scroll_embed_category}
(see complex example’s code).

6) infinite_scroll_values - optional. Should be used when there is a need to output embed variables inside embed template.
Inside main template you should specify embed variable “infinite_scroll_values” which contains pipe-delimited list of values of embed variables,
e.g. infinite_scroll_values=“technical|279”. Then in the embed template you should add parameter infinite_scroll_values=”{embed:infinite_scroll_values}”.
Thus listed variables then can be used by adding to their names “infinite_scroll_embed_”, e.g. {infinite_scroll_embed_channel}, {infinite_scroll_embed_category}
(see complex example’s code). If the value of certain variable contains pipe character, encode it by using the string “:PIPE:”.

xid_element_id - required for EE 2.7+ Allows you to specify id attribute of HTML input element containing the value of XID hash.
This element should be included into embed template.

THE TAG {exp:infinite_scroll:next_chunk_link}

This tag is used to output the button which should be clicked in order to load next piece of data (“More” button).
It has following parameter:

1) pagination_symbol - optional. Allows you to specify symbol which precedes pagination number in URL. Default value is “P”.

THE TAG {exp:infinite_scroll:next_chunk_data}

This tag is used to output next piece of data when the “More” button is not used.
It has following parameter:

1) pagination_symbol - optional. Allows you to specify symbol which precedes pagination number in URL. Default value is “P”.

USAGE

I. Infinite scrolling with “More” button

Main template (e.g. technical/infinite_scroll):


<html>

<head>

<title>Infinite Scroll demo (link "More" used)</title>

<style type="text/css">

/*Common*/

body {
color: black;
font-family: "arial unicode ms", helvetica, arial, sans-serif;
margin: 0;
font-size: small;
padding: 0;
}

a {
color: #4372aa;
text-decoration: none;
cursor: pointer;
}

a:hover {
text-decoration: underline;
}

/*Main content*/

#maincontent {
width: 48em;
position: relative;
left: 50%;
margin-left: -24em;
padding-bottom: 1em;
}

/* Headings */

h1 {
font-size: 1.5em;
font-weight: normal;
}

h2 {
font-size: 1.1em;
font-weight: bold;
}

/* Indicator */

.process_indicator {
background-image: url({site_url}/images/ajax-loader.gif);
background-repeat: no-repeat;
background-position: bottom left;
height: 3em;
width: 100%;
text-align: left;
display: none;
}

</style>

</head>

<body>

<div id="maincontent">

<h1>Infinite Scroll demo (link "More" used)</h1>


{embed="technical/embed_infinite_scroll"}


</div><!-- End of #maincontent  -->

</body>

</html>

Embed template (e.g. technical/embed_infinite_scroll):


{exp:infinite_scroll:wrapper ajax_container="ajax_container" embed_template_url="{homepage}/technical/embed_infinite_scroll" xid_element_id="infinite_scroll_xid" process_indicator="process_indicator" next_chunk_link="next_chunk_link" parse="inward"}

{infinite_scroll_container_top}
<div id="ajax_container">
{/infinite_scroll_container_top}

<input type="hidden" id="infinite_scroll_xid" value="4d7e4b418d4d0f5298f00a4a8f540fd4975e17a2">

{exp:channel:entries channel="mychannel" sort="asc" orderby="title" limit="5" paginate="bottom" dynamic="no" parse="inward"}

<p>{absolute_count}. <a href="{path="technical/demo/{url_title}"}">{title}</a></p>

{if count == total_results}
<div class="process_indicator">
Loading…
</div>
{/if}

{paginate}{exp:infinite_scroll:next_chunk_link}{if next_page}<a href="{auto_path}" class="next_chunk_link">More</a>{/if}{/exp:infinite_scroll:next_chunk_link}{/paginate}

{/exp:channel:entries}

{infinite_scroll_container_bottom}
</div><!-- End of #ajax_container -->
{/infinite_scroll_container_bottom}

{/exp:infinite_scroll:wrapper}

II. Infinite scrolling without “More” button

Main template (e.g. technical/infinite_scroll_no_link_more):


<html>

<head>

<title>Infinite Scroll demo (no link "More")</title>

<style type="text/css">

/*Common*/

body {
color: black;
font-family: "arial unicode ms", helvetica, arial, sans-serif;
margin: 0;
font-size: small;
padding: 0;
}

a {
color: #4372aa;
text-decoration: none;
cursor: pointer;
}

a:hover {
text-decoration: underline;
}

/*Main content*/

#maincontent {
width: 48em;
position: relative;
left: 50%;
margin-left: -24em;
padding-bottom: 1em;
}

/* Headings */

h1 {
font-size: 1.5em;
font-weight: normal;
}

h2 {
font-size: 1.1em;
font-weight: bold;
}

/* Indicator */

.process_indicator {
background-image: url({site_url}/images/ajax-loader.gif);
background-repeat: no-repeat;
background-position: bottom left;
height: 3em;
width: 100%;
text-align: left;
}

#ajax_container {
height: 50em;
border: solid 1px silver;
overflow-y: scroll;
padding: 0.8em;
}

</style>

</head>

<body>

<div id="maincontent">

<h1>Infinite Scroll demo (no link "More")</h1>


{embed="technical/embed_infinite_scroll_no_link_more"}


</div><!-- End of #maincontent  -->

</body>

</html>

Embed template (e.g. technical/embed_infinite_scroll_no_link_more):


{exp:infinite_scroll:wrapper ajax_container="ajax_container" embed_template_url="{homepage}/technical/embed_infinite_scroll_no_link_more" xid_element_id="infinite_scroll_xid" process_indicator="process_indicator" parse="inward"}

{infinite_scroll_container_top}
<div id="ajax_container">
{/infinite_scroll_container_top}



{exp:channel:entries channel="mychannel" sort="asc" orderby="title" limit="30" paginate="bottom" dynamic="no" parse="inward"}

<p>{absolute_count}. <a href="{path="technical/demo/{url_title}"}">{title}</a></p>

{paginate}
{if next_page}
<div class="process_indicator">
Loading…
</div>
{exp:infinite_scroll:next_chunk_data}{auto_path}{/exp:infinite_scroll:next_chunk_data}
{/if}
{/paginate}

{/exp:channel:entries}

{infinite_scroll_container_bottom}
</div><!-- End of # ajax_container -->
{/infinite_scroll_container_bottom}

{/exp:infinite_scroll:wrapper}

III. Displaying several infinite scroll areas in one template

Displaying several paginated lists in one template is easy.
You only need to define additional variable “tag_count” for each embed template. For example:


{embed="technical/embed_infinite_scroll1" infinite_scroll_vars="tag_count" infinite_scroll_values="1"}

{embed="technical/embed_infinite_scroll2" infinite_scroll_vars="tag_count" infinite_scroll_values="2"}

{embed="technical/embed_infinite_scroll3" infinite_scroll_vars="tag_count" infinite_scroll_values="3"}

IV. Pinterest.com style infinite scrolling

To get Pinterest.com style infinite scrolling you need to make a couple of simple changes in the template
created to get infinite scrolling without “More” button. So, the main template (e.g. technical/infinite_scroll_pinterest_com_style)
would be as this:

<html>

<head>

{embed="embeds/meta_content_type"}

{embed="embeds/meta_favicon"}

<title>Infinite Scroll demo (pinterest.com style)</title>

<style type="text/css">

{embed="stylesheets/css_technical"}

html {
height:100%; 
max-height:100%;  
padding:0; 
margin:0; 
border:0;  
overflow: hidden; 
}

body {height:100%; max-height:100%; overflow:hidden; padding:0; margin:0; border:0;}
#ajax_container {display:block; height:100%; max-height:100%; overflow:auto; position:relative; z-index:3;}

.process_indicator {
background-image: url({site_url}/images/ajax-loader.gif);
background-repeat: no-repeat;
background-position: bottom left;
height: 3em;
width: 100%;
text-align: left;
}

p {
margin: 3em 0 3em 0;
text-size: 1.5em;
}

</style>

</head>

<body>

{embed="technical/embed_infinite_scroll_pinterest_com_style"}

</body>

</html> 

Embed template (e.g. technical/embed_infinite_scroll_pinterest_com_style) will also require only minimal changes:

{exp:infinite_scroll:wrapper ajax_container="ajax_container" embed_template_url="{homepage}/technical/embed_infinite_scroll_pinterest_com_style" xid_element_id="infinite_scroll_xid" process_indicator="process_indicator" parse="inward"}

{infinite_scroll_container_top}
<div id="ajax_container">
{/infinite_scroll_container_top}



{exp:weblog:entries channel="mychannel" sort="asc" orderby="title" limit="30" paginate="bottom" dynamic="no" parse="inward"}

{if absolute_count == 1}<h1>Infinite scroll demo (pinterest.com style)</h1>{/if}

<p>{absolute_count}. <a href="{path="technical/demo/{url_title}"}">{title}</a></p>

{paginate}
{if next_page}
<div class="process_indicator">
Loading…
</div>
{exp:infinite_scroll:next_chunk_data}{auto_path}{/exp:infinite_scroll:next_chunk_data}
{/if}
{/paginate}

{/exp:weblog:entries}

{infinite_scroll_container_bottom}
</div><!-- End of # ajax_container -->
{/infinite_scroll_container_bottom}

{/exp:infinite_scroll:wrapper}

Infinite Scroll Links

This entry was created October 10, 2012, 4:11 pm.
This entry was last updated January 4, 2014, 2:17 pm.

Disclaimer: Information about ExpressionEngine add-ons is provided as a service to you, the user, and every member of the ExpressionEngine community. devot:ee is not responsible if you hose, mangle, wreck, or otherwise destroy your EE website by installing an add-on that you found out about at this site, regardless of its rating, Favorites status, commercial or free status, or general popularity. Caveat EEmptor!

Returns: devot:ee has a 30-day return policy on all commercial add-ons sold through devot-ee.com. If you need to return an add-on, do not go to the developer or the developer's site, but rather visit our returns page at https://devot-ee.com/returns to initiate your return. If you have questions, email support@devot-ee.com.

1 Review:

kubik101 09.08.14

Rating - {addon_rating_average}

Just a warning. Plugin didn’t work for me using the IS1.2.1 and EE2.8.1 got an error “‘No response from server.’ when I click”. Has potential though.