jquery

Just wanted to post this quick trick I’ve been using lately to automagically hide/show useful default text field values (e.g. “Search” in the search box) using jQuery and the ultra-handy Drupal.settings() object.

Here’s the short and sweet copy/pastable jQuery code:

Basically this quick snippit will add a blank array object (ahh, the joys of moving between js and PHP) to the Drupal.settings object — which is useful for all sorts of great javascript functionality, and is integral to Drupal 6.0’s extended AHAH features; if you don’t already know it, do your self a favor and study up — and automatically fill it with any textarea’s default values when a user clicks/tabs it into focus. This lets us clear the default value, but replace it quickly if the user moves on to another element.

As listed, you probably don’t want this on your site, as it will affect things like editing nodes (e.g. title inputs will go blank when you click on them… not what you necessarily want), but it’s easy to tune this to only hit elments within certain forms since every form in Drupal has a unique #id.

Thinking about this, I decided to tune it up and actually make an extended jQuery function for this so it could be more easily applied to speecific elements like so:

This is a pretty nice little plugin, I think, and it shows just how easy it can be to add nice/reusable UI functionality. Happy Drupaling, and go get ‘em jQuery!

(updated w/slight improvement to jQuery fn)
(updated again w/object style improvements from comments)

I (heart) jQuery. The “write less, do more” library has turned me from a javascript hater into a true-believer over the past six months. Not only does it obliterate the pain of cross-browser compatibility issues, it’s also so dang elegant and smooth, it makes JS downright fun to work with.

For instance, tonight I had to come up with a way to show a series of images, like a slideshow, with a loop. Basically you run through a list — seeing one item at a time — and when you reach the end you see the first item again. There are probably ten or a hundred slideshow applications out there that implement this functionality, but I thought I’d post the short, sweet snippit for the world to make use of:

Basically you have a list that’s got the class “myclass”, and then a link with the class “mylink” which click-iterates through the list. If you want to spice it up with some fades or other special effects, it’s pretty easy to see how.

This snippit works thanks to jQuery including a nice size() method, and supporting the awesomeness that are CSS3 Selectors. It’s hot stuff, and it works, and the applications are endless.

Enjoy!

A couple days back Drupal 5.0 was released and I spent a couple hours this afternoon porting this website (chapterthreellc.com) over to the new code. The migration was pretty straightforward and all of the modules and other functionality we use for this site has already been upgraded to work with 5.0.

This latest release is huge for Drupal as we talked about earlier and has a lot of new and punchy features (check the screencast here). One of the most important features, in my view, is the inclusion of the powerful JQuery and extensible AJAX library. There are lots of wonderful possibilities using lightweight and easy to use AJAX in Drupal.

A good example of the power of JQuery to bring a little more functionality to a website can be seen in the “comment preview” functionality of our blog - adapted from a technique on a wonderful JQuery blog. As we have mentioned, we are strong believers in HTML Literacy and providing users with a live preview of their comment as they type helps to teach and reinforce the learning and use of HTML tags. The JQuery code is pretty straightforward and works on all Drupal comment pages and can be made to work on a lot of other pages by modifying the CSS ID tag (#edit-comment) to another textarea that needs live previewing.