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

wp_tag_cloud()

based on ID’s? So that seemed easy enough right?! I could just use

get_the_tag_ids('exclude=special')

… Well if that function existed. Well it does now!

// Gets tags ID's for current post
	function get_the_tag_ids($which, $delimiter) {
		// Gets posts for the category
		query_posts('category_name='.$which);
		// Loop through each post with $which category
		while(have_posts()) {
			the_post();
			// Get the tags for each post
			$this_post_tags = get_the_tags();
			// if there are tags
			if ($this_post_tags) {
				// Get the tag ID for each
				foreach($this_post_tags as $tag) {
					$taxarray = is_term($tag->name, 'post_tag');
					$post_tags .= $taxarray[term_id].$delimiter;
				}
			}
		}
		wp_reset_query(); // Resets the query
		return $post_tags;
	}

Usage

get_the_tag_ids('special',',')

Output (example):

8,3,9,8,12

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.

The Process

I’d never made anything like this before so I decided to implement in JavaScript since I’ve been doing a lot of JavaScript coding lately. I grabbed a Coke from the fridge and got to work. It took a couple of hours to throw together the internals and another hour or so to style it (CSS is not my cup of tee). I used the sweet jQuery library for all DOM manipulation and a few images I made so the blocks would look nice. It turned out pretty well and after one long night I had a nice little tetris game!

Compatibility

It works in Safari 3, Firefox 2, IE 6 & 7, and Opera 9 (those are all the browsers I have installed) with the only caveat being that Opera doesn’t continuously fire the onkeydown event while a button is pressed, so dropping blocks quickly in Opera requires multiple taps on the down arrow.

Source Code

The code, styles, images, and markup are available here in case anyone wants to fix any bugs they find or use it as a studying tool (the code is commented, but it was late so the comments are not as detailed as they could be).

Well enough talk! Check it out!

This plugin is completely cross browser, and also provides the ability to resize gracefully when the reset option is set to true. Additionally, intervals can be set by adding a class of “scroll-interval” which automatically adds dash’s to the track and provides automatic snap-to on the elements.

Examples:

• Basic Example
• Real world usage

Usage

Just include the following files in the head of your page:

• jQuery
• the dimensions plugin
• the mouse wheel plugin
• jScrollHorizontalPane.js (or the compressed)
• jScrollHorizontalPane.css

Then you can use any query selector to select the elements you would like to apply jScrollHorizontalPane to and then initialise it. The following code runs when the document is ready and finds any element with a class of “scroll-pane” and then calls jScrollHorizontalPane on them.

$(function() {
     $('.scroll-pane').jScrollHorizontalPane();
});

jScrollHorizontalPane also takes the following options as parameters to customize the functionality:

• scrollbarHeight – The height of the generated scrollbar in pixels
• scrollbarMargin – The amount of space to leave on the side of the scrollbar in pixels
• wheelSpeed – The speed the pane will scroll in response to the mouse wheel in pixels
• showArrows – Whether to display arrows for the user to scroll with
• arrowSize – The height of the arrow buttons if showArrows=true
• animateTo – Whether to animate when calling scrollTo and scrollBy
• dragMinWidth – The minimum width to allow the drag bar to be
• dragMaxWidth – The maximum width to allow the drag bar to be
• animateInterval – The interval in milliseconds to update an animating scrollHorizontalPane (default 100)
• animateStep – The amount to divide the remaining scroll distance by when animating (default 3)
• maintainPosition- Whether you want the contents of the scroll pane to maintain it’s position when you re-initialise it – so it doesn’t scroll as you add more content (default true)
• resize – Whether or not to have resizing turned on or not.
• minimumWidth – The minimum width to allow the jScrollHorizontalPane to be resized to. Only effective when resize is on.
• reset – When set to ‘true’ all the global properties will be reset. This is useful for dynamic refreshes on the page.

Downloads

You can download the zip file with the complete package from the following link. Download

Bug Reporting

Email info@threeformed.com for the time being if u encounter any bugs and hopefully we can take care of the issue!
Otherwise, enjoy!