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!
 Learning jQuery  |
 JQuery In Action  |
 jQuery Reference Guide  |
Similar Articles:
Case Study: How Boxee.tv uses jQuery
Case Study: How WordPress uses jQuery
Using jQuery for great user feedback
Top 10 jQuery plugins for Form Usability
Top 10 jQuery Image Plugins
Tags: Case Study, jQuery
Can you tell me how I can implement a navigation system just like the one at whitehouse.gov? I love the multiple options nicely arranged in columns for the dropdowns. I like the fact that a drop down menu has multiple links so there is no need to go from one dropdown menu then the other to the next to get to the final item you want to go to. Displaying all your links on a single drop down menu makes easier for visitors to directly go to any given page without navigating through multiple menus. Your help will be appreciate and this was a great post.
Great article. Thanks for the link back too
They’re using thickbox on the “You’re Leaving Whitehouse.gov” messages….click a link on http://www.whitehouse.gov/our_government/resources/
Great article, I find it very interesting to see how jQuery is being used in real world examples. And the way you’ve broken down which plugins etc are being used, and linking to them is extremely helpful.
Keep it up, hope you can demonstrate more great jQuery sites!
Hi,
This is Lovely. I like this site very much. Really great article.
Thickbox is used for external links — take a look at the site footer, and click on usa.gov.
I like your analysis and mannner of speaking, thank you for this interesting ticcket, it s always nice to visit this beautiful blog
Great stuff. I have been browsing around and I enjoyed it. Selah.
Nice. I was wondering what was behind the new look of the white house web.
“Good article. I thought to let you know that ur website looks a bit messed up in the iCab 3 web browser.”
Not being a tech guru some of this is over my head, but none-the-less I am trying to explore how to better use plug-ins for a corporate blog of mine. When you talked about the plug-ins being used doesn’t it matter on what format it is being used on? I mean can all these plug-ins be used for WordPress Blogs??? Excuse the ignorance but if someone knows what I am saying please educate me on which plug-ins can be used where???
круто круто!
Hey I found your page by mistake on yahoo while searching for something totally unrelated but I am truly glad that I did, You have just snagged yourself another subscriber.
Hey, I found this blog post while searching for help with JavaScript. I’ve recently changed browsers from Opera to Firefox 3.2. Just recently I seem to have a issue with loading JavaScript. Everytime I go on a page that requires Javascript, my browser does not load and I get a “runtime error javascript.JSException: Unknown name”. I can’t seem to find out how to fix the problem. Any help is greatly appreciated! Thanks
прикольно!)
I love this blog. Thanks for the great information. I have it bookmarked and will be back. If anybody needs creating new credit file don’t hesitate to come on over.
cool cool!
В целом я согласен с автором поста, но есть некоторые факторы , которые не расскрыты: 1. такое впечатление (может оно ложное) что автор совершенно не принимает к сердцу то, о чем говорит 2. как было сказано выше тема не расскрыта до конца и много темных моментов 3. нужность в жизни даннойи темы, (можно судить по комментам) Если сравнивать например с сайтом http://voyagerclub.ru , то мне кажется что там сайт больше для людей
very cool, hoping to be president someday….hahaha
Just thinking if i would have been a president one day and i would have handled this issue!
Just thinking if i would have been a president one day and i would have handled this issue!