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

Zebra Table Showdown

Posted on by

As a follow-up to the previous event selector showdown comes a new Zebra Table Showdown.

The Challenge:

Making all tables on a page have striped (“Zebra”) backgrounds (different coloring on every odd row).

The Rules:

  • The odd/even styling should be done by adding a class for the ‘odd’ numbered table rows.
  • This must be able to work on multiple tables. (It’s not as simple as finding all rows then going through every odd one, otherwise an even row could become highlighted in the next table).
  • The code should be done as elegantly as possible, using as much of a libraries’ functionality as possible. Speed is not an issue.

Intended Result:
zebra-fig1.gif

Plain DOM Scripting: (demo)

var tables = document.getElementsByTagName("table");
for ( var t = 0; t < tables.length; t++ ) {
  var rows = tables[t].getElementsByTagName("tr");
  for ( var i = 1; i < rows.length; i += 2 )
    if ( !/(^|\s)odd(\s|$)/.test( rows[i].className ) )
      rows[i].className += " odd";
}

Note: This includes a check to make sure that the 'odd' class doesn't already exist on the table row. This is taken care of by all modern libraries.

Yahoo UI: (demo)

var tables = document.getElementsByTagName("table");
for ( var t = 0; t < tables.length; t++ ) {
  var rows = tables[t].getElementsByTagName("tr");
  for ( var i = 1; i < rows.length; i += 2 )
    YAHOO.util.Dom.addClass( rows[i], "odd" );
}

Note: Although, their own developer site disagrees.

Dojo: (demo)

var each = dojo.lang.forEach;

each(document.getElementsByTagName("table"), function(table){
  each(table.getElementsByTagName("tr"), function(row,i){
    if ( i % 2 == 1 )
      dojo.html.addClass( row, "odd" );
  });
});

Note: A common function was assigned to a variable in order to make the code shorter.

Prototype (1.4.0): (demo)

$A(document.getElementsByTagName("table")).each(function(table){
  $A(table.getElementsByTagName("tr")).each(function(row,i){
    if ( i % 2 == 1 )
      Element.addClassName( row, "odd" );
  });
});

Mochikit: (demo)

var byTag = getElementsByTagAndClassName;

forEach( byTag("table"), function(table) {
  var rows = byTag( "tr", null, table );
  for ( var i = 1; i < rows.length; i += 2 )
    addElementClass( rows[i], "odd" );
});

Note: A common function was assigned to a variable in order to make the code shorter.

Prototype (1.5.0): (demo)

$$("table").each(function(table){
  Selector.findChildElements(table, ["tr"])
    .findAll(function(row,i){ return i % 2 == 1; })
    .invoke("addClassName", "odd");
});

mootools: (demo)

$$("table").each(function(table){
  $ES("tr", table).each(function(row,i){
    if ( i % 2 == 1 )
      row.addClass( "odd" );
  });
});

jQuery: (demo)

$("tr:nth-child(odd)").addClass("odd");

If you feel as if you have a more elegant solution than the ones posted here, please post them below so that the listing can be updated.


New Submissions:

These are new entries that have been submitted by other readers.

AJS: (demo)

AJS.map(AJS.$bytc("table"), function(table) {
 AJS.map(AJS.$bytc("tr", null, table), function(row, i) {
   if ( i % 2 == 1 && !/(^|\s)odd(\s|$)/.test( row.className ) )
     AJS.setClass( row, "odd" );
 });

Prototype 1.5.1: (demo)

$$('tr:nth-child(odd)').invoke('addClassName', 'odd');

Minor API Change in 1.0.2

Posted on by

I forgot to mention in the 1.0.2 release notes, the other day, that there was a minor API change. This was a mistake, as we should’ve held off on making an API change until the next major release (jQuery 1.1).

As summarized by Steven Wittens, here is the premise behind the change:

In jQuery 1.0.2, the first argument to the ‘success’ callback has been changed to return the actual data rather than the XMLHttpRequest object. Use the ‘dataType’ argument to $.ajax() to control how the data is returned. Note that jQuery can now parse XML, JSON and JavaScript for you this way.

jQuery 1.0.1

$.ajax( {
  success: function (xmlhttp) {
    var data = $.httpData( xmlhttp );
    // 'data' holds the response data from the server
  }
);

jQuery 1.0.2

$.ajax( {
  success: function (data) {
    // 'data' holds the response data from the server
  }
);

Thanks, Steven, for the synopsis – and sorry, everyone, for the inconvenience!

jQuery 1.0.2

Posted on by

jQuery 1.0.2 is now ready for consumption! This release is a huge bug fix release – and it is highly recommended that you upgrade right away. As always, if you spot a bug, please add it to the bug tracker.

In addition to having a better test suite, a big push for this release was to have better cross-browser compatibility for common tasks (such as AJAX operations). Functionally, however, no major features have been added to this release (although, expect some new code come 1.1).

I’d like to take this opportunity to introduce everyone to Jörn Zaefferer. Much of this release was made possible by him. He’s responsible for completely overhauling the test suite (it now has over 260+ tests!) and for fixing the majority of the current bugs and enhancements (over 60 of them!). If you want someone to thank for this release, it should be him.

Download Now:

Tickets Closed:

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

  1. Cross Browser Dimensions
  2. I.E. text rendering at full opacity
  3. FadeIn/FadeOut breaks if opacity is already set
  4. css(‘top’) and css(‘left’)
  5. fx.custom() doesn’t work for opacity in IE
  6. Opacity doesn’t work in IE
  7. jQuery IE6 bug with base href
  8. [PATCH] IE Opacity issues resolved
  9. Namespaced Selection of Elements and Attributes
  10. append(html) function fails, if html is a table fragment and begins with whitespace
  11. IE weirdness on semi-opaque anti-aliased text, a small fix
  12. a fix for getAttribute(‘action’) in forms
  13. IE throws errors for $(this) in nested each loops
  14. IE5 scripting error
  15. Leak for Mozilla/Firefox browsers (using addEventListener)
  16. filter seemingly not operating correctly
  17. $(‘node1/node2’) gives error when node1 is empty
  18. add does not merge sets
  19. extend not(jQuery) to be able to operate with sets
  20. document the behaviour of $(“
  21. $.load requires a callback
  22. [PATCH] $().hover error in firefox
  23. Attribute values in :not()
  24. children() may return nothing
  25. IE throws errors for $(this) in nested each loops
  26. ajax summary / todo list
  27. Safari crash in test suite
  28. wrong safari detection
  29. different behavior for next() in IE and Firefox
  30. [PATCH] IE Memory Leaks from event system
  31. Different Encodings for AJAX
  32. IE 6 removes whitespace, eg. when using append
  33. hover() mouseout bug
  34. $.postJSON
  35. Params to $.get() are appended wrong to querystring,
  36. calling load without arguments throws exception
  37. Returning script tag in IE fails
  38. Unavailable response header breaks Firefox 1.0
  39. ifModified arg to $.ajax()
  40. Timeout as Argument to AJAX
  41. Replacement :input, :radio, etc.
  42. Ajax refactoring
  43. jQuery’s toggle(); gets mixed up with moo.fx’s toggle();
  44. Error Parsing Opacity
  45. .constructor == Function is not enough
  46. [PATCH] $().hasClass()
  47. Create IE 5.0 Support Plugin
  48. [PATCH] innerWidth and innerHeight fails in IE with no borders
  49. sibling() returns siblings and the subject
  50. IE fails with #element/* expressions
  51. XHTML Tables
  52. wrap breaks when the HTML structure contains text
  53. Fix for attribute *=, ^=, and $= in cases where special attributes.
  54. `]` breaks selectors
  55. Including jQuery again overwrites already registered document-ready events
  56. Expression generates error in FireFox 1.5.0.6
  57. support of ancestor:: axis
  58. prev() does not work as expected
  59. nth-of-type
  60. Animate function release
  61. attr(‘checked’, true) doesn’t work

Poll: Who are you and how do you use jQuery?

Posted on by

Leave your answers in the comments.

  1. Name (anonymous if you must)
  2. Are you using jQuery corporately or for your personal use?
  3. Describe how you are using jQuery.
  4. Showcase! Link to any of your projects that use jQuery.

We would really like to get to know a lot of you better, not just the hardcore developers but the everyday users. So give us the scoop!

(Or, “let us know a little about you, and shamelessly plug your projects, too!”).

UPDATE: Thanks to all who have responded so far.

I have to say, I am astonished at how many of you are using jQuery for corporate sites. Many of you (or your companies) might consider donating to the jQuery project from the homepage. Of course, this is not required, but it does ensure jQuery stays strong by covering the costs of development and keeping the monthly server bill in check. :)

And to that I will add: bug reports, plugins, and other contributions to the community are equally valuable as donations. My point: Let’s remember to all give back in whatever ways we can.

All of your comments are invaluable, whether you’re a big-timer working on corporate sites or a small-timer building a webapp just for fun. Keep ’em coming!

Visual jQuery Magazine Released

Posted on by

Issue 1 CoverThe first issue of the brand-new Visual jQuery magazine has been released. It is available for download in PDF format.

The purpose of the Visual jQuery Magazine is to provide information about jQuery for beginners and advanced developers, interviews with interesting members of the jQuery community, and details on how to maximize your use of the framework through plugins and other tips.

The first issue includes:

  • An editorial comment about the magazine
  • Winning on Philosophy: Why jQuery’s Approach Works
  • The Man Behind the Magic: An interview with John Resig
  • jQuery Tutorial: An introduction to the jQuery object
  • Plugins for rich application development.
  • Meet Dave Cardwell, the developer of jqBrowser and jqMaxMin
  • A cool back-page ad (trust me, you want to take a look)

Issue 2 will feature more of the same jQuery goodness:

  • Meet Klaus Hartl, the developer of jQuery tabs who works on Plazes
  • jQuery Tutorial: An introduction to jQuery’s AJAX functionality
  • Plugins useful for visual effects
  • Letters from our readers

So run, don’t walk, and download the magazine today!

Update: Please digg the magazine or add it to your other social bookmarking sites like delicious.

Sponsored jQuery Development

Posted on by

Excellent news today: Paul Bakaus has received sponsorship from his employer, New Identity AG, to contribute back to jQuery project. He’s being given a chunk of hours under which he is sponsored to develop jQuery-related code. All of this is going straight back in to the community.

This is in addition to the fact that New Identity AG is in the process of making some major switches over to using jQuery as their primary JavaScript library. They have a number of high profile clients that they develop for.

Paul is going to begin by undertaking a number of tasks that have been “in the works”, namely: A Prototype support plugin, Cross-browser utility methods, and improved functionality and bug fixes for Interface.

This is a clear sign of a couple things: That jQuery’s German user-base is growing quite well, that development will move at an even quicker pace now, and that Interface is becoming an integral part of the full “jQuery package.” Expect to see some important updates in the pipeline, soon.

Image enhancements with jQuery

Posted on by

If you’re new to jQuery, you might not know that it has a very extensible plugin architecture. That’s not to imply that it’s a complicated one; it’s not!

One of the popular features of jQuery is the built-in effects library. Using jQuery’s plugin architecture, a number of smart people have taken the built-in effects one step further, creating some very pleasing modules for image enhancement.

Three to check out:

jCarousel
http://sorgalla.com/pages/jcarousel.html

jcarousel-screenshot.gif

jCarousel by Jan Sorgalla displays image thumbnails in a horizontal or vertical component. Configuration is pretty straightforward, and sufficient documentation is available on the plugin page. jCarousel can tie into Flickr, load static images, or dynamically load via AJAX.

Interface
http://interface.eyecon.ro/ [main]
http://interface.eyecon.ro/demos/slideshow.html [slideshow demo]

interface-slideshow-screens.gif

Interface Elements by Stefan Petre has a slideshow component for displaying individual images. Fade-in/fade-out between numbered images with next and previous links. Very usable overall, sharp look and very professional feel.

Thickbox 2.0
http://jquery.com/demo/thickbox/

thickbox2-screenshot.jpg

Cody Lindley recently updated Thickbox to version 2.0, so if you haven’t yet, give it another look.

Browse the full list of plugins to find more enhancements for your projects.

Taking jQuery Documentation to the Next Level

Posted on by

jQuery 1.0 solidified a lot of the framework, but it also introduced some neat structural changes.

First up, the framework now builds via make files, so anybody can check out jQuery from subversion and compile either the packed or unpacked jquery.js for use in their website.

Second of all, jQuery now includes built-in testing, and the make file can build the test suite, which the user can then run in his favorite browser to make sure that the latest checked in version is up to snuff. There aren’t a whole lot of test cases written so far, but that should change moving forward (primarily because it’s so easy to add them).

Most important for me, however, has been the inclusion of inline documentation. Beginning with version 1.0 of jQuery, the documentation of the framework is included in the source files themselves, and John Resig, jQuery’s maintainer, has written a parser that will spit out an XML version of the documentation as part of the makefile (a simple make docs will build the documentation).

Visual jQuery

In the run-up to 1.0, I converted the old Visual jQuery site from a Rails-based solution, that required manual entry of functions, into a site that loads the documentation on the fly as it’s committed to the trunk.

For the less-technical, that means that Visual jQuery will now be updated pretty much as soon as jQuery is updated. Lots of people have found the visual documentation convenient and easy to use, and the new version strives to continue that ease of use.

Thanks to John, the file that his parser spits out is very well optimized for sites like Visual jQuery. He has really made good documentation a priority this time around. And from my perspective, a major part of what sets jQuery apart from the competition is its emphasis on providing readable, good documentation. I’m happy to say that jQuery has made the right choice here. Within the next couple of days, John will have fully documented all jQuery functions (there are a few still to go), and the visual documentation will fully represent the jQuery API.

Visual jQuery Magazine

The Magazine

With that, I have a couple of announcements.

  1. Visual jQuery is going to get a major new feature sometime in the next week of two. Specifically, users will have the ability to filter functions (by name and description) through a live-search box. That capability will make it easier to find specific functions.
  2. Visual jQuery is launching a monthly online magazine. It will be released in PDF format, and will be available free of charge. The first issue will include an interview with John Resig, our first in a series of articles about the newest and greatest jQuery plugins, and a visual look at the jQuery Object, the centerpiece of the entire jQuery framework. The Magazine will be released the third Wednesday of every month, so Issue 1 of the Magazine, the September 2006 issue, will be released on September 20.

As always, check out VisualjQuery.com for the latest Visual jQuery Documentation and further announcements about the Magazine.