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!

Mark Panay made a good post today explaining the benefits of using jQuery, for web designers. Specifically, how a designer can benefit from using jQuery to circumvent CSS features that aren’t implemented in browsers, yet. Keep your extraneous markup tucked away as unobtrusive Javascript is always a smart move.

Another CSS/Javascript article is making the rounds today called: Width-Based Layout. The premise is that the page auto-resizes the width based upon how wide your browser is. Included with the post is a 38 line piece of Javascript (and I’m being generous) to get the job done. I’m going to save you the break-down of their code, and just show you the improved code, below.

$(window).resize(setWidth);
$(document).ready(setWidth);

function setWidth() {
  var de = document.documentElement;
  var w = (window.innerWidth || (de && de.clientWidth)
    || document.body.clientWidth) < 990 ?"alt":"main";
  $("#wrapper").addClass( w + "wrapper" );
}

A live demo of this new code can be found here. Ironically, they're using a piece of code that I wrote, but didn't credit me for.

Definitely my favorite part about the above code is the short-circuiting that I have going on. The original code, for that portion, is from this evolt article. I don't know what it is, but everytime I see an IF statement with multiple assignments, it just makes my skin crawl. So, the following:

if (window.innerWidth)
{
	theWidth = window.innerWidth
}
else if (document.documentElement 
  && document.documentElement.clientWidth)
{
	theWidth = document.documentElement.clientWidth
}
else if (document.body)
{
	theWidth = document.body.clientWidth
}

Gets changed to:

var de = document.documentElement;
var w = window.innerWidth || (de && de.clientWidth)
  || document.body.clientWidth;

If you're curious as to why this works, try running the following statements:

alert(1||0); // You get 1
alert(0||2); // You get 2
alert(0||(2&&1)); // You get 1
alert(0||(3&&4)||2); // You get 4

And you'll have a better feeling as to what is actually happening in that (previously) very-verbose piece of code.

Cody Lindley contacted me today to let me know about his views on jQuery – and a new jQuery demo page. If you’re looking for more examples of what jQuery code looks like, and some of the neat effects that it can do, you should definitely check it out. I’ve added a link to his page onto the jQuery Demo page.

I’ve been digging through my referrer logs and Technorati to see who’s talking about jQuery. Today I ran across someone who wrote a quick tutorial on how to use jQuery. The tutorial, itself, is rather new (e.g. nothing immediately borrowed from the docs) – so if you’re looking for some more sample code, in addition to the current tutorial, this is another place to look.

I ran across a post on the DOM Scripting blog, the other day, and saw a great opportunity to demo the brevity of jQuery, observe:

Old DOM Way:

function appendInputTypeClasses() {
  if ( !document.getElementsByTagName ) return;
  var inputs = document.getElementsByTagName('input');
  var inputLen = inputs.length;
  for ( i=0; i < inputLen; i++ ) {
    if ( inputs[i].getAttribute('type') ) {
      inputs[i].className += ' '+
        inputs[i].getAttribute('type');
    }
  }
}

New jQuery Way:

$("input").each(function(){
   $(this).addClass(this.type);
});

I'm even considering implementing a new way of circumventing the each() function, observe:

$("input").addClass("{type}");

You really can't get much shorter than that, when it comes to Javascript code. I have quite a few more "old" DOM scripting examples that I'll be posting/improving in the next couple days.

Per the request of Mark (and many others) there is now an official jQuery mailing list. I did some simple testing to make sure that it worked properly, and it seems to be fairing well, so far. Let me know if you spot any bugs signing up or posting messages. Feel free to keep questions or discussions to the list and continue to send support requests directly to me.