Some recent articles have discussed the need for having “really good” tutorials for JavaScript libraries.

As always, we’re working to make the jQuery documentation better and more useful, so I want to pose the following question: What are some tutorials that would help you better use or learn jQuery? Make sure it’s something simple (like “Building a drop-down menu.”) and not something really complex (like “Building a complete shopping cart system”). Feel free to post your suggestions here in the comments, it’ll help to give us a good idea of what people want and what needs better explaining.

We’ve recently started working on the reorganization of the jQuery documentation wiki. Right now it’s quite messy and all over the place. As you can see from the new wiki’s structure, however, is that we’re going for a much more thorough representation of jQuery itself. Within each of these topics we want to include a number of useful “common case” tutorials that will help you to better understand the functions in the jQuery API.

So please: (Taking into account what you see of the new wiki’s structure) What would help you better learn, and use, jQuery?

Another fantastic release of jQuery is ready for your consumption. This release includes a number of bug fixes (as usual) along with some much-needed improvements to jQuery’s Ajax functionality.

As always, if you have any questions or concerns with new release, please feel free to discuss it on the jQuery Mailing List. If you think you’ve spotted a bug, please add it to the bug tracker.

So, without further ado, here’s jQuery 1.0.4:

Download

• Compressed JavaScript (Recommended Download!)
• Uncompressed JavaScript
• 1.0.4 Documentation
• 1.0.4 Test Suite
• Full Release (jQuery, Test Suite, Documentation)
• Build Files (Compile your own version of jQuery 1.0.4)

Changes and Features

• Tons of bug fixes (Full List)
• Extensions to $.ajax(): $.ajax accepts additional options: beforeSend, async and processData; returns XMLHttpRequest to allow manual aborting of requests, see docs for details.

  Example: Add extra headers to an Ajax request using beforeSend

  $.ajax({
    type: "POST",
    url: "/files/add/",
    beforeSend: function(xhr) {
      xhr.setRequestHeader( "Content-type", "text/plain" );
    },
    data: "This is the contents of my text file."
  });

  Example: Perform a synchronous Ajax request.

  // Get the HTML of a web page and save it 
  // to a variable (the browser will freeze until the 
  // entire request is completed).
  var html = $.ajax({
    type: "GET",
    url: "test.html",
    async: false
  }).responseText;
  
  // Add the HTML into the page
  $("#list").html( html );

  Example: Sending a JavaScript object using processData.

  // The data to send to the server
  var params = {
    name: "John",
    city: "Boston"
  };
  
  // Send the data, but have it be converted into
  // a format the server can understand (w/ processData)
  $.ajax({
    type: "POST",
    url: "/user/add/",
    data: params,
    processData: true
  });

  Example: Aborting an Ajax request after a specific delay in time.

  // Perform a simple Ajax request
  var req = $.ajax({
    type: "GET",
    url: "/user/list/",
    success: function(data) {
      // Do something with the data...
      // Then remove the request.
      req = null;
    }
  });
  
  // Wait for 5 seconds
  setTimeout(function(){
    // If the request is still running, abort it.
    if ( req ) req.abort();
  }, 5000);

• AJAX module: The public $.ajax API is now used internally (for $.get/$.post etc.); loading scripts works now much more reliably in all browsers (with the exception of Safari, which is a work in progress).
• New global Ajax handler: ajaxSend – called before an Ajax request is sent.

  Example: Add extra headers to all Ajax requests using the ajaxSend event.

  $(document).ajaxSend(function(xhr){
    xhr.setRequestHeader("X-Web-Request", "MySite.com");
  });

• Extensions to global Ajax handlers: ajaxSend, ajaxSuccess, ajaxError and ajaxComplete get XMLHttpRequest and settings passed as arguments.

  Example: Prevent any POST requests that are sending too much data.

  $(document).ajaxSend(function(xhr,options){
    if ( options.type == "POST" && options.data.length > 1024 )
      xhr.abort();
  });

  Example: Show a special message for requests submitted using an Ajax POST.

  $("#dataSent").ajaxSend(function(xhr,options){
    if ( options.type == "POST" )
      $(this).show();
  });

• Extensions to event handling: pageX and pageY are available in all browsers now. (IE does not provide native pageX/Y).

  Example: Have a tooltip follow a user’s mouse around the page.

  $(document).mousemove(function(e){
    $("#mousetip").css({
      top: e.pageY + "px",
      left: e.pageX + "px"
    });
  });

• Improved docs: $(String) method has now two separate descriptions, one for selecting elements, one for creating html on-the-fly.
• FX module: Most inline styles added by animations are now removed when the animation is complete, eg. height style when animating height (exception: display styles).

Rich Manalang, one of the regulars on the jQuery mailing list, took the initiative and with a little help has gotten the jQuery API posted up on gotAPI.com. If you haven’t been over to gotAPI, its a great online documentation resource that provides a comprehensive API listing for most popular programming languages and frameworks. Great job Rich!

Joshua Eichorn will be giving a talk about jQuery at the Pheonix azPHP user group tonight. You can get more details here:

jQuery at AZPhp

This is the first (of hopefully many) screencasts that will provide a quick tutorial to a simple demo of jQuery in action. I plan on doing at least 2-3 more based upon the talks that I’ve given lately – hopefully I can trickle those out over the next week(s) or so. (Oh, and sorry if I sound tired – that’s because I am.) Enjoy!

jQuery Demo – Expandable Sidebar Menu on Vimeo

Or: Watch the original (.mov, 3.85MB) video. (I suspect that this version is much clearer – but not everyone supports Quicktime files)

File Downloads:

• Final version of the demo
• The base HTML file

The votes are in! Here are the winners of the jQuery Button Contest:

The Winners

1. First Place Prize (93 votes): Two Books – Ajax Design Patterns and John Resig’s upcoming Pro JavaScript Techniques
   Ned Collyer, Australia:

   HTML: (Copy this into your web site to use this button) <a href='http://jquery.com/' title='jQuery JavaScript Library'><img src='http://jquery.com/files/buttons/jquery-icon.png' alt='jQuery JavaScript Library' title='jQuery JavaScript Library' style='border:none;'/></a>

2. Second Place Prize (83 votes): One Book – Foundations of Ajax
   Cyril Demars, France:

   HTML: (Copy this into your web site to use this button) <a href='http://jquery.com/' title='jQuery JavaScript Library'><img src='http://jquery.com/files/buttons/propal2.png' alt='jQuery JavaScript Library' title='jQuery JavaScript Library' style='border:none;'/></a>

3. Third Place Prize (75 votes): $10 Cash to a PayPal account of your choosing!
   Altstack, Japan:

   HTML: (Copy this into your web site to use this button) <a href='http://jquery.com/' title='jQuery JavaScript Library'><img src='http://jquery.com/files/buttons/110x31_gr01.png' alt='jQuery JavaScript Library' title='jQuery JavaScript Library' style='border:none;'/></a>

I’m quite pleased with the results, there’s a good mix of sizes and styles – a little something for everyone. If each of the winners could contact me, we’ll arrange for your prizes right away.

Remember: Even if your favorite entry didn’t win, that doesn’t mean that you can’t use it to promote jQuery.

On another note: The redesign (and reorganization) of the jQuery web site is in full swing. There are a couple professional web designers who are graciously donating their time to make the new site come alive. Expect to see some more updates on this front very soon.

I’d like to, again, thank everyone for participating – this has been a fantastic contest. I’m immensely pleased, and I hope you are too!

Voting is now closed! Thanks, everyone, for your input! The results can be found here: jQuery Button Contest Winners.

The next round of the jQuery Button Contest is upon us! After some careful deliberation, the judges have narrowed the playing field of 123 jQuery button submissions down to just 30. We were completely overwhelmed with both the quality and quantity of submission and would like to personally thank everyone who participated. There were a ton of excellent entries but ultimately the following 30 buttons were chosen due to their clarity, composition, and originality.

Now it’s your turn to help! In order to narrow the results down to the final three, winning, buttons we need you to vote for which buttons that you like. You’re allowed to vote for as many buttons as you’d like, but only once.

Vote for your favorite buttons:

Your votes are tracked and only counted once – but feel free to vote for as many buttons as you wish.

The polls will be closed Monday 11:59pm (EST, GMT -0500). So get your voting in now – and make your decision count!

Another bug-fix release is ready for all to enjoy! It is highly recommended that you upgrade right away. As always, if you spot a bug, please add it to the bug tracker.

As with the last release, jQuery 1.0.3 is featuring only bug fixes – leaving all API additions/changes/deletions until the next full release: jQuery 1.1.

Once again, Jörn Zaefferer did an incredible job really keeping on top of the bugs, fixing the vast majority of them. Much of this release was made possible by him.

Download Now:

This release includes a new package: A complete zip file of everything associated with this release. This includes three versions of jQuery (Regular, Lite, and Packed), the test suite, and all the documentation. Now you don’t have to build it yourself just to have your own copy.

• jQuery 1.0.3
• jQuery 1.0.3 Compressed
• jQuery 1.0.3 Full Release (All versions of jQuery 1.0.3, the documentation, and the test suite)

Tickets Closed:

The full set of bugs, or enhancements, that were closed with this release:

Note: Even though about 60 bugs are shown below, many of them were messed with by spammers – so I’m not entirely sure which ones were fixed this release and which ones are just zombie bugs that got re-closed. I’m fairly positive that while there were a lot of bug fixes this release, there weren’t 60 of them.

1. hover cross browser issue
2. hoverClass
3. slideUp/Down buggy in Opera 9.01
4. jQuery?s toggle(); gets mixed up with moo.fx?s toggle();
5. FX flash bug in animations
6. .css() returns incorrect values
7. Normalize event object
8. Opacity should go to 1.0
9. appending thead to table
10. Problem with ‘e’ being passed to JQuery.css()
11. [PATCH] IE Opacity issues resolved
12. bug in show when used inside callback
13. [jQuery] hover function does not invoke mouseout callback
14. children() may return nothing
15. [PATCH] $().hover error in firefox
16. Context is being modified
17. .text() includes comments
18. Animation Queueing is Broken?
19. IE weirdness on semi-opaque anti-aliased text, a small fix
20. $([[‘a’, ‘b’]]).length
21. $().trigger broken since rev. 127
22. JS ‘warnings’ generated in firefox
23. Leak for Mozilla/Firefox browsers (using addEventListener)
24. Safari crash in test suite
25. remove() & remove(expr) not work
26. [PATCH] innerWidth and innerHeight fails in IE with no borders
27. $.load requires a callback
28. o.getAttribute is not a function (line 634)
29. Unavailable response header breaks Firefox 1.0
30. Problems with show and hide
31. Nested in display:none gives width()/height()=0
32. this.set is not a function
33. ifModified arg to $.ajax()
34. ready does not work over https with msie – fix
35. Params to $.get() are appended wrong to querystring
36. ajax summary / todo list
37. $(‘node1/node2’) gives error when node1 is empty
38. The float property for IE
39. Opacity doesn’t work in IE
40. $.postJSON
41. cloneNode() issues
42. “name.replace is not a function” in 1.0.2
43. it is impossible to implicitly abandon search context (without .end())
44. load() of html is not shown properly after hide/show
45. Seperate private and public $.extend
46. $.load should automatically be JQuerified
47. ajaxStart and ajaxStop are having issues
48. .add( jQuery )
49. Double assignment when setting iframe src attribute
50. XML not properly parsed by Interface Autocompleter
51. Some variables are not initialized properly in jQuery.ajax in 1.0.2
52. $.ajax: Evaluate JS for “html” dataType like load()
53. $(‘something’).load(‘test.html’).show(“slow”) won’t work
54. Mod of API Docs for jQuery “val”
55. jQuery 1.0.2 appears to break the Interface Elements Autocompleter plugin
56. Hyphens in CSS, IE6
57. Assert that animate does not alter the hash param
58. .animate() overflow not reset

Update: The contest is now closed! I would like to thank everyone for their submissions. We’ll begin the judging process very soon.

To encourage people to promote the jQuery project, and get as many people involved in the community as possible, we’re holding a contest to build a “Powered by jQuery” button. Having a nicely designed button will be a good way for jQuery users to build more awareness about the project, while having something that looks cool on your site!

The Rules:

1. The contest will run until November 3rd. Winners will be announced November 5th.
2. All entries must must be optimized for the web (8-bit PNG) and images should be no bigger than 173×31 (example).
3. The jQuery team will have the right to the use the submissions anyway they wish. This will prevent any copyright issues in the future. The winner must also be able to provide a PSD (or AI) file so that the image can be maintained in the future.
4. Prizes will be awarded for 1st, 2nd and 3rd place submissions.
5. The general jQuery community will do the final voting, moderated by John Resig, creator of jQuery, and Rey Bango.
6. You should make use of the jQuery hat logo in your button (you’re free to re-draw it, as necessary). If needed, here’s a raw PSD of the hat logo.

The Prizes:

1. First Place Prize: Two Books – Ajax Design Patterns and John Resig’s upcoming Pro JavaScript Techniques
2. Second Place Prize: One Book – Foundations of Ajax
3. Third Place Prize: $10 Cash to a PayPal account of your choosing!

The prizes will be shipped anywhere in the world via regular post.

All submissions should be made in the comment section of this posting via a standard hyperlink. Make sure that you provide a valid email address when submitting your entry.

This is your chance to really help expand the jQuery community by creating a top notch button that will get a ton of exposure. Good luck to everyone!

Mozilla just released http://www.worldfirefoxday.com/, a site to thank everyone who contributed in world firefox day 2006. The site allows users to search for friends names and they are displayed in an interesting fashion.

The script is a combination of the Rotator script and some slick AutoComplete which powers the search.

Start typing a name slowly to see the results being filtered and loaded into the rotator in real time. Then, if the results number more than 20, you are able to “page” through them. The script supports a “previous” button, but it has been hidden.

also posted on Drinking rockstars and programming