Infinite scroll with Ditto

on 06-Feb-2011 | Comments ( 13 ) Tags: Ditto, Evolution

To build an infinite scroll solution, I had to first make sure that the Infinite Scroll plugin plays nicely with the links generated by Ditto. Unfortunately Infinite Scroll tries to guess the next page URL and in Ditto's case it didn't work as expected. I had to take the latest IS and add some specific code.

I set up the modified version on github. Please download it and set it up somewhere in your MODX Evolution install(e.g. assets/templates/site/infinitescroll). To make it work you only need the jquery.infinitescroll.min.js and ajax-loader.gif files.

Set up the jQuery snippet

Upload the 2 required files jquery.infinitescroll.min.js and ajax-loader.gif to assets/templates/site/infinitescroll.

Set up your Ditto chunk

Create a new chunk named "Article" and paste the following code:

<div class="article">
    <h2><a href="[~[+id+]~]">[+pagetitle+]</a></h2>
    <span class="info">on [+date+]</span>
    <div class="desc">[+introtext+]</div>
</div>

The template

I find it easier to paste a test template than using pieces of code. Here is a modified version of the test template I use in my demo. Hopefully my comments will make sense.

It is important that you don't cache the template, but call Ditto using the cache syntax.

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>Infinite scroll with Ditto</title>
	<base href="[(site_url)]" />
    <style type="text/css">
    	#Content{width: 400px;}
    </style>
</head>

<body>
	<div id="Content">
		<!-- the Ditto call. Will load 10 per page-->
		[[Ditto? &parents=`2` &depth=`1` &tpl=`Article` &paginate=`1` &display=`10`]]
		<!-- This is the link read by the javascript plugin. The content of the url is added at the end of the Content element -->
		[+next+]
	</div>

	<!-- JavaScript Files-->
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
	<script type="text/javascript" src="assets/templates/site/infinitescroll/jquery.infinitescroll.min.js"></script>
	
	<!-- Infinite Scroll call on the Content -->
	<script type="text/javascript">    
	    $('#Content').infinitescroll({
			navSelector  : "a.ditto_next_link",            
			nextSelector : "a.ditto_next_link",    
			itemSelector : "div.article",          
			debug        : false,
			loadingImg   : "assets/templates/site/infinitescroll/ajax-loader.gif"
		});
	</script>
 
</body>
</html>

DEMO

Notes:

  1. It currently doesn't work on the iPhone(probably iPads) but one can always click the Next button.
  2. I only tested with one particular implementation. Feel free to play with the IS settings

Bugs and and concerns below. Thanks

Write a comment

  • Required fields are marked with *.

If you have trouble reading the code, click on the code itself to generate a new random code.
 
sharkbait
Posts: 9
Comment
Re: Infinite scroll with Ditto
Reply #13 on : Mon February 07, 2011, 09:34:59
very nice, thank you!
i tried to get it working mysef a while ago, without success :) j
Noah Learner
Posts: 9
Comment
You Rock
Reply #12 on : Mon February 07, 2011, 09:45:42
Great job. I am both pleased as punch and impressed!
-N
Noah
Posts: 9
Comment
paypal donation button
Reply #11 on : Tue February 08, 2011, 08:51:45
Where is your paypal donation button? I will donate for the solution.
Daniil
Posts: 9
Comment
Re: Infinite scroll with Ditto
Reply #10 on : Thu February 10, 2011, 14:19:18
hello! Thanks, Very interesting thing =)
Maybe I realised this on one my project.
I do the russian translation of this article in my blog. Here: http://oros.kiev.ua/modx/infinite-scroll.php With back link of course ;)
Strochli
Posts: 9
Comment
Works on iPac
Reply #9 on : Sun February 20, 2011, 02:11:51
it works fine on iPad, too :)
sharkbait
Posts: 9
Comment
back to overview
Reply #8 on : Tue February 22, 2011, 00:41:40
Hi Cipa,

when you go back (from an article) to the overview, all articles start loading again till the point of entry. is there a way to jump right back? like here: http://www.designmadeingermany.de/2011/

thanks, j
cipa
Posts: 4
Comment
Re: Infinite scroll with Ditto
Reply #7 on : Tue February 22, 2011, 07:14:17
Currently infinite scroll doesn't support permalinks.

http://www.infinite-scroll.com/
There is no permalink to a given state of the page.

You can post your request here: https://github.com/paulirish/infinite-scroll
sharkbait
Posts: 9
Comment
Re: Infinite scroll with Ditto
Reply #6 on : Tue February 22, 2011, 07:57:02
Hi Cipa,

no, i didn't mean not permalinks. if you use the back button, you get straight to the point of entry without loading all listings again. the example i posted uses the same script by Paul Irish btw.

no worries, just asking :)

thanks, j
cipa
Posts: 4
Comment
Re: Infinite scroll with Ditto
Reply #5 on : Tue February 22, 2011, 08:08:10
I think I don't understand: "is there a way to jump right back?" and I don't see what exactly do you need from the sample site :)
sharkbait
Posts: 9
Comment
Re: Infinite scroll with Ditto
Reply #4 on : Wed February 23, 2011, 08:03:43
Hi Cipa,

assume you are browsing the news listings with the infinite scroll (load a couple of sections), then you click on an article and after reading you want to go back to the listing. If you click on the back button, all infinite scroll news-items are going to ajax-load again. On the link i posted, you'll jump right back, without seing the loading-gif and ajaxloading all sections.

know what i mean? :)

thanks, j
cipa
Posts: 4
Comment
Re: Infinite scroll with Ditto
Reply #3 on : Wed February 23, 2011, 08:10:07
Hmm.., in the demo it only happens some times. Maybe you can play with the extraScrollPx and bufferPx setting.
Alan
Posts: 9
Comment
Fixed Height
Reply #2 on : Wed March 02, 2011, 18:27:19
Is it possible to do something like this where the dynamic loading from scrolling is in a fixed height container rather than the entire browser window? Even better in a situation where there is custom scrolling like that seen here - http://www.n-son.com/scripts/jsScrolling/example1.html
cipa
Posts: 4
Comment
Re: Infinite scroll with Ditto
Reply #1 on : Wed March 02, 2011, 19:10:20
It might work if you apply the script on a fixed height box and use another script to move the content up and down. Maybe this can work: http://demos.flesler.com/jquery/scrollTo/
Last Edit: March 02, 2011, 19:10:40 by cipa  

Quick modx Evolution Tags

  • cached [[snippet]] or uncached [!snippet!]
  • {{chunk}}
  • [+placeholder+]
  • [*resourceField/TV*]
  • [^timing^]
  • [~link~]

Quick modx Revolution Tags

  • [[snippet]]
  • [[$chunk]]
  • [[+placeholder]]
  • [[*resourceField/TV]]
  • [[~link]]
  • [^timing^]
  • [[++systemSetting]]
  • [[%languageStringKey]]
  • all tags can be called un-cached like: [[! snippet]]

Timing Tags (Evo and Revo)

  • [^qt^] - Query time
  • [^q^] - Query count
  • [^p^] - Parse time
  • [^t^] - Total time
  • [^s^] - Source
© modxRULES! 2009-2014