Image Cross Fade

Posted on by

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:

  $("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();

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.

Greybox Redux

Posted on by

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!

jQuery for Designers

Posted on by

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.

Width-Based Layout

Posted on by

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.


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.

Mini Tutorial

Posted on by

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.

Easy Input CSS Rules

Posted on by

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 += ' '+

New jQuery Way:


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


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.

More Documentation

Posted on by

I’ve just finished writing up some more documentation, to help everyone who’s learning how to use jQuery. I’d like to thank Bruno for helping me sort out all the Prototype/jQuery weirdness and Derek for looking at the selector differences.

  • jQuery Base Module. I wrote up how exactly the $() function works and broke up the documentation for all the individual function-types into separate pages.
  • jQuery Selectors. One of the most important parts of jQuery is its ability to quickly select different HTML elements. This page shows how this works and how CSS and XPath can play nicely together.
  • Using CSS with jQuery. This page details the similarities and differences between the CSS 1-3 specifications and how they’re implemented in jQuery.
  • Using XPath with jQuery. An explanation of what basic aspects of XPath are supported, on top of CSS.
  • Custom Selectors. A number of custom selectors were introduced, that weren’t readily available in either CSS or XPath.
  • Using Prototype and jQuery. Finally, detailed documentation on how jQuery works when used with Prototype, what to be careful of, and what to look out for.

My next big step with jQuery is to tune up some of the code, for speed and clarity, (thanks Tim!), write a couple new plugins, and create the new plugin repository for developers to use. All of these should be coming out within the next couple days/weeks.

First jQuery Plugin

Posted on by

Michael Geary contacted me today to let me know that he’s finished the first third-party jQuery plugin. His particular plugin loads in a remote JSON file, which can then be manipulated further. The chaining of this particular request doesn’t serve many benefits, but this is still something that I’m exploring further (maybe jQuery can support JSON-traversing, along with DOM?).

His code reminds me of a templating/JSON plugin that Jordan and I started developing at BarCampNYC, which allows you to import external templating code. I’ll have more details on this plugin soon (and more details on an AJAX plugin that I’m developing, per the requests of a lot of people).

I’m planning on opening up a plugin repository soon, so that plugin authors can submit their code, have an area for documentation and comments, and allow for patches. More details on this, soon.