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.

It hasn’t been mentioned here yet but the jQuery IRC channel is pretty happenin’ – there’s at least a couple of us in there at all times. We’ve been busy hunting down bugs and I’ve been busy fixing them, here’s a quick run down of what’s been fixed in the past couple days:

• hide()/show() operations now work consistently in all browsers, even for weird use cases.
• A number of Prototype 1.3 + jQuery and Prototype 1.4 + jQuery bugs have been handled, there should be no problems using Prototype and any of the extra modules now.
• Problems with the .toggle() method not restoring display: inline properly.
• document.ready() can now be called multiple times – all functions are added to a queue.
• Weird browser-specific attributes are auto-corrected (like for=htmlFor, class=className, and float=cssFloat).

What is there to look forward to this weekend? A lot. An AJAX module has been in Alpha testing and is ready to see some action, along with some new effects (fadeIn/fadeOut), new selector methods (.ancestor(), .siblings(), etc.), and a bunch of helper methods (.text(), .value(), .visible(), etc.). If you want to see something explored in particular, feel free to drop me an email or visit the mailing list.

Today’s DHTML trick is a smooth example of Image Cross Fading. The Javascript code for the whole page is rather short to begin with, but there was some rom for improvement. If you were to look at the original source file, just about everything except for the variable declarations and the so_xfade method can be reduced to this snippet, using jQuery:

$(document).ready(function(){
  $("head").append("<link href='xfade2.css' \
    rel='stylesheet' type='text/css'>");
  img = $("#imageContainer img").set("xOpacity",0).get();
  $("#imageContainer img:first").set("xOpacity",0.99).show();
  setTimeout(so_xfade,1000);
});

Currently, there doesn’t seem to be a more elegant way of doing it in jQuery, but I can’t really complain, considering how much more understandable the code is, compared to doing it the DOM way.

Another popular DOM/CSS/Javascript project popped up today: Greybox. It’s a lot like the popular lightbox, but is used to display web sites on top of your current page.

I saw this as another great opportunity to demonstrate how easy it is to make great code with jQuery. I modified greybox in two phases.

1. First step was to make greybox work unobtrusively (they embeded javascript into the page to make it work) and to fix the broken back-button (you’d have to hit back twice after visiting a site).
2. The next step was to completely overhaul the library itself and remove the need for Amir’s personal Javascript library – leaving it to run completely using jQuery. The resulting code is only about 1.2kb (compared to the original 12kb of the original).

A demo and a download are available if you’re interested in seeing some more examples of how jQuery works in a practical application. Enjoy!