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

This entry was posted on Monday, February 9th, 2009 and is filed under Case Study, Development, jQuery. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.