An amazing new jQuery resource has just arrived: 15 Days of jQuery. It’s a new site run by Jack Born, devoted to providing simple tutorials for getting you started using jQuery. Jack created this site after using jQuery in his projects:

I consider [jQuery] the Swiss Army knife of Javascript – it’s small, versatile, and has almost zero learning curve… If you’re not a black belt in advanced javascript code by the end of these tutorials then you get 110% of your money back.

So far he has four tutorials up for you to browse but he’s planning on going up to the whole 15, during these next two weeks. After that, Jack is going to continue exploring and making posts – so you should subscribe now while it’s still young!

This is absolutely a phenomenal resource for anyone new to jQuery, or Javascript programming. I especially liked the Zebra Striping tutorial, it walks you through how to perform a common activity easily and simply with jQuery.

Simple Challenge: Find all the LI elements underneath two different elements (using their #ID as reference) and bind a click handler which changes the color of the LI’s text. Here is how you would do that in all of the popular event/selector libraries.

Behaviour + Prototype

Behaviour.register({
  '#item li': function(element) {
    Event.observe(element, 'click', function(event) {
      Event.element(element).setStyle({color: '#c00'});
    });
  },
    
  '#otheritem li': function(element) {
    Event.observe(element, 'click', function(event) {
      Event.element(element).setStyle({color: '#c00'});
    });
  }
});

Prototype 1.5.0

$$('#item li, #otheritem li').each(function(li){
  Event.observe(li, 'click', function(event) {
    Event.element(li).setStyle({color: '#c00'});
  });
});

event:Selectors

EventSelectors.start({
  '#item li:click, #otheritem li:click': function(){
    this.setStyle({'color': '#c00'});
  }
});

jQuery

$("#item li, #otheritem li").click(function(){
  $(this).css('color', '#c00');
});

I like to think that the code speaks for itself, as to which one is the easiest to use and understand. I find it interesting how Prototype is migrating closer to what jQuery has now – while jQuery itself is blasting away with some very cool new stuff. Definitely keep your eyes peeled for new releases, as they’ll be coming soon.

Recently Plazes (a popular geolocation web application) put up a redesign of their service. If you take a peek at how it’s doing it’s cool effects, underneath the hood, you’ll see that it’s making good use of jQuery.

The best place to see it in action is on the Plazes People page. The purpose of the page is to allow you to browse around and see what other people are connected and where they’re currently located. This page has a number of cool features that you can play around with:

• Try moving/zooming the map – the list of people on the left-hand side of the screen will dynamically change and reload.
• In the input box at the top of the map, enter in part of a city name and it will auto-complete it with the most relevant name.
• Clicking a user in the left-hand menu will take you to where they’re located on the map.

All in all, it’s a great example of what’s possible with jQuery, Google Maps, and a great dev team to tie it all together.

Joe Hewitt is working on updating his excellent Firebug Firefox extension. If you’re not familiar with it, you should be. It provides detailed per-page error tracking, XMLHTTPRequest tracking, DOM Navigation – everything that a Javascript developer needs.

The new version of Firebug is adding one more feature: Javascript debugging. This will allow you to set break points in your code, pause the application, restart it, and all sorts of cool stuff. If this sounds interesting to you, you should contact Joe, as he needs testers to help him get this off the ground.

Cody Lindley just released a brand new version of Lightbox/Greybox called Thickbox. This release offers some great, added, functionality over the other libraries. Specifically, this release is completely unobtrusive – it uses the natural href, src, and title attributes to seed the box, when it pops up. Even if you don’t have Javascript enabled, it still behaves naturally. It is also capable of dynamically loading blocks of html and displaying it in the overlay. In all, it’s a great release, not the least of which is the fact that it uses jQuery to pull it all together. So check it out, play with it, and let Cody know what you think of it!

Jeffery Chiang recently submitted an excellent visual representation of the jQuery library, to the jQuery mailing list. It shows all the different plugins and what methods/features they support (borrowed from the jQuery Documentation). Similar diagrams have been done for the Prototype library – but none of them have the cool Devo hat of jQuery to go along with it. If anyone is feeling adventurous, using the styles of this map would make for an awesome redesign of the documentation page.

Audun Wilhelmsen (skyfex), a jQuery user who lives in Norway, recently attended The Gathering, one of the largest computer events in the world. While there, he competed in an Opera-sponsored widget development contest. The new Opera 9 Beta has a whole widget framework, that’s sure to challenge Yahoo! Widgets and OSX Dashboard.

Once the final analysis was done by the judges, they decided that Audun was the winner. Not only is this great news for him (he won a $6000 mega gaming machine), but it just goes to show how effective jQuery is for fast Javascript development.

Audun’s winning application is called KnowledgeMate. You enter your search into a single field, and it searches a number of search engines simultaneously (including image search engines), and returns the relevant results. It’s very fast, looks sharp, and is quite handy. I definitely recommend downloading the new Opera beta to give this widget a try, if for nothing else. Congrats Audun!

This is the total amount of fixes and new features that have come out in the past week, or so. I’ll be adding more info concerning them to the docs very soon.

New Demo:

• Accordian Open/Close – Toggle open/close a number of entries at once!

New Features:

• empty() – you can remove all child nodes of an element.

  // Deletes the contents of all DIV elements
  $("div").empty();

• is(Expression) – tests to see if the matched elements matches that expression. Is equivalent to: $().filter(Expression).size() > 0.

  // Tests to see if a DIV has a class of test
  if ( $("div").is(".test") ) {
    alert( "test div found!" );
  }

• html() – If you provide no parameter to the html() method it will return the innerHTML of the first element.

  // Copy the HTML contents into a Textarea
  $("textarea").val( $("#block").html() );

• val() – Same as the html() method, but for the value parameter (if an argument is provided, it sets the value, no parameter – returns the first value).

  // Copy a value from one input to another
  $("input#hidden").val( $("input#name").val() );

• $.postXML() and $.getXML – For the AJAX plugin, same as $.post() and $.get(), but forcefully try to get the returned XML, regardless of the Content-Type.

  // Get the XML contents of a file
  $.getXML("file.xml",function(xml){
    $(xml).find("title") // ...
  });

• A new ‘normal’ speed (400ms) for animations was added.

  // Slide a DIV in at normal speed
  $("div").slideDown("normal");

• Setting an onComplete handler for animations is much easier now.

  $("div").show("slow",function(){
    alert("all done!");
  });

Bug Fixes:

• Opera and the AJAX plugin now play nicely together.
• A problem with appending text nodes was resolved.
• Handling for IE and the AJAX plugin was optomized.
• A problem with #id expressions retreiving by tag was fixed.
• A fix for removing classes that have dashes in them was implemented.
• A bug with binding events to dynamically created HTML was fixed.
• A bug with show() not revealing elements that have a display of none, by default, was fixed.
• Another Prototype 1.3 and jQuery bug was resolved.
• The mangling of the overflow attribute, by the animations, was resolved.
• and finally: The infamous height/width auto animation bug has been resolved!

Mark Panay has written a follow up to JQuery for Web Designers. This time he emphasizes keeping content brief and using jQuery to reveal the full body of blog posts and articles. This is very similar to a technique that I have been using in my latest project, Ouioo.

Also, Mark has launched a new music start-up whose web site makes use of jQuery fx and AJAX. To quote Mark:

[jQuery] replaces, the “behaviour, prototype and AHAH” scripts there before, thus saving me about 150k… :) and making the code cleaner and easier to modify. Only took 30 mins as well.

Finally, Frank Quednau has released a blog post and a jQuery querying demo. If you’re curious as to what exactly jQuery is capable of querying – this makes for a good sandbox to go in and play around with things.

The new AJAX plugin for jQuery is ready – and if you’re running off of the latest code, it’s already rolled in. Along with that, there are a few new effects to be enjoyed: fadeIn, fadeOut, and center. I’ve also squished a number of bugs, which have gone into this release too:

• A problem with using the $(…,Context) argument, with non-HTML documents has been resolved.
• It’s now possible to pass in a jQuery object as a context: $(“title”,$(“head”));
• A problem with attributes not resolving properly in IE has been fixed.
• Another issue with toggling inline elements has been fixed.

The next release is going to be focusing on additional helper methods to make it easier to navigate documents (and rely less on cryptic XPath sequences) along with methods to avoid continuous .get(0) use. If you’d like to discuss jQuery’s development, please join us in the mailing list or in the irc channel.