0 comments
jquery
19 Apr 2009

jQuery Content Scroller

A jQuery plugin to convert divs that normally flow underneath each other to flow next to each other with paginated controls.

The plugin will automatically create a set of controls that associates with the scrolling elements, letting you move between each one.

Standard, Auto Generated Controls

This first one uses the 5 divs as ‘pages’ and converts them into scroller elements which react to the on click of the ul.

Content Page 1

Content Page 2

Content Page 3

Content Page 4

Content Page 5

This one is as simple to setup as it gets:

<script type="text/javascript">
jQuery(document).ready(function() {
	jQuery('#container1').contentscroller({pages:'.cexample'});
});
</script>

As the plugins default setup looks for DOM elements with the class of ‘page’, in this case the example is using an alternative class. We just pass in the alternative selector and it all works.

Auto Generated Controls With Hooks

If you want to alter things, or trigger events when a new ‘page’ loads or something similar there are two hooks you can use; before and after.

In this example I’m keeping it simple by just running an alert for both; but you can pass something to run for both.

Content Page 1

Content Page 2

Setup for that is:

<script type="text/javascript">
jQuery(document).ready(function() {
	jQuery('#container2').contentscroller({pages:'.cexample',
	                                      controller:'#controls2',
	                                      before:"alert('before')",
	                                      after:"alert('after')"});
});
</script>

Both the before and after values are eval’d with the javascript, this is very naughty and I really need to change that to take a normal function.

NOTE: As the controls are auto generated and use a unique id, the second time we add a scroller to the page we have to force a new id. This is done by just setting the ‘controller’ option when creating it. (I really need to fix that…)

Styling

The examples here use a stylesheet, which looks like:

#container1, #container2{width:100%;}
.cexample{width:100%;float:left;}
ul#controls li, ul#controls2 li{float:left;margin:0 5px 0 0;list-style-type:none;}
#example1,#example2{overflow:hidden;}

The Files

All the files that are used…

blog comments powered by Disqus

Related Posts