I'm a designer, developer, producer, husband and father-to-be.

A Sprinkling of jQuery

Published on 30 June, 2008 | | Comments (0)

Posted In: This Site, jQuery, javaScript

Learning jQuery - Learning jQuery by Jonathan Chaffer and Karl Swedberg

I’ve finally taken some time and sat down to learn jQuery, and I have to say I think it’s fantastic. It makes javaScript fun and takes all the donkey work out of manipulating the DOM using dozens of lines of code.

I picked up a copy of Learning jQuery by Jonathan Chaffer and Karl Swedberg and it is definately a good book to have in my library. It’s split up into 5 sections to start with:

  • Selectors
  • Events
  • Effects
  • DOM Manipulation
  • Ajax

Which give you a firm understanding of the core functions of jQuery. It then moves on to give you several scenarios were these functions could be used.

I would say if you’ve never used javaScript before then this book is good for a beginner although, as you would expect it is purely focused on the jQuery framework. If you are wanting to learn javaScript in general I would recommend reading Dom Scripting by Jeremy Keith as a good starting point then possibly moving on to more advanced books to get into the real hardcore stuff. Also learning some core javaScript first will make you appreciate how much easier your life becomes when using jQuery.

To be honest once I’d worked my way through the tutorials on the jQuery website and given that I'm not bad a javaScript anyway, I was using the Learning jQuery book as more of a syntax reference than anything else.

So were have I implemented it?

Well I haven’t done anything innovative, I’ve merely added a few "enhancements" to Havoc Inspired.

Search Field

The trusty old, "Search" text in the search field to the left. Loads of sites do this, click in, the text disappears click out the text reappears. Magic!

Replaced Lightbox with Thickbox

Thickbox is the jQuery version of Lightbox. I actually really like Lightbox and was considering not replacing it. However I didn’t want to have the prototype and scriptaculous libraries running alongside jQuery purely for Lightbox when a jQuery equivalent is available. So any image with a magnifying glass image next to it, fires off Thickbox.

The magnifying glass image is also added by jQuery by the way.

Comments Link

Clicking the comments link in the meta data at the top of a blog will nicely slide you down to the start of the comments (if anyone ever leaves any :-( ) at the bottom of the page. I did this as a usability enhancement really. To alleviate the sudden disorientation that can be felt from jumping to another point on the page. Arguably people expect comments to be at the bottom of the page on most sites, but I think it’s nice to see were your going when you click a link like that.

Ajax Comments and Preview

The biggest jQuery addition I’ve made to this site is with comments. The comments form now validates live using the jQuery validation plugin. As you can see there is also a Preview block so you can see what your comment will look like when submitted and when you actually submit a comment, the form does so via Ajax, so no page refresh!

I have to say the "enhanced" comments form is what I’m pleased with the most and was a perfect way to get stuck into jQuery.

Hope you like the "enhancements", I'm sure I'll be adding some more in the near future and feel free to pass on any feedback.

0 Comments

Leave A Comment
  • * required field

A List Apart's 2008 Survery

I have the pleasure of being the Producer of:

boagworld

The worlds longest running web design podcast.

Quotes

Dream as if you'll live forever, live as if you'll die today. - James Dean

Tech Read

(Book) Learning jQueryA great reference book for learning jQuery, broken into sensible chapters focused on jQuery's core functions.

See Others

Leisure Listen

(Book) Time's EyeBook 1 of A Time Odyssey, Arthur C. Clarke's final trilogy before passing away. Time's Eye is an interesting idea, but not his strongest novel unfortunately.

See Others

© 2005 - 2008 Havoc Inspired, Ryan Taylor

RSS | xHTML | CSS