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.

The power of Adblock, a content-filtering extension for Mozilla/Firefox web browsers, continues to suprise me. So much so that I just have to, well, err, advertise it here again.

Adblock allows the user to specify filters, which remove unwanted content based on the source-address. If this sounds complicated, don't worry: it's not. Just add a few filters. Every time a webpage loads, Adblock will intercept and disable the elements matching your filters.

Here are a few examples of simple filtering:

• Blocking all GIF images: .gif
• Blocking all content served from DoubleClick: doubleclick.net
• Blocking the contents of an ad-directory: http://example.com/ads/

And then we have Contextual Keyword Advertising Technology, which is what actually prompted this post. I was reading an article (yay!) on IGN Music today, and noticed that the words "no doubt" were linked. If you hover your mouse over the words, a sponsored link for Napster.co.uk appears in a dynamic, inline popup, along with a short text blurb and a link to "Download No Doubt Tracks at Napster".

This is the first time I've encountered this advertising technique, which is powered by Vibrant Media's IntelliTXT technology.

IntelliTXT is a pay-for-performance ad unit that delivers the advertiser's message via contextually-relevant keywords within article-based content.

Ah-hah! But with a few clicks here and there in Adblock, I'd added a new filter for '*intellitxt.com*', which basically prevented the JavaScript on their server from performing it's content replacing/link insertion, and the link and inline popup disappeared. Funnily enough, the script didn't seem to take effect in any other browsers I have installed on my notebook: IE 6, Opera 7.5 or Mozilla 1.7! If it works in these browsers on your setup I'd love to know.

If you do install Adblock, which I highly recommend to all Firefox/Mozilla browser users, then you can get started with downloading and importing my filter set: grab it here (.txt). It's mostly based around the sites I visit, but generic enough to benefit most users I think. It should be relatively simply to import this text file into Adblock, in Firefox you simply go to 'Tools > Adblock > Preferences > Adblock Options > Import filters...' and find the downloaded text file.

Hopefully you'll receive as much pleasure from disabling annoying advertising content as much as I do! I find reading articles much easier - no ugly, distracting ad interruptions - and the page will download much faster too since all the ad imagery is completely blocked.

Anyway, this week I've re-discovered probably one of the most under utilized features of the Mozilla browsers, despite having mentioned it here before: Ad Blocking.

There's nothing more annoying that a flashing banner ad placed smack-bam!! right in the middle of an article you were trying to read. Nobody likes banner ads. So having applied the multiple ad-blocking techniques described by Blogzilla, I've decided to provide the following quick demonstration: a before and after scenario of a randomnly-chosen *wink* MTV.com article page.

Gaming site IGN.com is also notoriously bad for it's ads - you have to see a huge ad even before entering the site (it will cost you to disable it), while upon entering you're faced with a horde of ads and popup windows. See the before and after.

It works just as well on other sites: CNN.com before and after if you're still not convinced.

Using a personalised userContent.css file (based on this one) and by enabling the other ad-blocking preferences, Mozilla successfully hides all banner ads from displaying.

It's ridiculous that websites offer it's users, who unfortunately don't know any better, the chance to remove banner ads as an incentive to subscribe to their services, when Mozilla does just that at no cost: it gives it's end-users the power and control to personalize how they experience the web.