Journal

jQuery Portlets

18 October 2006 › 13 comments

Portlets: Example | Download (24 KB)

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

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 1990’s 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, twice.

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.

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.

Discussion + Dissension

#1 Yannick

Nice writeup and simple example Nathan. I must say I like JQuery also and am currently using it for a few things on a current project.
#2 Matthew Pennell

We’ve standardised on jQuery too, for exactly the reasons you give – it’s easy for non-Javascript experts to understand what is going on due to its simple syntax and use of CSS-style selectors.

The small filesize helps too. :)
#3 Tony

Nice work. You have a little typo there – “Javasript” :)
#4 Nathan Smith

Yannick / Matthew: That’s cool you guys are making use of jQuery too. I think there’s a lot to be said for it, even thought it might not have the popularity of some of the more well-known JS frameworks.

Tony: I think perhaps you mis-read, because the only misspelling of JavaScript on this page that I was able to find is the one that you provided. That is of course, unless you meant the non-capital “S” in the way that Matthew wrote “Javascript,” in which case you both got it wrong. No worries though. Thanks for pointing it out, even though you misspelled it too.
#5 Nate K

I think you have given a nice sample to the power of Jquery. Personally, I have not decided overall which to use – because I haven’t used it on much yet (besides playing with personal projects).

Thanks for giving a great example.

As a programmer, I know there are some projects out there to make things easier – but I also know that sometimes doing something custom will reap the most benefits according to filesize/needs/etc. I keep my eyes open to the different frameworks available, and try and test them – but like I said, I haven’t settled on any one framework yet.
#6 samalah

Thanks for posting this, very interesting. BTW I think what Tony was pointing to is the small typo in your demo, where it says ‘JQUERY new wave javasript’
#7 Nathan Smith

Samalah: Ah, whoops. Tony, you have my apologies. Thanks for catching that, both of you. I didn’t even think to look in the image itself!
#8 Chris Heilmann

This is a rather interesting demo, but misses the point of these things. If I were to toggle the view of those, I’d also expect the following ones to shift upward – why else would I collapse them? Furthermore, I’d like to drag and drop them around to change their order, much like netvibes.com does it.

All of this is possible in jQuery, too. The real issue I see with these examples though is that they prove the looping powers of jQuery, but in a real application with panels you wouldn’t use loops as that wouldn’t allow you to create new panels without having to add more handlers. Each element in this example will have own event handling, which can make it really slow when there are a lot (netvibes really slows down my machine over night). Instead, it is cleverer to use event delegation for heavy interfaces like this one.

Libraries can make it easier to create web apps that work almost like real desktop apps, but really creating performant web apps is a totally different kettle of fish :)
#9 Nathan Smith

Chris: You just gotta come in here and blow my example out of the water, dontcha? I suppose that’s why you’re the one writing JavaScript books, and I am the one who is reading them. My intention wasn’t to break the mold on web application functionality, just to show off a few “out of the box” features of jQuery. I’m sure there are many people out there who can do cooler stuff with JS than I can. Agreed, your example is far more powerful.
#10 Chris Heilmann

Great improvement, I like this a lot.

I didn’t want to “blow your example out of the water”, I just wanted to challenge you to get it to behave like users would expect these things to behave. And so you did, so my plan worked (strokescatandlaughsinanevilmanner).

It is irrellevant which library or technology we use, tutorials should explain how to create a certain interface or example. Libraries are a means to an end and shouldn’t be the centre of our attention. This is for the library developers to do – based on feedback of implementors. In the end, every library code will have to get converted by the parsed to plain old DOM scripting anyways.

This here now works a lot more like you would expect it to work. What is still missing is a “target suggestion”, as in showing you outlines where you could drop the portlet when you drag it (this is what blew me the first time I saw netvibes.com), but that is a cosmetic change.

It is not about who writes the books, or what you know, it is about making things better. I feel a constant itch to ditch half of onlinetools.org and replace it with cleverer and more intuitive versions, but I just don’t have the time for it. Luckily there are people like you who do dedicate time and take on suggestions. :-)

I work with a lot of people who show the same dedication and constantly amaze me with great ideas and implementations. With a bit of testing and input about what worked well in solutions we’ve had to do in the past these ideas rapidly become something much more powerful than an idea.

One example was the text resizing detection trick for Alistapart. Lawrence showed me that as a part of a page he developed and I egged him on to write some documentation and approached ALA with it. Originally we used YUI for the script, but I didn’t want to make it dependent on the library, so we re-wrote it. The really cool thing is that it brought other developers out of the woodwork who approached the problem successfully in a different manner in the past and others that ported the idea to flash with again others improving this idea.

There are a lot of great developers out there, all they need is to speak up about what they do and ask for feedback by people who did similar things in the past to avoid repeating mistakes that were made. Peer review is an amazingly powerful thing and with the focus on the end user, we can create some nice interfaces.
#11 Chris Heilmann

Oh dang, your example does the target proposal, it just didn’t show on the angle of this laptop. Never mind that then :-)

One thing I don’t like as of the moment though is that it isn’t unobtrusive. If a link is only making sense with JavaScript then create it with JavaScript. However, you could (and in a real solution should) also link them to a backend script that does the same showing and hiding by altering the app status.

I know this is an example, but a lot of people will take these as they are and not bother about non-JS support.
#12 Karl

Nathan, I LOVE those portlets. Very slick! Netvibes.com is my favorite of the web 2.0 homepages that I’ve played around with, and your portlets example does a great job of matching its flexible display options. Excellent write-up, too. Oh yeah, and thanks for the link to learningjquery.com.
#13 Nathan Smith

Karl: Thanks, I appreciate it. Also, you’re welcome for the link to the Learning jQuery site. Keep those tutorials rollin’ out, because they have certainly been interesting and beneficial to me, and I’m sure to others as well.

Comments closed after 2 weeks.

Journal

jQuery Portlets

Discussion + Dissension

FYI

Ads by Fusion

Latest Posts: All - RSS

My Book