Helping you understand jQuery

Posted on by

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?

jQuery 1.0.4

Posted on by

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

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).

Expandable Sidebar Menu Screencast

Posted on by

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:

jQuery Button Contest Winners

Posted on by

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)

  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)

  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)

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!

Vote for the jQuery Button

Posted on by

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!

jQuery 1.0.3

Posted on by

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.

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

jQuery Button Contest – Many Prizes!

Posted on by

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!

Friends of Firefox – Mozilla utilizes jQuery.

Posted on by

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.

screenshot.jpg

also posted on Drinking rockstars and programming