jQuery ClickScroller Plugin

This is a simple jQuery plugin used to create a horizontal or vertical clicking scroll menu. It’s lightweight, simple and easy to customize as needed.

1. Setup

• Download jQuery, and add it into the head of your document
• Download the ClickScroller package, and add jquery.clickscroller.js into the head of your document
• Optionally, grab the easing js (is included with the download package)

2. Write Some HTML

<div id="yourContainer">
	<ul>
		<li>A list item</li>
		<li>Another list item</li>
		<li>Another list item</li>
		<li>Etc...</li>
	</ul>
</div>
<a id="#clickscroll-more" href="#">More</a>
<a id="#clickscroll-less" href="#">Less</a>

3. Write some CSS

#yourContainer {
	height: 300px; /* REQUIRED FOR VERTICAL SCROLLING */
	width: 500px; /* REQUIRED FOR HORIZONTAL SCROLLING */
	overflow: hidden; /* DO NOT REMOVE */
	position: relative; /* DO NOT REMOVE */
}
#yourContainer ul {
	list-style: none;
	padding: 0;
	margin: 0;
	position: absolute;	/* DO NOT REMOVE */
}
#yourContainer ul li {
	padding: 0;
	margin: 0;
}

4. Write some Javascript (well jQuery)

$(function(){
	$('#yourContainer').clickScroll();
});

4. Customize

This is how you could setup a horizontal scroller using all the options, like in the demo

$('#yourContainer-horizontal').clickScroll({
	speed: 1000, // Scroll Speed
	easing: 'easeOutElastic', // Animation easing method
	lessBtn: '#scroll-left', // Custom ID of scroll button
	moreBtn: '#scroll-right', // Custom ID of scroll button
	btnFadeSpeed: 500, // Speed of button fading in/out when not end of scrolling is reached
	horizontal: true // Make it scroll Horizontally,
	autoHideNav: false // Don't hide the navigation controls automatically
});

You’ll also want to change you CSS so the list elements are floated or inline-block…

Other Notes

• The plugin relies on an unordered list <ul> and list items <li> to be children of the container, if you use something else, it won’t work.
• When horizontally scrolling, the width of the list will be automatically calculated and applied. If you’re changing the widths of list items dynamically, you might have to get creative in the source.
• Don’t add your control links into the container.

Changelog

• “autoHideNav” option added for control over navigation controls being automatically hidden/shown.

Download

Demo

Get page tag id’s based on a category in Wordpress

For the new threeformed site I am using Wordpress as a light CMS, so I wanted to treat some ’special’ posts differently than others based on their category. This meant that i’d have to exclude these ’special’ posts from a few places, one of these places was the tag cloud. Read on…

JavaScript Tetris

Why?

I was finishing up some tedious work around midnight a few days ago and decided I needed to code something fun. I have a few projects I’m already working on so I figured I’d do something small and quick. Lately I’ve been getting interested in game programming so I wanted to do something along those lines. “But what sort of game can I make in a few hours?” I thought to myself. Then it hit me. I was going to make Tetris. Read on…