jQuery portlets

Note: This code is outdated. Instead I suggest you use jQuery UI.

Portlets: Example | Download (24 KB)

A bit of a friendly challenge was put to me by Chris Heilmann, a London based Yahoo developer and JavaScript guru / author. So, I have updated this little demo with improved expand / collapse toggle behavior. I have also made it so that each portlet can be dragged and dropped, ala Netvibes. This was made possible using the Interface plugins for jQuery.

I am going to go out on a limb here and say that this whole crazy notion about Ajax (it's not an acronym), JavaScript and Web Standards is more than just a fad. In fact, I dare say that it is here to stay. Yes sir-ee, these Intarwebs are alive with so many flashy widgets, you'd swear we are in the 1990s all over again. Recently, the man himself - Zeldman had this to say about it.

Web 1.0: Pointless Flash widgets.

Web 2.0: Pointless "Ajax" widgets.

Not to be left behind, I have found myself using JavaScript more and more in the workplace. Without wanting to spark a debate over which JavaScript framework / toolkit is superior, I just wanted to say that jQuery is very cool and well worth checking out. Much like I did with my pointless moo.fx iMac, I have put together a little demo showing off some of jQuery's native features. Initially, I was going to title this post "jQuery for Designers," but then I realized that has already been done before.

What I love about jQuery is that as a designer who is comfortable with CSS, you will immediately appreciate the familiarity of descendant selectors. Another nice aspect is that it has been rigorously tested in multiple browser situations by a dedicated group of JavaScript enthusiasts. I'm subscribed to the jQuery mailing list, and it's never a dull day with all that discussion.

In CSS, if you wanted to get all links with the class name of "toggle" you would write that as a.toggle. In jQuery you write that as, you guessed it - a.toggle. As a designer, since you are familiar with descendant selectors, then the concept of going up the DOM tree will not be tough to grasp. So, instead of starting at some container and moving down, let's start at a single point and move up. Here is a code example from the demo…

$('a.toggle').click(function () {
$(this).parent('div').next('div').toggle();
return false;
});

So, first we're saying "Yo JavaScript, go get me all the links with the class name toggle, pronto!" Once we've got those links, we attach an onclick event handler with click(function(){…}). Now, if anyone clicks any of those links, then it starts a chain reaction. It begins with the link itself, represented by this, and then finds its containing element, called a parent in JavaScript. If the parent has the tag name div, then it finds the next nearest tag. If this is also a div then it will apply the toggle() to it. If it's visible it will get display: none; but if it's hidden it will be shown automagically.

So, this means the aforementioned piece of code can be put in the page just once, and any of the links with the class toggle will respond to the click, but only affect the div immediately following the containing parent div. Likewise, you could simplify that script even further by just writing this…

$('a.toggle').click(function () {
$(this).parent().next().toggle();
return false;
});

If you used that bit of code, the next item after the link's containing element would be hidden, regardless of what tag type it might be. That makes for one incredibly portable piece of code. Also, you can apply that to more than just links, putting the click event handler on any tag you want with any ID or class name. Now, in the demo you might be asking yourself what the difference between show() / hide() and toggle() are.

Good question - see, you're catching on already! Show and Hide do just that: showing hidden things, and hiding visible things. Toggle acts as a single button that does both and determines the state automatically. In the demo, if you toggle one portlet to visible and hit "Expand," all will be visible. If you were to toggle it off and hit "Collapse," all would be hidden. If you hit "Invert" though, that calls a toggle on all the portlets, and will hide all that are shown and/or show all that are hidden. This can result in what is depicted below.

Toggled Portlets

While I'm not a huge fan of JavaScript animations, one neat thing about jQuery is that each effect typically can be given one of three speed settings: slow, normal or fast. For our previous toggle example, it would look like…

$('a.toggle').click(function () {
$(this).parent('div').next('div').toggle('slow');
return false;
});

That would cause the toggled portlet to slide in and out of place. With no speed specified, the change is done without delay, which is what I tend to prefer since animations can run slowly on less powerful computers, whereas instant changes are, well - instant. jQuery also comes with a variety of other animations like slideDown, slideUp, fadeIn, fadeOut, etc. It can also handle heavier things like innerHTML, Ajax calls, XPath and regular expressions.

Without belaboring the point, if you are designer who wants to learn about JavaScript but isn't sure where to start, why not download my example and dissect it, then try your hand at wielding jQuery for a spell. Also, be sure to check out the following resources for a more comprehensive explanation of just how powerful this lightweight JavaScript library can really be.