query.dropSlideMenu.js v1.0 - View Demo or Download

There are plenty of jQuery drop-down menu scripts already available, but I often find that they're either too basic, or too complicated and bulky, or don't support a proper sliding effect (instead the menus simply change height as they're revealed).

I'm publishing this script with the hope that others might find it useful. Hopefully as it gains popularity, so will the potential for it to improve. Also, I've developed this plugin partly as a jQuery learning exercise. So if you do find yourself downloading and using it, and you're proficient with JavaScript, I would really appreciate if you could spend a minute or two reviewing my code and providing suggestions for improvement.

Features include:

• Requires the mouse cursor to decelerate over the menu before activating, to prevent unintentional opening (big thanks to threedubmedia for their jquery.event.hover plugin)
• Dynamic styling of clickstream (path of links are compared with path of the current URL) - optional
• Possible to set widths on each list item and its drop down
• Possible to individually style each list item and its drop down
• List items with no link behaviour (where href is "#") are disabled
• Settings to control the duration (speed of drop down animation), and delay (before the drop down closes)
• Select elements are hidden (IE6) - optional
• Customisable Easing Effects
• W3C-valid HTML and CSS

To begin, download the source files (.zip) and browse the demo source code to familiarise yourself with the necessary files required, and the way in which they fit together. Assuming you already have the most recent version of jQuery, the JavaScript and CSS files that need to be included in your page are:

<link rel="stylesheet" href="jquery.dropSlideMenu.css" type="text/css" />

<script src="jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
<script src="jquery.event.hover.js" type="text/javascript"></script>
<script src="jquery.dropSlideMenu.js" type="text/javascript"></script>

To attach the plugin to a menu, include the following jQuery script in your page (in this example, #navigation is the menu wrapper):

$(document).ready(function() {
	$("#navigation").dropSlideMenu({
		indicators: true,
		clickstream: true,
		openEasing: "easeOutQuad",
		closeEasing: "easeInQuad",
		duration: 600,
		delay: 800,
		hideSelects: true
	});
});

The settings are fairly self-explanatory. I'm not going to go into more detail as I assume you know what you're doing with jQuery and CSS. If you do require further assistance, please leave a comment below - I can't guarantee that I'll be able to help, but I do make an attempt to reply to all comments.

The most recent version of this plugin will always be the one available for download on this post.

Please let me know if you decide to use it, or have any feedback. Thanks!

v1.5 released - View Demo or Download

I've made a couple of improvements to the plugin. The ones worth mentioning:

• You can add alternative content to the container element (that you pass to the plugin). This will be replaced by your tweets when the plugin is executed by jQuery. If JavaScript is disabled or the plugin fails, your visitors will still see your alternative content - a good idea therefore would be to include a link to your twitter profile.
• All styles are now added to the container elements via a new ".twitted" class (view CSS). If you're upgrading from the old plugin version, you'll need to transfer your old styles across into the new syntax.
• 3 new customisation options: slideDuration (if slideIn is true, this will change the duration of the slide effect), showProfileLink (set to false if you want to hide the link), showTimestamp (set to false if you want to remove the timestamp from tweets - the timestamp is then added as a title on the individual tweet list items).
• Fixed the jQuery slide effect "jump" bug (hat-tip: Dan G. Switzer, II)

If you have any feedback or bug reports, please leave a comment below.

I started writing a new post today containing various tips, tricks and best practices for the jQuery JavaScript Library that I've picked up over the past few months, but instead ended up developing my first jQuery plugin.

Introducing jQuery plugin for Twitter v1.0 - View Demo
A simple, unobtrusive and customisable client-side method for easily embedding a Twitter feed into a web page.

To begin, download the source files (.zip) and familiarise yourself with the necessary JavaScript and CSS files that need to be included in your page:

<link rel="stylesheet" href="jquery.twitter.css" type="text/css" />
<script src="jquery.twitter.js" type="text/javascript"></script>

Next, add a div element with id "twitter" to your page, wherever you want the feed to appear:

<div id="twitter"></div>

Lastly attach the plugin to that div with the following jQuery code (the customisation options are pretty much self-explanatory I think):

$(document).ready(function() {
	$("#twitter").getTwitter({
		userName: "jquery",
		numTweets: 5,
		loaderText: "Loading tweets...",
		slideIn: true,
		showHeading: true,
		headingText: "Latest Tweets",
		showProfileLink: true
	});
});

It's obviously a little more involved, but that should be enough to get you up and running!

The most recent version of this plugin will always be the one available for download on this post.

Please let me know if you decide to use it, or have any feedback.

Using a Plugin Development Pattern (by Karl Swedberg) as a starting point, the plugin is based on Twitter's HTML Badge Customizer.

Open Source calls it: alpha testing
Microsoft calls it: 1.0
Google calls it: shhhh...top secret
Apple calls it: unsubstantiated rumors

Open Source calls it: beta testing
Microsoft calls it: 2.0
Google calls it: beta testing
Apple calls it: rumours with possibly some substance to them

Open Source calls it: release candidate
Microsoft calls it: 3.0
Google calls it: beta testing
Apple calls it: copies are circulated to the usual suspects, who eagerly publish reviews describing it as the "most innovating product yet!"

Open Source calls it: 1.0
Microsoft calls it: varies. Previous names have included 3.1, 95, 98, 4.0, 5.0 or X.
Google calls it: beta testing
Apple calls it: released to the market place, Steve Jobs goes on record to say that it is "insanely great".

Open Source calls it: 2.0
Microsoft calls it: SP1,2,3...
Google calls it: beta testing
Apple calls it: a recall

And of course, for all of the versions above:
Slashdot puts a writeup on the front page. A million posters call it a Slashvertisement. Somebody quotes CmdrTaco's lame-as-an-iPod comment. At least one thread will begin with a Goatse link and will end with a reference to Adolf Hitler.
Robert X. Cringley will claim with a smile that he knew this was coming.
Paul Graham will write an article on how it could have been done better with Lisp, but oh well, good job anyways.
Linus Torvalds will say nothing.
Bill Gates will appear on pictures smiling evily.
Steve Jobs will appear on pictures stoned.
Maddox will put a writeup on his site involving the item in question and a penis.

Just kidding. Sorry Ian, will buy you a drink later tonight. But, this is on a tangent, I have noticed how many dandelions there are in the air here... maybe it's just me. So what I wanted to say is, I thought this would be a fun game to try....

Fire up Google Image Search, enter your first name into the search box and wait for the results.
Navigate to the results page that corresponds to your age, eg. 23.
If there aren't enough result pages, try searching with your full name instead.
On your result page, click on the number of the image that corresponds to the month in which you were born, eg. October = 10.

My original thoughts were that the resulting image would somehow be your own google identity or [insert some wacked made-up virtual/real relationship here].

...fun that is until I saw what mine was - a dog taking a dump.

Now that I've taken on a big development project at work, and all my music archives are at home, I'm going to be working late hours and need to find some decent coding music - I'm digging the new Vertical Horizon album. Officially due next month.

And coding drunk is another story. /* drunk now, fix later */

UPDATE: Warrenski has uploaded some photos of the ship that ran aground off the coast of Sunset Beach, just down the road from Milnerton.

1. Programmer produces code he believes is bug-free.
2. Product is tested. 20 bugs are found.
3. Programmer fixes 10 of the bugs and explains to the testing department that the other 10 aren't really bugs.
4. Testing department finds that five of the fixes didn't work and discovers 15 new bugs.
5. See 3.
6. See 4.
7. See 5.
8. See 6.
9. See 7.
10. See 8.
11. Due to marketing pressure and an extremely pre-mature product announcement based on over-optimistic programming schedule, the product is released.
12. Users find 137 new bugs.
13. Original programmer, having cashed his royalty check, is nowhere to be found.
14. Newly-assembled programming team fixes almost all of the 137 bugs, but introduce 456 new ones.
15. Original programmer sends underpaid testing department a postcard from Fiji. Entire testing department quits.
16. Company is bought in a hostile takeover by competitor using profits from their latest release, which had 783 bugs.
17. New CEO is brought in by board of directors. He hires programmer to redo program from scratch.
18. Programmer produces code he believes is bug-free...

IBM and Toshiba are jointly designing the central chip that will control the PlayStation 3... The project, which aims to create the ultimate graphics and sound processor, is believed to cost around $1bn.

Continued here

PS2 Programming Tutorials

better than ezra. better than sex. better than microsoft.

I didn't find a phrase though. Yet.