Infinite scroll with Ditto
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:
- It currently doesn't work on the iPhone(probably iPads) but one can always click the Next button.
- I only tested with one particular implementation. Feel free to play with the IS settings
Bugs and and concerns below. Thanks
Write a comment
Posts: 9
Reply #13 on : Mon February 07, 2011, 10:34:59
Posts: 9
Reply #12 on : Mon February 07, 2011, 10:45:42
Posts: 9
Reply #11 on : Tue February 08, 2011, 09:51:45
Posts: 9
Reply #10 on : Thu February 10, 2011, 15:19:18
Posts: 9
Reply #9 on : Sun February 20, 2011, 03:11:51
Posts: 9
Reply #8 on : Tue February 22, 2011, 01:41:40
Posts: 4
Reply #7 on : Tue February 22, 2011, 08:14:17
Posts: 9
Reply #6 on : Tue February 22, 2011, 08:57:02
Posts: 4
Reply #5 on : Tue February 22, 2011, 09:08:10
Posts: 9
Reply #4 on : Wed February 23, 2011, 09:03:43
Posts: 4
Reply #3 on : Wed February 23, 2011, 09:10:07
Posts: 9
Reply #2 on : Wed March 02, 2011, 19:27:19
Posts: 4
Reply #1 on : Wed March 02, 2011, 20:10:20