jQuery tinkering

If you take a look at my website portfolio and read the details, you’ll see that I’ve been all over the place as far as technologies go. HTML, JavaScript, CSS, PHP, Drupal, Wordpress, AJAX, etc. Some things aren’t mentioned on there that probably should be (Like the Faster Mustache Racetracker which used a lot of YUI, Google Maps, and KML things), and some things that I’ve done for various work things aren’t on here, but theres been a lot of YUI over the past 6 months.

For the last year or so, I’ve been hearing a bit about jQuery but never really looked into it until Gallery decided that it would be the JavaScript toolkit in Gallery 3. Whatever I tried to do first with it was a complete failure, but in the relatively small amount of time I’ve been playing with it, I’ve figured out some pretty neat things and realized how truly easy it is to use jQuery instead of YUI (or even just basic JavaScript) for a lot of things.

The first example of jQuery I used on a production site it ithought’s new website. Creating browser-compatible drop-down menus used to be quite a bit of work with CSS and JavaScript that relied on csshover.htc for IE support, but it’s just a few lines of jQuery. Dynamically loading content used to require a lot of YUI code (see their example but it’s just a little simpler with jQuery:

$('#status').load('/status.php');

That’s it! That one line of jquery uses AJAX to grab /status.php off the server and load it into the div with the id “status”. Awesome. Several million lines of JavaScript (like I used for the original collegemedium.com which is no longer there), compressed to ~40 lines of YUI that I used on the FM Racetracker, all compressed down to 1 line of jQuery. That seemed pretty easy, so I researched around to figure out what else I could do.

My friend Kurt helped me out by doing all of the design work for www.ithought.org which launched in mid-December, so January was my turn to help him out with his new website: www.krautstache.com. Given that he’s a great designer and could use a spiffy website, and seeing how easy jQuery was to use, I set out implementing his design for his site, but added in a little extra. The hover actions on the front page are basic jQuery, the contact lightbox uses UI:Dialog, the slide animation between pages uses jFlow, the portfolio lightboxes use jQuery LightBox, and little bits and pieces of jQuery hold the rest of it together. Even though some of the lightbox code is a bit over my head (which prevented me from fine tuning a few things as I would have liked), it came together pretty well and he’s happy with it.

I’m already using jQuery for a project at work that previously would have been done in YUI, and it’s already coming together a lot faster than I’d expected, and I’ve found a few more plugins that is making this project look good and function effectively: dropshadow and quickSearch. If you’re building a website for anything, I highly recommend you give jQuery a look! Give it a few hours, and it will save you countless hours of time on the first project you use it on.