Uncategorized

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:

Uncategorized

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!

Uncategorized

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!

Uncategorized

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
Uncategorized

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!

Uncategorized

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

Uncategorized

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');
Uncategorized

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!