GrooveControl – A grooveshark remote control plugin for Firefox 4

Recently I was doing some work while listening to Grooveshark and I got fed up with having to go back to the tab to stop or change tracks and it dawned on me that it would be pretty straight forward to put together a grooveshark plugin.  So that’s what I did, this here is the home for GrooveControl.  In the coming week I’ll be expanding this article to include a full writeup on creating a Firefox 4 plugin with Jetpack, but for now, without further ado, here is the link to the plugin!

https://addons.mozilla.org/en-US/firefox/addon/groovecontrol/

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…