If you’ve been living under a shell for the past, I dunno 5 years – WordPress is an open source blog posting application. With the advent of version 2.7, the admin section got a great makeover with functionality plus usability enhancements by the bucket load. In this article I will describe where WordPress is using jQuery and the plugins involved.

Thickbox

The first plugin I would like to talk about is Thickbox. Thickbox is a modal window plugin bringing focus to a seemingly popped up window or photo within a page, and removing focus from the page behind it. The most obvious example of this is the “Add Media” functionality within the Add/Edit posts section. What’s great about this implementation is the fact that all your uploading, attribute setting and inserting functionality is handled in one thickbox modal window, no page refreshes. Once complete, the window closes and your blog post has been updated with the new media inserted, again without a page refresh. Thank you ajax!

Thickbox can also be seen in use within WordPress when previewing plugin information, or previewing a new theme before you activate it. Again, ajaxified to the hilt for ultimate usability. Good work guys!

hoverIntent

HoverIntent  is quite a good plugin actually, it simply tries to guess the user’s intent on where they are trying to hover and initiating a callback, rather than the built in javascript hover function which initiates a callback instantly. It does this by waiting for the mouse pointer to slow down and assumes “Right, this is the place I need to run my callback!”.

To see it in action, hover over the “New Post” dropdown at the top of the admin page. A better demo however is on the hoverIntent download page which shows you why it’s powerful.

jQuery.color

Next up, we have the jQuery.color plugin which enables you to animate between colors using jQuery. Think transitioning from red to yellow for example. You can see this in action when you hit the “Approve” button on a comment – you will see the background color transition from yellow to white. Lovely!

Whilst we talk about the comments editing page, functionality such as “Quick Edit” is also powered by jQuery events and load animations, as well as integrating ajax calls for a seamless experience.

jQuery UI

If you don’t know what jQuery UI is, its a library that sits on top of jQuery enabling advanced animations and effects. WordPress is using a number of jQuery UI effects in various places which I’ll show you below:

Resizeable

Resizeable does what it says on the tin – it will resize an element based on interaction from the user. A typical example is expanding the size of a box object like the image above. This is being used within the New/Edit Post page enabling you to resize the edit window for your blog post.

Sortable

Sortable is another effect which easily allows the user to perform drag/drop actions on elements to re-sort them. The most obvious demo of this is on the Admin homepage, where you can move the various “portlets” around the page, rearranging them to a view that you prefer. WordPress obviously have to go one step further though and save the new portlet positions to the database so that they are in the same position every time.

Sidebar

The Admin sidebar is another jQuery controlled element. The minimizing and maximizing control as well as the show/hide menu items is all handled. See the postbox.js file for more on this…

HotKeys

HotKeys is a plugin which enables you to register key combinations like CTRL+B or whatever in order to carry out functionality. The most obvious example of this is CTRL+B or CMD+B for Apple to make highlighted text bold. Dead easy to implement, and great from a usability perspective.

Conclusion

That’s it for this article. I hope you enjoyed it, and feel free to give your comments and feedback below on WordPress’s implementation of jQuery, and where you could see improvements.

Resources to help you learn:

Learning jQuery	JQuery In Action	jQuery Reference Guide

If you haven’t heard of Boxee, it’s a piece of software that enables you to manage your images, music and video files on your computer, whilst integrating with social networks and the web to bring in reviews about your content, and allowing you to shout out to the likes of Twitter about the stuff you’re into. Whilst the app is cool, we’re interested in the website, and their use of jQuery – so let’s check it out!

BlockUI

The main jQuery plugin that Boxee.tv is using is BlockUI. The key point to BlockUI is simple, it stops user interaction with your web application whilst your code is simulating synchronous ajax calls. Why do you need this? Well, if you don’t use it, the browser becomes locked whilst the ajax calls happen, and that’s not a good user experience.

BlockUI works by bringing modal windows up front to the user whilst behind the scenes, the neat stuff is happening. Boxee utilise this in many ways:

• When validating new user accounts
• Recovering Passwords



• When updating your account preferences
• When adding friends
• General user feedback

BlockUI is extremely flexible, and also includes some great documentation. Their demo page is also a great place to go to see how you can utilise this plugin…

Corner Plugin

For UI lovelyness, Boxee.tv has opted for the Corner Plugin. The plugin is very simple, it allows you to give custom corners to DIV elements, such as rounded, or notched. There are loads to choose from, and implementation is dead simple.

Autocomplete

Jörn Zaefferer’s Autocomplete plugin isn’t working in Boxee.tv as far as I can tell, however it is included in their “Find Friends” page. I assume when typing in friends names, live matches would appear, but it either doesn’t work for me, or is not fully implemented. To be clear, the plugin does work for me elsewhere, just not on Boxee.tv.

Other Plugins

Boxee.tv are also using the Dimensions plugin which gives you greater flexibility and cross browser compatibility for element positioning and obviously, dimensions . Dimensions is now included as part of the jQuery core, so no need to download it as a plugin. Just get the latest version of jQuery.

BGIframe is also being used to “ease the pain” of IE CSS z-index issues.

General Stuff

So what else? The guys at Boxee.tv are using alot of jQuery CSS property setting code – for example:

$('.field').blur(function()
{
this.style.backgroundImage = '';
this.style.backgroundColor = '#ffffff';
})

They’re also registering various .click() events for their BlockUI modal windows. Nothing too much to talk about there really!

Conclusion

I hope you found this short article a nice insight on how these guys are using jQuery. I hope to add more as we go along, so feel free to suggest any that you’d be interested in seeing by leaving me a comment.

Some books to help you learn:

Learning jQuery	JQuery In Action	jQuery Reference Guide

Some bigger news to come out last week other than the inauguration of President Obama was that the new White House.gov website uses jQuery! Below is a deeper a look into how they’re using it, and what plugins they are using so that you can use them too!

Navigation

The White House has employed the Superfish jQuery plugin to achieve their nice hover over navigational elements. From their website: “Superfish is an enhanced Suckerfish-style menu jQuery plugin that takes an existing pure CSS drop-down menu”.

jQuery Carousel

Next up we have a nice implementation of a jQuery carousel and slideshow on the White House’s “Presidents” page. They’ve got a great navigation going here, allowing you to navigate through via the carousel, the main image, or just watch it auto play through a slideshow. Very cool. They’ve also got hotkeys registered, so cursor arrows can also be used.

White House.org are using the jCarousel plugin to achieve the carousel effects. They have integrated that with the javascript Galleria plugin which handles the slideshow elements. Discussions on integrating the two can be found here which the White House developers seem to have taken into consideration.

jQuery Slideshow

Next is the White House homepage. A simple slideshow implementation again which fades 4 pieces of information in and out with accompanying pictures. This piece of functionality is utilizing the jQuery Cycle plugin.

Utilities

The White House.org site is using a few add-ons to help fix cross-browser compatibility and enhance basic javascript functionality. First up its using a nicely documented fix by Benjamin Michael Novakovic for animations with ClearType in IE – although it doesn’t credit him.

As part of the slideshow elements, they are also extending the jQuery functionality to include built in timers. Again uncredited, but actually using the jQuery Every timer functionality.

They’re also using the jQueryUI library.

Finally – what they’re not using

Unless hidden somewhere, The White House are including the Thickbox plugin however not using it at this time – assumingly for future content, or content that is no longer required. They’re also still using jQuery 1.2.6 which has since been superseded by the new jQuery 1.3.1 at time of going to press.

Hope you found this insightful… Comments welcome!

Some books to help you learn:

Learning jQuery	JQuery In Action	jQuery Reference Guide