Minimal setup for scrollable

Scrollable demo 1 / 11 : Minimal setup for scrollable

Here is a scrollable with 15 elements in total and 5 elements are shown at a time:

You can scroll through these elements by:

1. Clicking on the elements.
2. Clicking on the arrow buttons.
3. Using the left and right arrow keys from your keyboard.

This time we don't have any other means of scrolling because we are aiming for a minimal setup. It's important to understand how this example works because it teaches you the theory behind HTML scrolling. Understanding this helps you to build any kind of scrolling you want. We are using a very primitive look and feel for most of these demos because we are focusing only on their functionality and not their visual style. On your own pages you can use standard HTML/CSS techniques to style your scrollables.

HTML code

This is how you lay out your scrollables. You must have a root element for the scrollable and inside that another wrapper element for the items. The items can contain anything you want including images, Flash, HTML text and forms. Here we have just simple thumbnail images from flickr.com:

<!-- "previous page" action -->
<a class="prevPage browse left"></a>

<!-- root element for scrollable -->
<div class="scrollable">	
	
	<!-- root element for the items -->
	<div class="items">
	
		<!-- 1-5 -->
		<img src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg" />
		<img src="http://farm4.static.flickr.com/3089/2796719087_c3ee89a730_t.jpg" />
		<img src="http://farm1.static.flickr.com/79/244441862_08ec9b6b49_t.jpg" />
		<img src="http://farm1.static.flickr.com/28/66523124_b468cf4978_t.jpg" />
		<img src="http://farm1.static.flickr.com/164/399223606_b875ddf797_t.jpg" />
		
		<!-- 5-10 -->
		<img src="http://farm1.static.flickr.com/163/399223609_db47d35b7c_t.jpg" />
		<img src="http://farm1.static.flickr.com/135/321464104_c010dbf34c_t.jpg" />
		<img src="http://farm1.static.flickr.com/40/117346184_9760f3aabc_t.jpg" />
		<img src="http://farm1.static.flickr.com/153/399232237_6928a527c1_t.jpg" />
		<img src="http://farm1.static.flickr.com/50/117346182_1fded507fa_t.jpg" />
		
		<!-- 10-15 -->
		<img src="http://farm4.static.flickr.com/3629/3323896446_3b87a8bf75_t.jpg" />
		<img src="http://farm4.static.flickr.com/3023/3323897466_e61624f6de_t.jpg" />
		<img src="http://farm4.static.flickr.com/3650/3323058611_d35c894fab_t.jpg" />
		<img src="http://farm4.static.flickr.com/3635/3323893254_3183671257_t.jpg" />
		<img src="http://farm4.static.flickr.com/3624/3323893148_8318838fbd_t.jpg" />
	</div>
	
</div>

<!-- "next page" action -->
<a class="nextPage browse right"></a>

Next / prev buttons

The scrollable tool looks for elements whose CSS class name is prevPage and nextPage and automatically bind's the seeking action to them. You can also assign the next and prev CSS class names that will bind an action to scroll one item forward (or backward), instead of a whole page. By default the page size is 5 elements but you can change that in the configuration. You can also specify the names of the CSS class names to avoid any clashes with your existing CSS.

CSS code

Our example is using two CSS files: scrollable-horizontal.css for basic setup for the scrollable and scrollable-buttons.css for the next/prev action buttons.

Here are the mimimum CSS settings for enabling a horizontal scrollable. Except for the width property these settings don't have any impact on the appearance. You will have probably have to tweak your width property yourself to have as many items visible at once as you want. The number of visible elements must be given to scrollable in the configuration with the size property. The default setting for size is 5 so in this example we don't have to change that property.

/*
	root element for the scrollable.
	when scrolling occurs this element stays still.
*/
div.scrollable {

	/* required settings */
	position:relative;
	overflow:hidden;
	width: 660px;
	height:90px;
}

/*
	root element for scrollable items. Must be absolutely positioned
	and it should have a extremely large width to accomodate scrollable items.
	it's enough that you set width and height for the root element and
	not for this element.
*/
div.scrollable div.items {
	/* this cannot be too large */
	width:20000em;
	position:absolute;
}

/*
	a single item. must be floated in horizontal scrolling.
	typically, this element is the one that *you* will style
	the most.
*/
div.scrollable div.items div {
	float:left;
}

/* you may want to setup some decorations to active the item */
div.items div.active {
	border:1px inset #ccc;
	background-color:#fff;
}

CSS coding is actually the hardest part of making scrollables and it's recommended that you have more than just a basic understanding of it.

JavaScript setup

This is the easy part. Just select the elements from the page that will be made scrollable. This is achieved with a jQuery selector followed by the scrollable constructor. This constructor accepts a configuration object as the first argument but in this minimal setup we can stick with the default settings.

<script>
// execute your scripts when the DOM is ready. this is a good habit
$(function() {

	// initialize scrollable
	$("div.scrollable").scrollable();

});
</script>

Photo credits »