Yet another list of ‘extremely useful’ jQuery plugins

A while back, I posted an article listing the jQuery plugins I use most often in my projects. Thanks to a great developer community, new plugins are constantly being created and hence, my original list has changed somewhat.

Listed below, are those plugins I find most useful in that they’re easy to implement, and generally do what I need them to do, without much editing or interference from my side. Granted, you probably won’t find anything new here if you’ve already been around the block, but for those just starting out – this list may just save you a ton of time.

1. jQuery Form Plugin

If you need to submit forms and receive a response via AJAX, then look no further. With an accessible API already available, I’ve found this plugin to be extremely flexible and easy to use. What’s more is that the documentation provided is concise and to the point with good examples littered throughout.

2. Colorbox

We all know that by now there are a hundred and one different modal box plugins available for jQuery. I’ve played with most of them and I have to say that I’ve found Colorbox to be the most flexible and robust of the lot. What’s more is that it’s damn stylish to boot and pretty easy to customize.

3. jQuery UI Tabs

I really like jQuery UI. I love the theme roller, I love the fact that you can use only certain elements without having to resort to loading the entire library. As far as “Tabs” go, I haven’t found another plugin easier to use than this one. While the “tabs” plugin included with jQuery Tools is good as well, I just found it to be a little more rigid than that of jQuery UI.

4. jQuery UI Datepicker

Again, there are quite a few datepicker/calendar plugins out there, but few can compare to this particular script. Very easy to implement and with loads of configurable options, what’s not to like.

5. GalleryView

Like modal scripts there are about a million different gallery scripts available, some brilliant, others not so much. The trick is finding the right script for the situation. I’ve found though that in the majority of cases GalleryView fits the bill admirably. It’s stylish, easy to implement and clients are generally pleased with the flash like animation and functionality. Definitely worth a look.

6. jqPageFlow

Ok, so this is a bit of a shameless plug, but why else write your own plugin if you’re not going to use it often. I use this handy little script for almost every project where I need to display a list of records. It eliminates the headaches of pagination, though admittedly, it does take a little work to implement correctly.

7. jQuery Alert Dialogues

So yes, you can use a modal plugin to display informational dialogues, but I just find this plugin so much easier to implement. With callback support, styling customisation and various config options it’s really a pretty simple choice to make.

8. Superfish Menu

Almost every site lately requires a drop-down menu solution of some sort. Quite simply, Superfish has proven time and again to be the easiest and most customizable menu script I’ve ever worked with. Sure, it won’t suit every situation, but then you’re probably looking at writing a custom script anyway.

9. markItUp

I must admit that I’m not a big fan of WYSIWYG editors. Or more accurately, I’m not a fan of an editor in the hands of an end user who has no clue how markup actually works. When however you do have a more knowledgeable client, markItUp is brilliant. Not a WYSIWYG per se, but more of a markup editor with tons of options and customisation options.

There are of course quite a few more plugins I tend to use, depending on the project and situation at hand. Do you perhaps have suggestions for other plugins I should take a look at ? Drop a comment and let me know.

Advanced radio button grouping with jQuery

I was asked to do something rather interesting with some radio button inputs the other day. I haven’t come across this particular problem before and google didn’t return anything helpful, so I decided to share what I came up with.

First, the scenario

We have a standard form with 4 radio button groups. Each group has 4 radio buttons labeled from “1” to “4”. Now, when the user selects “option 1” in “group 1”, all the remaining “option 1” items need to be disabled. To see an example in action, you can view the demo here.

The problem

When I first started, I thought that it’s simply a matter of giving each “option” (regardless of group) a common class name – then just disabling all other options with the same class name. That works, to a point, but what if the user changes his mind and selects another option ? Now I had to find all previously disabled options, re-enable them and start all over again.

The solution

Essentially what I came up with was a basic nested loop to handle setting and unsetting the relevant “disabled” attributes. To achieve this, first we assign all “option 1” a class of “number1”, “option 2” a class of “number2” and so on.

Next, we run a basic for loop, and go through each “number” class (i.e. number1 to number4). For each class, we call a function. Inside this function is another loop – this time iterating over each radio button assigned the current class name. Using this loop, we remove any “disabled” attributes which may have been assigned previously. We also find out which item in that group is currently selected (if any) – this is so we can run a second loop to disable all those options not currently selected. Confused ? Now might be a good time to go through the code

The code

$(function(){
		// fire our code when a radio button has been selected
		$("input[type=radio]").change(function(){
			var name = $(this).attr("name"); // get the current button's group name
			$("input[name="+name+"]").removeAttr("selected"); // first we deselect "all" radio buttons within the same group
			$(this).attr("selected","selected"); // make sure our currently "changed" button is selected
			for(i=1;i<=4;i++){ // go through the 4 radio classes
				processRadio(".radio"+i);
			}
		});
		/**
			Loops through each item with same "class" name and disables/enables where appropriate
		**/
		function processRadio(class){
			var empty;
			var id = "";
			var buttons = $(class); // read all buttons with the specified class name into a jQuery object
			buttons.each(function(){ // loop through each item
				var me = $(this);
				var isSelected = me.attr("selected"); // bool value, based on whether the "selected" attribute is present or not
				me.removeAttr("disabled"); // clear the disabled attribute if present
				me.siblings("label").removeClass("disabled"); // same with the associated label element
				if (isSelected != empty && isSelected != ""){
					id = $(this).attr("id"); // set our tmp id var to our currently selected item
				}
			});
			// make sure we have an id, otherwise we'll get an error
			if (id != empty && id != ""){
				buttons.each(function(){ // loop through each radio button once again
					if ($(this).attr("id") != id){ // set the disabled attributes if id attribute doesn't match our tmp id var
						$(this).attr("disabled", "disabled").siblings("label").addClass("disabled");
					}
				});
			}
		}

	});

I’ve commented as best I could, which hopefully makes more sense than my rambling above. Once again, there is a working demo available for you to play with. Be sure to have a look at the markup as well, might clear up a few questions.

I strongly suspect that there’s a more efficient method for achieving the same result – so if you have a better suggestion, tweak or link please let me know – I’d greatly appreciate it.

Circular Image Slide with jQuery

A friend of mine asked me to write a little script for him the other day that would do the following :

1. Slide a list of images from right to left across the screen.
2. When an image moves out of view on the left, it should get appended to the end of the list thus creating the illusion of a never ending or circular procession of images across the screen.
3. Display a “loader” image while the photographs are downloading.
4. You can view a demo of the end result here.

My first impression was that there’s almost certainly a jQuery plugin capable of doing this. Well if there is, I haven’t found it yet. While there are a myriad of “Slide” plugins available, and some come quite close, none could fulfill these requirements.

So I had to go and write my own little script. I haven’t converted the code to plugin form just yet as I need to look a few things up.

If you’d like to just jump straight in, here’s a zipped version of the demo.

First, the HTML:

<div id="slider">
<div id="imageloader">
			<img src="images/ajax-loader.gif" /></div>
<img src="images/sample1.jpg" />
		<img src="images/sample2.jpg" />
		<img src="images/sample3.jpg" />
		<img src="images/sample4.jpg" />
		<img src="images/sample5.jpg" /></div>

Nothing out of the ordinary here, just a div with a bunch of image tags. The only thing to note is the div’s “id”. The real magic happens in the JS and CSS. The pre-loader image is located inside a nested div with an id of “imageloader”. By default, our loader will be visible while our photographs are hidden.

That brings us to the CSS:

#slider {position: relative; overflow: hidden; height:155px;}
#slider img {position:absolute;	margin:0; display:none;}
#imageloader {position:relative; display:block; width: 100%; margin: 0px auto; text-align: center;}
#imageloader img { position:relative; top:70px; z-index:100; width:128px; height:15px; display:inline;}

Firstly, due to the nature of the script we have to make use of relative and absolute positioning. With that in mind, we first set our container div to relative positioning. This allows us to assign an absolute position to each child image, this is critical to the functioning of this script.

Next we set the overflow style to “hidden” – this makes sure that we don’t get ugly scroll-bars when images are moving outside of the containing div’s bounds.

We also need to set a fixed height for the container div. Failing to do so will result in the images not being displayed at all (due to the absolute positioning and overflow setting).

For the nested images, we want to set their initial display attribute to “none”. This is so they don’t display until our DOM is ready and all the images are loaded. We also need to set their positions to absolute.

For the pre-loader we just set some styles to make sure it get’s displayed in the correct position : in this case 70px from the top and horizontally in the middle of the container div. We also make sure to set the display attribute to “inline”, thus making sure the pre-loader img is shown while all other img’s are hidden.

Now for the Javascript/jQuery:

var speed = 50;
var pic, numImgs, arrLeft, i, totalWidth, n, myInterval;

$(window).load(function(){
pic = $(“#slider”).children(“img”);
numImgs = pic.length;
arrLeft = new Array(numImgs);

for (i=0;i

We use $(window).load() instead of the standard $(function(){}) or $(document).ready() methods due to a timing glitch in Safari. Safari reports the DOM as finished loading even while images are still downloading – not ideal if we want our pre-loader to work correctly.

When the DOM has finished loading, and the images have finished downloading we execute our code.

First we read all our images into an array of jQuery objects. We make sure the pre-loader isn’t included in this array by using $(“#slider”).children(“img”) instead of $(“#slider img”).

Next we loop through each image in our array and calculate a totalWidth. We need this value so that we know where to append each image when needed. Within this loop, we also set the correct absolute position for each image so that they all line up next to each other. Otherwise they’d all just sit on top of each other.

Once our loop is complete and we have all the initial positions setup, we create a standard javascript interval. Using this interval we can call a function every x milliseconds. We use the “speed” variable to make this configurable.

Now that everything’s set up, we hide our pre-loader, unhide our images and wait for the interval to fire.

The “flexiScroll()” function simply moves each image to the left by 1 pixel, recalculates the totalWidth and if necessary, moves the left-most image to the end of the list. Since the end of the list is currently outside of the viewable area, this gives the illusion that the list never ends.

And that’s all there is to it.

There of course must be a more efficient way of doing this, so if you would like to contribute, please leave a comment or contact me.

6 jQuery snippets you can use to manipulate select inputs

When it comes to manipulating the DOM, fewer elements are more tiresome than the good old select input. Fortunately for us, jQuery makes what was once a headache, a walk in the park.

Listed below are 6 snippets which should make manipulating those selects more pleasant than say, pulling your own teeth.

1. Getting the value of a selected option.

$('#selectList').val();

This couldn’t be simpler. Remember how before jQuery, you had to use selectedIndex and all those lovely javascript methods. I do, and I don’t miss it one bit.

2. Getting the text of a selected option.

$('#selectList :selected').text();

Similar in concept to the first snippet with one difference. Where the first example gives you the “value” of the selected option, this example gives you the actual text contained inside the option tag.

3. Getting the text/value of multiple selected options.

var foo = [];
$('#multiple :selected').each(function(i, selected){
foo[i] = $(selected).text();
});
// to get the selected values, just use .val() - this returns a string or array
foo = $('#multiple :selected').val();

Once again, the same concept as the first two examples, except we’re now using jQuery’s “each()” method to loop through all selected options in a multiple select list. Each value or text value is read into an array for later use.

4. Using selected options in conditional statements

switch ($('#selectList :selected').text()) {
case 'First Option':
//do something
break;
case 'Something Else':
// do something else

break;
}

Much like example 2, we’re getting the text() value of a selected option, only this time we’re going to use it inside a switch statement.

5. Removing an option.

$("#selectList option[value='2']").remove();

Using an attribute filter, we can find and therefore manipulate specific options within a select list. In this example we’re telling jQuery to find the option with value=”2″ and then remove it from the select list. We can similarly add options to a select list as we’ll see in example 6.

6. Moving options from list A to list B.

$().ready(function() {
$('#add').click(function() {
return !$('#select1 option:selected').appendTo('#select2');
});
$('#remove').click(function() {
return !$('#select2 option:selected').appendTo('#select1');
});
});

Originally posted by Jeremy Martin, here we have 2 select lists and 2 buttons. If you click the “add” button, we remove the selected option from select1 and add that same option to select2. The “remove” button just does things the opposite way around. Thanks to jQuery’s chaining capabilities, what was once a rather tricky undertaking with JS can now be done in 6 lines of code.

And there you go. That wasn’t so bad now was it ? If you have any other handy snippets, or you’ve found an easier way to do something already covered here, why not leave a comment and share the love!

Update:

Incidentally, a few hours after first publishing this post I came across the following “select element cheat sheet”. Technically speaking, it may be a little big to be called a cheat sheet, but the author has given a very thorough and practical guide which I’m definitely going to be making use of.

jQuery plugin : jqPageFlow – scrolling pagination made easy

jqPageFlow

Simply put, this plugin makes the scrolling pagination found on sites like dzone.com and Google Reader easy to implement on your site.

A working demo is viewable here

This is of course all configurable, and intended to be used on an automatically generated page using a backend script (eg php).

Please note that this script is still currently in beta, so if you find any problems please post a bug submission to http://code.google.com/p/flexidev/issues/ with as much information as possible

Usage

1. Download the latest source code from the repository : http://code.google.com/p/flexidev/downloads
2. Include the jQuery library into your page header (this plugin supports both jQuery v1.2.6 and v1.3)
3. Include the jquery.jqpageflow.js file into your page header
4. Include the supplied css file in your page header : modify as you see fit
5. View the source of this page: copy, paste and modify the javascript block as required. Use $(“body”).jqpageflow(); to use defaults.
6. Create a php/.net/perl/python etc backend script to handle the serverside stuff – see the index.php file (this page) included in the download source for a basic example

Features

• Compatable with jQuery v1.2.6 and 1.3
• Chainable
• Configurable options : including the url to call, current page, pager var, container element etc
• Server side platform independant : tell it how to interact with your backend scripts
• Cross browser compatability, tested in FF 2.5+, Safari 3+ (more browsers to come soon)
• Skinnable loader with CSS and customizable image path

Options

• url: Specify which url (relative or absolute) the plugin should submit the ajax request to. Defaults to current window.location
• currentPage: Gets appended to url as a GET value to help your backend script keep track of which page of results the user is on. Defaults to 0 (first page)
• pagerVar: Related to currentPage, gets appended to url as a GET var to help your backend script keep track of which page of results the user is on (e.g. index.php?page=2). Defaults to “p”
• perPage: Used for calculation and display purposes, tell the plugin how many results are being displayed per page. Defaults to 50.
• totalResults: Tells the plugin when it needs to stop trying to look for more results. Defaults to 100
• container: Specify which html element contains the result items, can be any jQuery compatible selector (eg “#mycontainer”, “.results”, “body”).
  Any html returned to the ajax call gets appended to this element. Defaults to “body”
• loaderImgPath: Tell the plugin where to find the loader img relative to the page calling the plugin. Defaults to “images/loader.gif”
• debug: When set to 1, the plugin will print debugging information to the console (firebug). Defaults to 0

Changelog

• 18 Jan 2009 : version 0.1b released

Credits

• Plugin Author: Barry Roodt – https://calisza.wordpress.com , Twitter
• Naming ideas, SEO/SEM help: Christopher Mills – http://imod.co.za , Twitter

How to use jQuery to select a radio button from parent element

A friend asked me for some help on doing the following :
1. You have an unordered list – within each list item you have a radio input.
2. When you click on the list item (i.e. the entire container), it must a) select the radio input and b) add a css classname of “selected” to the list item.

You can find a demo here.

First, the html :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<!-- include our jquery scripts -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
    <script src="js/radio.js" type="text/javascript"></script>
    <style type="text/css">
    	li { color: #000; }
    	li.selected { color: #FF0000; }
    </style>
</head>
<body>
	<div>
		<ul>
			<li class="test">Test 1 <input type="radio" name="test" /></li>
			<li class="test">Test 2 <input type="radio" name="test" /></li>
			<li class="test">Test 3 <input type="radio" name="test" /></li>
			<li class="test">Test 4 <input type="radio" name="test" /></li>
			<li class="test">Test 5 <input type="radio" name="test" /></li>
		</ul>
	</div>
</body>
</html>

There is nothing out of the ordinary here – just a simple unordered list of radio inputs.

Next, the js (radio.js) :

$(document).ready(function(){
	$('li').click( function(){
		$('li.selected').removeClass('selected');
		$(this).addClass('selected');
		$(this).children("input[type=radio]").click();
	});
});

1. First – we tell jQuery to execute the following code once the document has finished loading, ensuring that the DOM has been registered successfully.
2. Next we bind a click event to all list item elements on the page – you can of course change this to all list items with a class of “myselection” for example ( $(“li.myselection”).click… )
3. When a list item is clicked – we first need to remove the “selected” class from all other list items.
4. Now we need to add the “selected” class to the list item which fired the event ( $(this) ).
5. Finally, we need to make sure that the radio button inside the list item is “clicked” : we do this by using the .children() selector and executing a click() event on the input.

The important bit is the $(this).children(“input[type=radio]”) selector. What we’re doing here is telling jQuery to find all inputs of type radio (i.e. all radio inputs) inside “this” list item (i.e. the list item which was clicked on). We then use .click() to..as you guessed it… execute a click event on the returned element (in this case the radio input).

And that’s all there is to it. You can read up some more on jQuery selectors here.
I would also highly recommend reading the following article : Improve your jQuery – 25 excellent tips.

Jquery UI Layout Manager Plugin

While working on my new framework the other day I came across this excellent Jquery Plugin : UI.Layout – The Ultimate Page Layout Manager.

What it does with minimal markup and some well written javascript is transform your html page into a professional pane based layout. Like most jQuery plugins, it’s incredibly simple to implement and through the use of CSS and a large number of options is highly customizable.

All in all, a very well rounded and executed use of the jQuery library. Kudos to Fabrizio.

You can check out some demos here

Javascript / Jquery Bookmark script

Ever needed to add a button or link to your site which allows the user to save your site to their bookmarks/favorites ?

Here’s just the script for you. Using jquery, it works in Firefox 2+(tested), IE 6 (not tested), IE7(tested) and Opera 7+ (not tested). Unfortunately not all browsers support the action, so a generic “alert” has been added to inform the user.

You can download the full script here and follow along if you’d like a further explanation of the code involved. A demo can be viewed here.

bookmark.js

The script itself is really very basic. Firstly what needs to happen is on page load, the script checks to see if the user is browsing the site with Opera. If so, we set the rel attribute of all our bookmark anchor tags (class=”jqbookmark”) to “sidebar” – this is a standard Opera technique for creating this type of link.

Next we add an event listener which will execute whenever an anchor tag of class “jqbookmark” is clicked. Simply put, it checks to see which browser is being used and executes the necessary code.

The nice thing here though is that you can set the script to bookmark any url with any title by specifying the href and title attributes respectively.

$(document).ready(function(){
	// add a "rel" attrib if Opera 7+
	if(window.opera) {
		if ($("a.jqbookmark").attr("rel") != ""){ // don't overwrite the rel attrib if already set
			$("a.jqbookmark").attr("rel","sidebar");
		}
	}

	$("a.jqbookmark").click(function(event){
		event.preventDefault(); // prevent the anchor tag from sending the user off to the link
		var url = this.href;
		var title = this.title;

		if (window.sidebar) { // Mozilla Firefox Bookmark
			window.sidebar.addPanel(title, url,"");
		} else if( window.external ) { // IE Favorite
			window.external.AddFavorite( url, title);
		} else if(window.opera) { // Opera 7+
			return false; // do nothing - the rel="sidebar" should do the trick
		} else { // for Safari, Konq etc - browsers who do not support bookmarking scripts (that i could find anyway)
			 alert('Unfortunately, this browser does not support the requested action,'
			 + ' please bookmark this page manually.');
		}

	});
});

Demo.html

The html is straightforward. We include our two scripts (jquery and jqbookmark) and we add our links to the page. As mentioned above – the links need to have a class attribute with the value of “jqbookmark”, all other links will be ignored by the script.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<!-- include our jquery scripts -->
    <script src="js/jquery-1.2.6.min.js" type="text/javascript"></script>
    <script src="js/jqbookmark.js" type="text/javascript"></script>
</head>
<body>
<div>
<ul>
	<li><a href="http://www.google.com" title="Google.com" class="jqbookmark">Google bookmark</a></li>
	<li><a href="http://www.yahoo.com" title="Yahoo search engine" class="jqbookmark">Yahoo bookmark</a></li>
	<li><a href="https://calisza.wordpress.com" title="A wonderful Blog" class="jqbookmark">Blog bookmark</a></li>
	<li><a href="http://www.microsoft.com" title="Microsoft">Will not be bookmarked</a></ul>
</div>
</body>
</html>

I’d love to know if this functionality could be expanded to include Safari, but so far my good friend google has come up with nothing. At the very least, I hope that someone can find this script useful.

Stylish Javascript / Jquery panel navigation part two

A little while ago, I posted an entry on the stylish jkpanel plugin for jquery. While useful, it didn’t quite meet my needs at the time and I made certain adjustments. I’ve since made further updates making the implementation of the script more unobtrusive and hopefully far simpler.

First, the modified script ( jkpanel.js ) :

//Drop Down Panel script (March 29th, 08'): By JavaScript Kit: http://www.javascriptkit.com
// Modified by Barry Roodt (September 08) : https://calisza.wordpress.com

var jkpanel={
	controltext: 'Close Panel',
	$mainpanel: null, contentdivheight: 0,
	$contentdiv: null, $controldiv: null,

	openclose:function($){
		this.$mainpanel.stop() //stop any animation
		if (this.$mainpanel.attr('openstate')=='closed'){
			this.$mainpanel.animate({top: 0}, 500).attr({openstate: 'open'});
			this.$controldiv.show();
		} else {
			this.$mainpanel.animate({top: -this.contentdivheight+'px'}, 500).attr({openstate: 'closed'});
			this.$controldiv.hide();
		}
	},
	
	loadfile:function($, file, height, openpanel){
		jkpanel.$contentdiv.load(file, '', function($){
					var heightattr=isNaN(parseInt(height))? 'auto' : parseInt(height)+'px';
					jkpanel.$contentdiv.css({height: heightattr});
					jkpanel.contentdivheight=parseInt(jkpanel.$contentdiv.get(0).offsetHeight);
					jkpanel.$mainpanel.css({top:-jkpanel.contentdivheight+'px', visibility:'visible'});
					jkpanel.$controldiv.css({cursor:'hand', cursor:'pointer'});
					if (openpanel){
						jkpanel.openclose($);
					}
					return true;
		})
		
		return false;
	},
	
	init:function(file, height){
		jQuery(document).ready(function($){
			jkpanel.$mainpanel=$('<div id="dropdownpanel"><div id="jkcontentdiv"></div><div id="jkcontrol">'+jkpanel.controltext+'</div></div>').prependTo('body');
			jkpanel.$contentdiv=jkpanel.$mainpanel.find('#jkcontentdiv');
			jkpanel.$controldiv=jkpanel.$mainpanel.find('#jkcontrol').css({cursor: 'wait', display: 'none'});
			jkpanel.loadfile($,file, height, false);
			jkpanel.$mainpanel.attr('openstate', 'closed');
			$('#jkcontrol').click(function(){jkpanel.openclose($)});
			$('.panelbutton').click(function(){
				var pfile = this.href;
				var pheight = this.rel || false;
				jkpanel.loadfile($,pfile, pheight, true);
				return false;
			});
					
		})
	}
}

Next, the updated css ( jkpanel.css ):

#dropdownpanel{ /*Outermost Panel DIV*/
position: absolute;
width: 100%;
left: 0;
top: 0;
visibility:hidden;
}

#jkcontentdiv{ /*Div containing Ajax content*/
background: white;
width: auto;
color: black;
padding: 10px;
margin: 0px auto;
}

#jkcontrol{ /*Div containing panel button*/
border-top: 5px solid #ECECEC;
color: white;
font-weight: bold;
text-align: center;
background: transparent url("../images/panel.gif") center center no-repeat; /*change panel.gif to your own if desired*/
padding-bottom: 3px; /* 21px + 3px should equal height of "panel.gif" */
height: 21px; /* 21px + 3 px should equal height of "panel.gif" */
line-height: 21px; /* 21px + 3px should equal height of "panel.gif" */
}

And lastly, a usage example :

<html>
<head>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jkpanel.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/jkpanel.css" type="text/css" />
<script type="text/javascript">
  jkpanel.init('initialcontent.htm', '200px');
</script>
</head>
<body>
<p> Some text <a href="someothercontent.htm" rel="500px" class="panelbutton">my link</a></p>
</body>
</html>

You will need to take note of the following :

• Use class=”panelbutton” to enable the jkpanel for your link
• Tell jkpanel which content to load by specifying the path in the href attribute
• Specify a height for the panel using the “rel” attribute. You can set this to rel=”auto” to tell the panel to automatically match the height of it’s contents
• Make sure to read the terms of usage on jkpanel’s home page, you can also obtain the panel button from the same page

This is of course a simple example and I plan on posting a proper, working demo shortly.

The 6 most useful JQuery Plugins

Lets get one thing out of the way before we go any further – I’m a jquery fanboi. I use it, I need it, I love it.

I’ve been using this wonderful library for almost 2 years now and I can only vaguely remember what it was like developing a site without it.

It’s kind of like trying to remember what life was like before getting your first cellphone. You managed somehow, but now you just can’t quite see yourself making it through the day without one.

I’ve just finished another project and was struck again by how much easier these libraries and their plugins make my life. To write javascript using old school methods is such a waste of time and in my opinion, just downright silly.

Before I start a new project, I spend quite a bit of time going through the various plugins available to see if there’s anything new that may help me in my work.The following list details my favorite and most frequently used plugins.

1. Thickbox – this plugin is what first convinced me to give jquery a go. I was looking for something along the same lines as the prototype / script.aculo.us Lightbox plugin. The fact that it handled content and not just images coupled with it’s lightweight footprint is what sold me. In my opinion, still the most useful jquery plugin out there.

2. Superfish Menus – I’ve tried many, m-a-n-y javascript based menu systems and I have to say that this is so far the easiest and most flexible implementation I’ve seen yet. I’m just sorry that I didn’t discover it sooner.

3. Datepicker – probably the easiest to use calendar popup script I’ve used to date. Powerful, flexible and unobtrusive, what more could you want?

4. JGrowl – only recently discovered, it’s a stylish way of notifying users of what’s going on in your application. I use it to display system messages in my admin panels. Definitely beats the standard window.alert approach. The only thing I don’t like is that you have to use the entire jquery.ui library (over 150K). I’ll be looking into this to see if there’s some way to cut down on the filesize.

5. clueTip – pretty handy when you need to display tooltips. Supports ajax and inline content and very easy to implement.

6. UI Tabs – makes creating tab based navigation on your website stupidly simple. The various options make this plugin a must have. I find it very useful for longer forms, admin panels and organising one’s interface.

There are of course hundreds of other plugins available that I haven’t even looked at yet. Then there are all the other javascript libraries available, with all of their hundreds of plugins. Which is what I love about the web – there’s always something new to play with.

Again, my heartfelt thanks to all of the selfless, hardworking hackers out there who publish their work for all and sundry to use. Without you guys, the web would simply cease to function.