jQuery Tools 101: Nested Tabs

jQuery Tools is the new kid on the block when it comes to jQuery-based user interface libraries. What it offers is a solid foundation of widgets at an extremely small file size (5.8 KB minified).

I decided to ditch jQuery UI on a recent project when I couldn’t get tabs & accordions to play nice together (also, their site was down when I needed it so I took that as a sign). This was a great opportunity to try jQuery Tools and I have been very impressed thus far.

To use the minimal tabs interface you can simply follow the instructions on their site, but if you want to nest tabs inside one another you’ll need to change things slightly. I’ll demonstrate below:
Read the rest of this entry »

jQuery – Open External Links In New Window/Tab

The common technique to force links to open a new window or tab is to add a “target” attribute like so:

<a href="http://hulu.com" target="_blank">check it out</a>

This works just fine but is not actually valid markup. Fortunately, we can use jQuery to add the target attribute so it doesn’t muck up the HTML.

$(document).ready(function() {
  $('a[rel="external"]').click(function(){
    $(this).attr('target','_blank');
  });
});

Change that invalid link to look like this instead:

<a href="http://hulu.com" rel="external">check it out</a>

Now the link forces browsers to open a new window/tab and the markup is still valid. Easy cheesy.

jQuery – Set Mouse Focus On Page Load

First Input:

$(document).ready(function() {
  $('input:text:first').focus();
});

First Empty Input:

$(document).ready(function() {
  $('input:text[value=""]:first').focus();
});

Great jQuery Reference

I don’t usually post links on this blog unless they accompany a tutorial, but this reference is so good I can’t help but throw it up here for others. Yes, I am linking to a list of links. How meta of me

If you are writing any jQuery whatsoever and want to polish your skills, check this:

The Complete Guide For you to Become an Almighty jQuery Developer

jQuery Wizard Redux

I was interested in creating a step-by-step form wizard for a Rails app I’ve been working on, so naturally I began searching for a jQuery plugin or tutorial. The best thing I could find was a ‘plugin’ written back in June of 2007 on this blog.

The demo was quite attractive so I immediately began trying to work this implementation into my app. Upon reviewing the source code, I became a little less excited because the markup and styling left a lot to be desired. So instead of just complaining about it in the comments of the blog post (as had become my unfortunate custom), I figured I’d just re-write the thang until I was happy with it.

A few of my redesign goals:

• Eliminate redundant step titles and descriptions
• Remove unneeded styles from Cody Lindley’s CSS step menu
• More jQuery, less HTML
• Use valid markup
• Reduce LOC dramatically
• Comment code well to increase learning/understanding potential

So How’d it turn out? I validated the markup, removed all redundancy, reduced the HTML required from 84 to 21 LOC, the CSS from 191 to 108, and made the JavaScript unobtrusive. As far as the commenting and quality of the JavaScript used, I’ll leave that for you to judge.

To see the wizard in action, follow this link.
You can also download all the source files as a zip or tarball.

Feel free to give suggestions in the comments section. Or do as I did and modify my version to make it even better!