You Really Shouldn't Be Here jQuery, My Wife Might Begin To Suspect Something

Very cool!!! Been looking at this too and it seems to be great (especially for a JS n00b like myself). So, what *else* has Glenn been suggesting you look at? Always like to keep ahead of the curve . . . !

Ben,

JQuery is pretty fun for sure. I am amazed at what folks have accomplished with it...

For some interesting bits, have a go at http://interface.eyecon.ro/ .

Most especially, this demo http://interface.eyecon.ro/demos/cart.html showcasing a good number of JQuery plugins and effects in a sensible manner.

While it is no replacement for Flex, it is darned interesting to say the least.

DW

@Ben: Welcome aboard bud. I knew you'd get hooked and I'm really glad that Glen turned you on to this. :o)

@Peter: Glad to see another CF notable joing the fray!! Let me know if you have any questions and I'll be glad to help (rey {at} reybango {dot} com). Here are some links for you to checkout:

Query:
http://jquery.com/

The compressed JavaScript file:
http://jquery.com/src/jquery-1.1.1.pack.js

The uncompressed JavaScript file:
http://jquery.com/src/jquery-1.1.1.js

The full release notes:
http://jquery.com/blog/2007/01/22/jquery-111/

Plugins & UI Widgets/Controls:
http://docs.jquery.com/Plugins

Documentation:
http://docs.jquery.com/Main_Page
http://www.visualjquery.com/
http://jquery.bassistance.de/api-browser/

Magazine:
http://www.visualjquery.com/magazine/

Mailing List:
http://jquery.com/discuss/

Project Blog:
http://jquery.com/blog/

Learning Resources:
http://docs.jquery.com/Tutorials
http://www.learningjquery.com/
http://15daysofjquery.com/

Sites Using jQuery:
http://docs.jquery.com/Sites_Using_jQuery

Dan and Rey - many thanks for the links!!!

Ben,

interesting title for your post. I've been meaning to try jQuery but just got too many things I want to try and not enough time in the day. I've been using prototype and scriptaculous however. It's similar framework but probably does not have as many plug-ins. Anyway, for api docs check out http://www.gotapi.com/, it's pretty neat.

mootools is much better! ;) There are so many JavaScript frameworks out there though so you got a lot of other choices besides jQuery. I would have done prototype but I've found next to nothing on documentation. I've preferred mootools for that and also because its modular. I never have to worry about what files depend on one another, the download takes care of that for me.

I've never really felt comfortable with JavaScript but since I read DOM Scripting by Jeremy Keith I've found it to be very easy to work with. And with better debugging tools it only gets easier. Just nice to have a good framework to help keep the code light. What has really wowed me is how easy it is to do unobtrusive JavaScript. Before I always said I knew JavaScript but never actually did much coding in it. Now I'm much more comfortable.

Javier,

I have that exact same Dom Scripting book. It was very good and I liked how the author went layer by layer into a proper DOM scripting solution.

Very clear and easy to follow... I highly recommend it.

dw

Thanks for the backup Dan! I agree as its the best book out there on standard and unobtrusive JavaScript. Jeremy Keith is a great developer in the web standards community. His next book which comes out this month is Bulletproof Ajax. If you have Bulletproof Web Design (which you should otherwise I will be furious!) you'll know what to expect.

Now that does look cool...

Yet again, reading Ben's blog means I'll lose several hours of productive time while I play with a new toy.

(But as usual, it will save me many hours in the long run!)

welcome ben... we've been waiting for you.

@Javier: Que pasa Xavi? Had to ask you in Spanish since I'm Cuban. :o)

MooTools is definitely a great project and those guys are really top notch developers. I can't really agree that the library is better than jQuery because I do feel that jQuery has top notch code, incredible documentation, the best user community and one of the most comprehensive suites of plugins/UI widgets of any project.

I also ran the whole gamut of tools including moo.fx (predecessor to MooTools), Prototype/Scriptaculous, Dojo, MochiKit & YUI. I fell in love with jQuery from the moment I used it because of its simplistic syntax, chainability (which they started), as well as all of the goodness I mentioned above. I became such a fan that I was actually asked to joing the jQuery project team.

Since then, I've turned on ColdFusion notables such as Rob Gonda (Mr. AjaxCFC) & Joe Danziger (ajaxcf.com) to jQuery and Rob even refactored AjaxCFC to use jQuery instead of DWR.

It'd be really cool is you would take a look at jQuery yourself and see the power behind it. With your experience in MooTools, you should pick it up VERY easily and I think you'd be pleasantly surprised at its power. Ping me if you have any questions about it. AIM: gotcfm

@Dan: Yep, Dom Scripting is an awesome book and I'm about to pick up his new book, Bulletproof Ajax. As Javier mentioned, Dom Scripting is a must read and I'm sure his second book is right on par. Two other stand outs are Ajax In Action (Manning) and Beginning JavaScript with DOM Scripting and Ajax (Apress). The second is an incredible book to get you up to speed on JS & DOM and throws in some Ajax for good measure.

@Peter: My pleasure on the links. If you have any questions don't hesitate to contact me. I have the whole jQuery team at my disposal.

@Boyan: GotApi.com is awesome. We have the jQuery API on there as well. We also have these two resources for our API:

http://www.visualjquery.com/1.1.1.html
http://jquery.bassistance.de/api-browser/

@Seb: If you need some help, just buzz me man. I'm here to help

@Tony: Always glad to see you supporting the project man! We still have to get together for lunch. :o)

On a parting note, the fact that there's a growing number of CF experts using jQuery, in my mind, makes it a GREAT choice to work with. I know that there are many options but not as many with this much support for the ColdFusion community.

Ben,

doh! I was just writing a comment about the auto-links. You are always on top of it! Great job!

Hey Rey que pasa chei? Nice to meet you! Ben yes mootools of course has all the DOM selectors. In fact all the JavaScript frameworks do. They all do the same stuff to be honest I just love saying mootools. :) I got to admit though the download setup they have is by far the best I've ever seen. Very handy indeed.

I have my axe in hand Ben! You have little time to get those books! You are quite busy I'm sure but those are great books to read. The ones I always recommend are: Bulletproof Web Design, CSS Mastery, and DOM Scripting. There are several others but those 3 are the best. The first one I refer to it as my web bible. Gotta love the term bulletproof. I've certainly caught on to it.

Ah man I was looking forward to that too but I will refrain myself. :) Do a lot of your applications and sites you build rely on JavaScript to function Ben?

I'm really glad to see that you've tried out jQuery. The way I see it, JavaScript libraries are roughly the equivalent of the C StdLib, or libraries for Perl or Ruby.

Sure, you could code everything by hand, but why?

Especially with JavaScript, where coding by hand frequently entails spending hours tracking down obscure browser bugs, and writing strange fork code to target various different browsers.

jQuery code is short, concise, and readable. While it is something of a "black box," it's a black box with a ton of problems already solved. You're free to try and write your own, but be ready to dedicate 100s of hours (literally) to tracking down obscure bugs. It's not fun, but that's what frameworks are for.

And besides, with jQuery, you can finally realize the dream of unobtrusive JavaScript. You can literally define app-wide behaviors in one file and be done with it. Think of what CSS does for you with styles. jQuery does the same with behavior.

Welcome aboard! And if you have any questions, feel free to contact me directly (aim: outlookeic; gtalk: wycats@gmail.com). And check out my pretty version of the API at http://www.visualjquery.com.

See you around!

Thanks for coming on over Yehuda. BTW Ben, Yehuda is also part of the jQuery project team, creatore of the Visual jQuery website, and publisher of the Visual jQuery online magazine.

As you can see, we got your back with jQuery. ;o)

Javi, you gotta join in on the fun man. C'mon! Just take a look at jQuery and let the addiction take over. :o)

Thank you Ben for the kind words! :)

I actually tried out scriptaculous, prototype, dojo, mooTools, YUI and YUI-ext as well as a half dozen others. The main things about jQuery for me are: 1) Its smaller than the others, and 2) It was much easier for me to learn.

Re: your code.
It might be interesting to show the different ways of achieving the same result. like:

$(this).parent("div").children( ".on" ).attr( "class", "off" );
or
$("#thumbstrip a.on").attr( "class", "off" );
or
$("../a.on").toggleClass("on") //my syntax is messed up I think

But ALSO, I just looked at your code. One of the great benefits is to NOT put onclick="...". all you need to do is:
$("#thumbstrip a").click( function() { ShowPhoto() } );

Then your A looks like:
<a href="#" rel="17" class="off">
<img src="images/people/People_17_thumb.jpg" height="62" alt="" />
</a>

And your showPhoto can get the proper number with $(this).attr("rel").

The real benefit is to make truly semantic markup without a trace of interactivity mixed up with the code. Ooops, Ethan needs me to walk him to school.

Thanks again.

PS. Get on the jQuery mailing list. It is as much fun as jQuery itself.

Welcome Ben to jQuery! The fun just began, because with some experience with jQuery, you'll always find ways to improve your already compact code in other ways. At least that's what I heard from a lot of people and it is my own experience when working on and with jQuery.

Hope to see you soon on the discussion list!

Regards
Jörn Zaefferer, lead jQuery developer

Check this page:
http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery

Read the part about Hello jQuery. It shows a perfect example of how the click function is bound.

re: Faster: Finding by ID is pretty fast actually, but I have been following a "NO MORE IDs" rule in my own code. So it's not about speed. Actually it is sometimes slower. But the signal-to-noise ratio improves tremendously. Also it's much more scalable.

Example: Let's say you wanted to add another row of image-links. If you avoid the ID and just use a class like "image-selector" for the P then you can bind both and work with both just as easily. Relative pathing is more scalable because it makes you keep patterns in your markup and seperates the specific-ness of the jscript into something more generic.

So your markup can become REALLY small and very interactive and your code can be very abstract to handle lots of situations. Does this make sense?

How timely. My boss just took a peek at my current application and now wants me to give a brief presentation tomorrow on Jquery :)

That should be fun considering I'm just getting started myself!

Hey Jim. Just use the links that I posted here for info on the library. Also, remember that its jQuery with a lowercase "j". :o)

If you need some help, ping me.

Rey...

See! I can't even spell jQuery correctly and they expect me to give a presentation on it!!! I'm doomed! :)

I will certainly grab your links - thanks Rey!

As a testament to the simplicity of jQuery - my code is all very simple - mostly show/hide/toggle stuff that manipulates my display. At some point I'll need to look at doing some Ajax stuff - at which point I'll take a look at AjaxCFC :)

Just FYI: You could have used siblings() instead of parentNode and children.

$( objSource.parentNode ).children( ".on" ).attr( "class", "off" );

would become

$( objSource ).siblings(".on").attr( "class", "off" );

Depending on what you're doing, you might have done:

$( objSource ).siblings().toggleClass("on").toggleClass("off")

Hey Ben,

Welcome to the wonderful world of jQuery! I'm also on the jQuery Project Team, and I run the Learning jQuery blog:
www.learningjquery.com

Like you, I was totally sold on jQuery's selector power. Speaking of which, here is another way you could do the image swap (untested):

$(document).ready(function() {
$('#thumbstrip a').click(function() {
$(this).attr('class', 'on').siblings('a').attr('class', 'off');
var newSrc = $(this).attr('href');
$('#photoframe img').fadeOut('slow').attr('src', newSrc).fadeIn('slow');
});
});

It's nice sometimes to be able to select siblings rather than go up to the parent and back down to the children. Also with this code, you can take the onclick handlers out of the markup.

I hope you're not feeling overwhelmed by all the jQuery love raining down on you. :)

One more note: even though a lot of things about the jQuery library itself sold me on it from the start, the main thing that has kept me using it and even contributing to it has been the fantastic community of smart, passionate, and kind web developers. If you get really stuck on something, you can always post a question on the discussion list: http://jquery.com/discuss/. Don't be surprised if you get four or five helpful answers within 30 minutes.

cheers,
Karl

When using $(document).ready(), make sure that your custom javascript file (in your case, scripts.js) comes after jquery.js in the head.

D'oh! Yehuda beat me to the .siblings() section!

By the way, if you're sure that every sibling of the clicked element will be an <a>, you don't need to filter by "a" (or by ".on") in the .siblings() method. Just doing $(this).siblings().whatever will work fine.

Here is one way to rewrite the line...

$(objSource.parentNode).children(".on").attr("class", "off");

...using Mootools (my personal preference in JS libraries):

$(objSource.parentNode).getElements(".on").each(function(el){
el.className = "on";
});

While it took a little bit more code, that approach makes more sense to me anyway. And I'm sure I could give plenty of examples where Mootools' snytax would win out on brevity. (Also note that I could of course use one of Mootools' functions to set the class, but that would be unnecessary here.)

As for which library has the best support in class for working with the DOM, I'd have to hand that to yui with yui-ext. See, e.g., http://www.jackslocum.com/blog/2007/01/12/domquery-in-response-to-jquerys-response/

Oops. el.className = "on" should instead be using "off", obviously. :) And if you only wanted to remove "on" and add "off", leaving other classes alone, you could use el.replaceClass("on", "off"); I'm sure jQuery has something like that, too.

@Steve:

Yep, Jack's DomQuery really is great but that reply was dealing more with performance than actual the breadth of DOM support.

In actuality, Dean Edward's cssQuery probably has the best CSS 1-3 support of all the DOM libraries mentioned and Dojo has recently made some great strides in improving their DOM querying capabilities.

jQuery, as acknowledged by Alex Russel of Dojo, has the richest API out.

@Karl,

If you want to do image swapping, check out the swapit plugin.

http://rip747.wordpress.com/2006/12/15/jquery-my-new-plugin-swapit/

It can do backgrounds as well.

@Steve: Bare with me on this but I had a look at the code you posted:

jQuery:
$(objSource.parentNode).children(".on").attr("class", "off");

Mootools (my personal preference in JS libraries):
$(objSource.parentNode).getElements(".on").each(function(el){
el.className = "on";
});

and then was perplexed by this comment you made:

"examples where Mootools' snytax would win out on brevity."

While I assume that there may be instances to that fact, the code you posted doesn't reflect that. I certainly don't mind you posting contrasting perspectives (God knows Jack did that to jQuery with DomQuery) but could you use examples that actually reflect what you're describing? Otherwise, it just confuses people and IMO, paints the wrong picture about the capabilities of both libraries.

@Ben: I would definitely read through some of the sections of the API (you can get a good look at it at visualjquery.com) top to bottom.

Most important, imho:
Core (of course), especially gt, lt for traversing

DOM Attributes->attr, text, html, and val

DOM Manipulation top-to-bottom

DOM Traversing->filter (look at its various forms), siblings, children,
parents, prev, next, and (importantly) end

Javascript-> $.grep and $.map

Events-> Read the docs for bind, unbind, trigger, one, hover, and toggle

Effects-> Read animate carefully

Ajax-> load is really handy, but read through $.ajax, which is the root for all jQuery Ajax. Read through the functions starting with ajax (i.e. ajaxStart) for some handy callbacks. getJSON and getScript are handy as well.

Plugins-> Check out Interface, for sure, as well as forms (extremely important), dimensions, and metadata.

Hope that helps!

[While I assume that there may be instances to that fact, the code you posted doesn't reflect that. I certainly don't mind you posting contrasting perspectives (God knows Jack did that to jQuery with DomQuery) but could you use examples that actually reflect what you're describing? Otherwise, it just confuses people and IMO, paints the wrong picture about the capabilities of both libraries.] --Rey Bango

That's why I wrote: "While it took a little bit more code, that approach makes more sense to me anyway."

I mentioned there being instances of the reverse simply as an afterthought. If you only read parts of what I wrote, it just confuses people. ;-)

-----
[Yep, Jack's DomQuery really is great but that reply was dealing more with performance than actual the breadth of DOM support. In actuality, Dean Edward's cssQuery probably has the best CSS 1-3 support of all the DOM libraries mentioned and Dojo has recently made some great strides in improving their DOM querying capabilities.] --Rey Bango

I was talking about breath of support for working with the DOM in general, not just querying against it. I could certainly be wrong about that, but it is the impression I get while reading through the YUI and yui-ext docs. Also, speed is a big deal. However, the link to Jack's blog post about DomQuery's speed wasn't really an attempt to prove my claim... perhaps I should've linked to all the docs for YUI and yui-ext's DOM-related functionality instead.

While I've mentioned that Mootools is my personal favorite JS library, I think that YUI easily has the best thought out and most smartly implemented modular, object-oriented design. Many others seem to agree with this, and e.g., Ajaxian predicts that this year it will become "the standard weapon of choice among mainstream developers seeking a pure Javascript framework." ( http://www.ajaxian.com/archives/predictions-ajax-in-2007 ) Many developers will certainly still prefer the easy of use of other libraries like jQuery and Mootools, though (and that's no sleight against either library's power, which they both have in spades).

"I mentioned there being instances of the reverse simply as an afterthought. If you only read parts of what I wrote, it just confuses people. ;-)"

You sir are correct. I missed that one part which is why *I* was confused. So does that mean I'm confusing myself? :oP

"Also, speed is a big deal. However, the link to Jack's blog post about DomQuery's speed wasn't really an attempt to prove my claim... perhaps I should've linked to all the docs for YUI and yui-ext's DOM-related functionality instead."

Yep, that probably would've been a better idea. As for speed, remember that its Jack's extension, and not YUI's own built-in DOM methods, that have the speed improvements. DomQuery has actually turned out as a great motivator to align all of the major projects to produce a standard set of testing tools. We spoke with Alex Russell, Andrew Dupont, Jack & Dean Edward's and we're all collaborating on designing these tests to help improve the projects and get better test results. All of the tests to date (jQuery's, Jack's & Dojo's) leave something to be desired and John Resig kind of took the ball to get the standardization going.

"Many others seem to agree with this, and e.g., Ajaxian predicts that this year it will become "the standard weapon of choice among mainstream developers seeking a pure Javascript framework." (http://www.ajaxian.com/archives/predictions-ajax-in-2007 )"

They also seem to like Dojo's new dojo.query() functionality as well (http://ajaxian.com/archives/dojoquery-a-css-query-engine), so you need to take that with a grain of salt.

"Many developers will certainly still prefer the easy of use of other libraries like jQuery and Mootools, though (and that's no sleight against either library's power, which they both have in spades)."

We definitely agree on this. YUI certainly has some positives but files between file size and convoluted namespaces, it seems to push away as many developers as it attracts. Its not for lack of features or documenation. It has by far the best documentation I've seen and their pattern library is awesome.

BTW, when will I see you doing some jQuery code? Don't you know this is all an elaborate ploy at getting you to come on over? :o)

I have been using YUI with YUI-ext for the last couple of months. I have to say, it's alot harder for me to learn. Keep in mind, I am not a programmer. I barely can claim to be a hack. But I am having trouble doing basic things. I wish Jack's API had examples of the syntax so I could cut/paste.

Right now, most "comparisons" are focused on speed. I don't think speed is the key factor. I don't think how "short" a line of code should be the test either. I love jQuery because it was so easy to learn for non-programmers. It's the same reason I fell in love with HTML, Tables and CSS. (In that order).

One last thought: I think a comparison of file sizes is a big deal. YUI-ext with all the bells and whistles is 400k.

"I don't think speed is the key factor. I don't think how 'short' a line of code should be the test either. I love jQuery because it was so easy to learn for non-programmers." --Glen Lipka

Everyone will have differences of opinion about what's most important for them. That's one of the great things about having lots of options.... between jQuery, YUI, Mootools, GWT, Dojo, ASP.NET AJAX, Prototype, MochiKit, Rico, Qooxdoo, etc., there's something for almost everyone.

"I think a comparison of file sizes is a big deal. YUI-ext with all the bells and whistles is 400k." --Glen Lipka

That's misleading. Actually, the 50 or so JS files which comprise the latest version of YUI-ext probably total more than that, even in minified form (unless you were to run them through Dean Edwards packer, or similar). However, since they're modular, there's no reason you should ever be loading all of that on any given page, unless you really needed every last included feature / widget.

However, I do generally agree that JS file size is a very big deal, though the weight of most any library out there becomes very manageable through minification/gzipping. Here's a blog post from the YUI team about the page weights of their library: http://yuiblog.com/blog/2006/10/16/pageweight-yui0114/

"BTW, when will I see you doing some jQuery code? Don't you know this is all an elaborate ploy at getting you to come on over? :o)" --Rey Bango

Heh. I'd certainly be interested in gaining more first hand experience with several JavaScript libraries, jQuery among them. So few hours in a day, though...

Earlier, I wrote:
----------
Here is one way to rewrite the line...

$(objSource.parentNode).children(".on").attr("class", "off");

...using Mootools (my personal preference in JS libraries):

$(objSource.parentNode).getElements(".on").each(function(el){
  el.className = "on";
});
----------

... However, while looking through the (fairly recently released) Mootools 1.0 code a few minutes ago, I noticed there's a new "Elements" Class which makes a bunch of methods available for arrays returned by DOM queries. Hence, here are two additional ways the sample code could be rewritten when using Mootools 1.0:

$(objSource.parentNode).getElements(".on").setProperty("class", "off");

Or, alternatively...

$ES(".on", objSource.parentNode).setProperty("class", "off");

("$ES" is short for "get elements by selector.")

Just thought I'd note that since I wasn't previously aware of this alternative syntax.

Steve said:

"... However, while looking through the (fairly recently released) Mootools 1.0 code a few minutes ago, I noticed there's a new "Elements" Class which makes a bunch of methods available for arrays returned by DOM queries. Hence, here are two additional ways the sample code could be rewritten when using Mootools 1.0:

$(objSource.parentNode).getElements(".on").setProperty("class", "off");

Or, alternatively...

$ES(".on", objSource.parentNode).setProperty("class", "off");

("$ES" is short for "get elements by selector.")

Just thought I'd note that since I wasn't previously aware of this alternative syntax."

The best jQuery syntax is what I suggested above:

$( objSource ).siblings(".on").attr( "class", "off" );

Additionally, your syntax will actually find all *descendants* of objSource.parentNode with class "on", while he only wants to find direct children.

You might be able to do:

$ES("> .on", objSource.parentNode).setProperty("class", "off");

which is still longer than:

$( objSource ).siblings(".on").attr( "class", "off" );

Ah, sorry, I'd missed your previous post. Okay, so jQuery wins this round in code brevity. :)

Doh! Karl Swedberg had also mentioned siblings(). I guess I just read the first few comments before posting. The siblings method seems quite convenient, and doesn't have an exact counterpart in MT. For the record, while MT can certainly use the direct child ">" CSS operator when querying against the DOM, it can't (as of v1.0, anyway) use it as the first character in the string within the $ES() function.

@Steve:

"it can't (as of v1.0, anyway) use it as the first character in the string within the $ES() function."

Sounds like you need to look at jQuery! doh!

Couldn't resist.

@Steve: This is why I would never use MooTools:

http://forum.mootools.net/topic.php?id=1607&replies=12

I'm am floored that Valerio, the lead developer for MooTools, would reply to someone in this fashion.

@Rey:

If you'd called Valerio (or the entire Moo dev team, excepting possibly Aaron from cnet) an elitist prick, I'd agree with with you. Of course, that doesn't change the qualities or benefits of either library (aside from the jQuery forums/community being more helpful to JS beginners).

@Steve:

He doesn't start off by calling him "elitist". It just flows in that direction after the replies that he receives. I know I was shocked by some of the replies from the team but I guess each group has their own personality. I just know that if I received this reply while evaluating a library:

'If you dislike the website, or how mootools builds himself with dependancies, or find it confusional, well, its your right to go and use an easier framework."

it'd be an instant turnoff. It might just be me but basically telling someone to bug off just doesn't sit well with me. I'm just more in tune with helping users than being difficult.

And to be precise, he said the following: "I do sense a sort of 'elitist' attitude amongst the MooTeam.". I don't remember him using the term "prick" in the post and I would prefer someone reading this to know what he said instead of someone's interpretation of what he said.

"Of course, that doesn't change the qualities or benefits of either library"

Unless of course you need MooTools support at which point you should put on a flak jacket and venture into the their forum. ;o)

@Rey:

I called Valerio (and most of the Moo dev team) elitist pricks. That doesn't usually bother me personally too much, though (to each his own, I suppose).

Now I just wonder why you're going on about this. I'm not here to evangelize Mootools, so I'll respectfully bow out from this thread. I recognize that jQuery is a very good or even the best choice for many people.

@Steve:

I reread your post after one of my buds pointed out that I may have misunderstood what you meant. It sounds like you're in agreement about the MooTeam not being very nice at times. If that's what you were trying to say, the just disregard the whole section where I wrote:

"And to be precise, he said the following: "I do sense a sort of 'elitist' attitude amongst the MooTeam.". I don't remember him using the term "prick" in the post and I would prefer someone reading this to know what he said instead of someone's interpretation of what he said."

Unfortunately, the internet leaves something to be desired when it comes to conveying ideas so I may have misunderstood what you were saying.

@Steve: Looks like you replied already and I misunderstood what you were trying to convey.

"Now I just wonder why you're going on about this. I'm not here to evangelize Mootools, so I'll respectfully bow out from this thread."

I thought we were having a nice exchange and in much the same way you *were* evangelizing MooTools earlier, I'm just doing the same. I felt that you actually might be interested in that type of info, especially since you are recommending MooTools to others. Its the type of info that I think is important for new users to know about.

If you'd like to bow out, I understand and I'll do the same.

"Unfortunately, the internet leaves something to be desired when it comes to conveying ideas"

Yeah, I know what you mean... rereading it feels like I didn't convey some things very well.

"I thought we were having a nice exchange and in much the same way you *were* evangelizing MooTools earlier, I'm just doing the same."

Fair enough. ;-)

Obviously, I've withdrawn my "bowing out," since there's no real reason to do so. Rock on...

"rereading it feels like I didn't convey some things very well." - Me

Even that probably did not come out very clearly (I should proofread my comments). :) This might make a little more sense:

"After rereading my comments, it feels like I didn't convey some things very well."

Oh well....

Absolutely right comments means suggestion of some words but some people write a article bigger than the orignal

post.

God knows if you've updated this, but I was finaggling an image swap of my own that shows an initially hidden div:

$(document).ready(function() {
$('div.formHelp > div').hide();
$('div.formHelp > img').click(function() {
$(this).next('div').toggle('normal');
$("img").attr("src","/images/css/formHintButtonSelected.gif");
return false;
});
});

Only problem I have left to fix is to make the image SWAP instead of just changing once... damn my weak JS skills!

@Bax and Ben,

jQuery does have an "every other" method that triggers on click: .toggle(fn1, fn2). This one sometimes gets lost in the mix because jQuery also has an effect method called .toggle('optionalSpeed'), which I see Bax is already using.

That said, it might make more sense in this situation to change the src of the image through if/else statements. Here I'm using the conditional operator, which should achieve the same effect (untested):

<pre><code>$(document).ready(function() {
$('div.formHelp > div').hide();
$('div.formHelp > img').click(function() {
var $this = $(this);
var thisImage = $this.attr('src');
$this.attr({
'src': thisImage == "/images/css/formHintButtonSelected.gif" ? "/images/css/formHintButtonUnSelected.gif" : "/images/css/formHintButtonSelected.gif"});
$this.next('div').toggle('normal');
return false;
});
});</code></pre>

One other thing I should probably point out: On the first inside the click handler, I set a variable for $(this). That's just a little optimization technique to avoid having to repeatedly create a jQuery object.

oops. I guess the comment filter didn't like my pre and code tags. sorry about that.

Thanks for sharing!

Here was my simple jQuery image Swap:

$('img#nav1').hover(function() {
$(this).attr("src","/images/headerNav/1-over.gif");
}, function() {
$(this).attr("src","/images/headerNav/1.gif");
});

I was also very impressed by Jquery the first time I used it. I actually went to the 2.0 Expo and saw Jon Resig's lecture. I use it in allot of the projects I work on. At work we're all about it. But after using Jquery I started compiling my own JS Library. Now I have about 80 different actions I can create and never have to worry about again. Of course Jquery is endless! But I wouldn't suggest giving up the language now that there's an easier way to do it. That's like not knowing how to hand code because Dreamweaver exist. There are also a bunch of other API's and libraries out there. Spry is another really big one you may want to look into. At the 2.0 expo I assumed Jon Resig was just going to give us a bunch of JQuery tutorials, but in fact he taught us advanced JS techniques, and rarely spoke about JQuery at all.

Great script! I am trying to incorporate it into a site setup with a static height that scrolls horizontally. I have a main container DIV for the site, and then module DIVs (class="module") that contain a header and the columnized text. These module DIVs are floated left to line up horizontally, but when I do that, the columnization isn't happening. If I remove the float:left css on the module DIV the columnization works, but the module DIVs don't arrange themselves next to each other horizontally as desired. Any idea why the columnization isn't happening when the module DIVs are floated left?

Thank you for another great article. Where else could anyone get that kind of information in such a perfect way of writing? I have a presentation next week