This Week in jQuery, vol. 2

Posted on by

A lot has happened this week in jQueryland. Here are a few highlights:

jQuery Core Development

Brandon Aaron has been on a roll the past few days, fixing bugs and enhancing features for the next version of jQuery. Among the updates committed to the Subversion repository were better support for nested fixed position elements and added support for contexts other than document with the .live() and .die() event delegation methods. See the past week’s timeline here.

Plugins

  • A new release of Haineault’s Timepickr plugin is available.
  • Diego A. has updated his Star Rating plugin.
  • Jason Frame put together a set of “fun little text effects.”
  • The new Flexbox acts as a “replacement for html textboxes and dropdowns, using ajax to retrieve and bind JSON data.”
  • Not really a plugin, Sunday Morning is a fun jQuery-based translation bookmarklet using the Google Translate API.

Tutorials and Blog Entries

Free Book Chapter

Packt Publishing has posted a sample chapter of the new Learning jQuery 1.3 book. You can download the free PDF.

Don’t forget to check out This Week in jQuery UI

This Week in jQuery, vol. 1

Posted on by

This is the first in what we’re hoping to be a weekly series of blog posts about what is going on in the world of jQuery. We’ll take a look at new or updated plugins, recent tutorials, and other jQuery-related news.

Book

Learning jQuery 1.3

Jonathan Chaffer and I (Karl Swedberg) just had our book Learning jQuery 1.3 published by Packt Publishing. It’s an update of the popular Learning jQuery book, which was released nearly two years ago. The new one features additions to the library (event namespacing, JSONP, new effects methods, etc.) introduced since the release of the first book, improved and extended examples, expanded plugins chapters, and a quick reference to all methods and selectors. It’s available on the Packt website and on amazon.com.
Continue reading

jQuery UI 1.7 Released: New domain, New CSS Framework & Dramatic Updates to Controls

Posted on by

We’re excited to announce the release of jQuery UI v1.7, the newest version of jQuery’s effects and UI library. This release culminates many months of development in which a major overhaul of the whole library was performed and a new CSS framework introduced, all in order to provide a professional and easily extensible set of UI controls and effects for jQuery developers. The new CSS framework is especially exciting since it will not only allow for easy theming of jQuery UI controls but also allow plugin authors in general to take advantage of ThemeRoller, the dynamic theme generation application developed by the Filament Group for the jQuery UI project.

Full details of this new & exciting release can be found on the new jQuery UI blog.

jQuery 1.3.2 released

Posted on by

Downloading

jQuery 1.3.2:
http://code.jquery.com/jquery-1.3.2.min.js minified (19kb with Gzipping)
http://code.jquery.com/jquery-1.3.2.js regular (120kb)

Changes

Elements Returned in Document Order

This is a change to jQuery’s selector engine that re-orders the returned results to be in document order, instead of the order in which the selectors were passed in. This change was done in order to be in compliance with the Selectors API specification (which jQuery uses, internally, in browsers that support it).

A sample result:

  // jQuery 1.3.1 (and older)
  $("h1, h2, h3")
  => [ h1, h1, h2, h2, h3, h3 ]

  // jQuery 1.3.2
  $("h1, h2, h3")
  => [ h1, h2, h3, h3, h1, h2 ]

I’d like to thank Diego Perini for pushing us to get this implemented.

.live() Can Now Prevent Bubbling

It’s now possible to call event.stopPropagation() or return false within a callback and have it stop the bubbling of the live event. This means that you can now bind live events inside each other and have the inner handlers prevent the outer handlers from firing.

For example:

  <ul>
    <li><b>Google</b></li>
    <li><b>Yahoo</b></li>
  </ul>
  <script>
    $("li").live("click", function(){
      $(this).addClass("active");
    });
    $("li b").live("click", function(){
      $(this).addClass("active");
      return false;
    });
  </script>

I’d like to thank Iraê for the solution that he proposed for this problem.

For those wondering about the, currently missing, features of .live() (like submit and change events) you can expect all of those to land in jQuery 1.3.3, due to arrive sometime next month.

:visible/:hidden Overhauled

We’ve changed the logic behind the :visible and :hidden selectors (which were used throughout jQuery to determine the visibility of an element).

This is how the logic has changed:
* In jQuery 1.3.1 (and older) an element was visible if its CSS “display” was not “none”, its CSS “visibility” was not “hidden”, and its type (if it was an input) was not “hidden”.
* In jQuery 1.3.2 an element is visible if its browser-reported offsetWidth or offsetHeight is greater than 0.

What does this change mean? It means that if your element’s CSS display is “none”, or any of its parent/ancestor element’s display is “none”, or if the element’s width is 0 and the element’s height is 0 then an element will be reported as hidden.

What is the benefit of making this switch? The result is two-fold:
* The performance is much, much, better. (See below.)
* An element is reported as “hidden” if it’s inside a “hidden” element (something that wasn’t possible before, without the use of a plugin.

I’d like to thank Matheus Almeida for proposing some of the changes that were implemented to improve the performance of these selectors.

.height()/.width() Overhauled

The width and height related selectors have all been overhauled – dramatically improving their speed in all browsers.

I’d like to thank Mike Helgeson for his contributions here which were largely responsible for some of the massive gains that we’re seeing in these methods.

Selector Speed-up in IE

The benefits of the new Sizzle selector engine are really starting to come to light as contributions from the larger JavaScript community come in. A number of additions have landed that have helped to improve the performance of the engine – especially in Internet Explorer.

I’d like to thank Fabio Buffoni for his contributions here which were largely responsible for these speed-ups.

.appendTo()/etc. Now Return Inserted Elements

This is a (minor) API change – resolving a bug in the jQuery API. The methods appendTo, prependTo, insertBefore, insertAfter, and replaceAll all now return the set of inserted elements, instead of the original set of elements.

To understand this change we need to look at a simple example.

Given the following markup, in jQuery 1.3.1 (and older) the following would occur:

  <div></div>
  <div></div>
  <script>
  $("<p/>")
    .appendTo("div")
    .addClass("test");
  </script>

The result in 1.3.1 (and older):

  <div><p class="test"></p></div>
  <div><p></p></div>

This was due to the fact that .appendTo, etc. would only return the elements that were passed in to it, instead of the elements that were actually inserted (and since only a single paragraph was passed in – the first one to be inserted – only the first paragraph had the class added to it).

Thus, if you were to run the same code in jQuery 1.3.2 you would end up with:

<div><p class=”test”></p></div>
<div><p class=”test”></p></div>

Which is the expected result. The only catch is that appendTo, prependTo, insertBefore, insertAfter, and replaceAll all now push onto the jQuery stack (meaning that they’re affected by .end().

We did a survey of existing uses of the above methods and could find no cases where this change would affect any existing code, so we felt safe going ahead with it (especially considering that it’s the expected behavior, to begin with).

Testing

We have a couple announcements with regard to our test suite and our testing methodology in the jQuery project.
* We are now fully supporting, and the test suite is completely passing in, Internet Explorer 8rc1 and Chrome 2 (Nightly) (in addition to our normal selection of browsers).
* The test suite has broken 1500 tests (1504, to be precise).

This means that we now actively test in – and pass the test suite in – 11 browsers: Chrome 1, Chrome Nightly, IE 6, IE 7, IE 8rc1, Opera 9.6, Safari 3.2, WebKit Nightly, Firefox 2, Firefox 3, Firefox Nightly.

(We’re waiting for the next beta of Opera 10 before we begin to support it fully, there are some critical problems with the current beta.)

To measure the performance of different portions of jQuery we used a modified copy of the SlickSpeed test suite to run our tests (adapted to handle non-selector tests). The raw results for the test runs can be found below (all times in milliseconds).

Selector Tests

We used a copy of the Yahoo home page (a representatively complex web page) and used a selection of selectors that people actually use. Targeting selectors that people currently use will help to improve the performance of both existing and future applications.

Frameworks	jQuery 1.2.6	jQuery 1.3	jQuery 1.3.2
IE 6		1059		799		626

:hidden/:visible Tests

We tested both the :hidden and :visible selectors on a number of elements in our test page.

Frameworks	jQuery 1.3	jQuery 1.3.2
Firefox 3	1512		190
Firefox 3.1	1202		161
Safari 3.2	592		80
Safari Nightly	334		43
Opera 9.6	1307		497
IE 6		1948		738
IE 7		1295		830
Chrome		490		30

width/height Tests

We tested both the width, height, innerWidth, innerHeight, outerWidth, and outerHeight methods on our test page.

Frameworks	jQuery 1.3	jQuery 1.3.2
Firefox 3	310		106
Firefox 3.1	281		84
Safari 3.2	146		37
Safari Nightly	166		32
Opera 9.6	345		116
IE 6		313		124
IE 7		283		123
Chrome		113		27

Think You’re Good at CSS & Want a Free Pass SXSW? Check This Contest Out.

Posted on by

jQuery UI sponsor Filament Group is holding an awesome contest:

“To celebrate ThemeRoller’s selection as a finalist for the SXSW Web Award for Technical Achievement, we’re holding a contest to give away one free pass to the SXSW Interactive Festival to the person who creates the coolest use of the new jQuery UI CSS framework.”

Check out the contest post here: Contest: Win a Free Pass to SXSW Interactive for the Coolest Use of the jQuery UI CSS Framework

Quoting Filament:

SXSW badge

We’re really excited about the new jQuery UI CSS framework because it makes it easy to theme UI widgets or even entire layouts with the jQuery UI ThemeRoller web application. To celebrate the nomination and encourage everyone to take advantage of this new framework, we’re holding a contest to see who can demonstrate the most creative use of the framework’s capabilities. The winner will receive a free pass to the SXSW Interactive Festival in Austin, Texas, March 13-17, 2009.

How to get started

First off, download a theme and demo page from jQuery UI ThemeRoller and review the jQuery UI CSS framework documentation to get an idea of how the framework is used. Then head over to the jQuery UI site and grab the handy Firefox ThemeRoller bookmarklet to help you test your styles as you build your project. If you’re creating a demo page, we strongly suggest that you include the Theme switcher dropdown to let people quickly sample ThemeRoller themes on your page and really show off the theming in action.

Remember, the CSS framework is not just for jQuery plugins — framework styles can be used with any Javascript library or your own custom markup. We’d be thrilled to see how far you can go with a cool WordPress template, corporate website, widget or even a game to show the power and flexibility of this system. Feel free to use multiple scoped, themes, too — go wild.

How to enter

We’re going to keep this simple: post a comment with a brief description of your project and a link to a functioning example. The winner will be decided by Filament Group based on the creativity, quality and inventiveness of their project.

Contest rules

  • Everyone is eligible, no exceptions.
  • You may submit any type of project that uses the jQuery UI CSS framework: public sites, demo pages or anything else that shows off your creativity and is publicly accessible (read: not behind a login).
  • You may enter as many unique projects as you wish; each will count as a separate entry. (Please don’t post the same one over and over…that may count against you).
  • The entry deadline is Wednesday, February 25, 2009 at midnight.
  • The contest winner will be announced on Friday, February 27, 2009.
  • The winner will receive a single pass to the SXSW Interactive Festival, which includes admission to the SXSW Web Awards ceremony on Sunday, March 15. We will email you an access code that will allow your to register for free. (NOTE: the pass does not provide entry to the Film or Music festivals, nor does it include transportation, room/board, or meals — you’ll need to cover those yourself.)
  • jQuery UI and Filament Group Inc. reserve the right to link to your project (we want to promote your hard work).

A little inspiration

To show off what is possible with the jQuery UI CSS framework, here is a really fantastic example of a plugin that uses the framework really well, from styles to icons. Nicolas Rudas created a very cool Apple-style file browser that also includes the theme switcher dropdown for good measure. He’s taken this a step further by creating a jQuery API browser that uses his plugin. Very cool indeed.

(NOTE: Nicolas Rudas was not notified prior to the announcement of this contest, so Nicolas, if you’d like to enter you’re still eligible to win. How’s that for competition?)

image

There is a list of plugins that use the CSS framework on the documentation wiki but it’s pretty short at the moment and we’re hoping that this contest really gets people fired up to try out the framework for themselves.

So…get to it, show us what you’ve got!

Check out the contest here: Contest: Win a Free Pass to SXSW Interactive for the Coolest Use of the jQuery UI CSS Framework

jQuery UI 1.7 is the new 1.6

Posted on by

The jQuery UI team has been working for over 9 months on the 1.6 release and during this long process, we’ve deeply re-factored every plugin and introduced a very big shift in how we write markup and styles with the new jQuery UI CSS Framework. Also during that time, the jQuery core library released the new 1.3 version which incorporates a lot of improvements that we wanted to leverage.

We hear ya

We clearly have heard the confusion as these fairly large changes were made between release candidates in the 1.6 development cycle (post 1.6rc2). Based on feedback from the jQuery UI community, we want to address the confusion around compatibility between jQuery 1.2.6 and 1.3 and the jQuery UI library by creating two very distinct releases in the next few weeks:

1.6rc6 plus fixes will become 1.7 (compatible with jQuery 1.3+)

What we are currently calling jQuery UI 1.6rc6 is going to be released as jQuery UI 1.7. This code is built from the ground up to take full advantage of jQuery 1.3 and the new jQuery UI CSS Framework and is different enough to warrant a dot release. After a lot of analysis, we’ve decided that compatibility with both 1.2.6 and 1.3 is not feasible in a single UI release while still having a maintainable and lean codebase, so this version will not be compatible with jQuery 1.2.6 or earlier.

1.6rc2 plus fixes will become 1.6 (compatible with jQuery 1.2.6)

For all those folks still actively using jQuery 1.2.6, we want to provide a legacy release of the jQuery UI library based on 1.6rc2 that ports over as many bug fixes and improvements as possible from more recent code updates to provide a clear, stable foundation that will be fully compatible with jQuery 1.2.6. To avoid any confusion, this version will be called jQuery UI 1.6 final. Since this will be a legacy release, the team will not be actively developing this code once it is finalized. Also, this release will not contain any changes related to the new jQuery UI CSS Framework. It will have the same theming support as jQuery UI 1.5.3.

We understand that this is a fairly large change and welcome input from the community on how to make the upgrade as smooth as we possibly can. A complete upgrade guide will be posted shortly to guide you on a plugin-by-plugin basis to help ease the transition.

Current Release Status

We received a lot of great help testing the latest release candidate, 1.6rc6, and are fixing the final few issues, so that it can be released as soon as it’s ready. A current summary status of the release can always be found on the front page of our Dev and Planning wiki ( http://wiki.jqueryui.com/ ). We are very excited about the quality of this new jQuery UI release because it will serve as a solid foundation that will give us a stable API and let us release more frequently throughout the year with updates and new widgets.

Weekly releases coming

Starting in March we will switch to a weekly release mode. Each week we will alternate between pushing a stable bug fix release (1.7.1, 1.7.2, etc.) and a preview release (alpha, beta, rc) including new plugins and functionality. So each branch will receive an update at most every two weeks. If we need an additional release in-between or we need to add an extra beta or rc, we will do so on a week-to-week basis, adjusting the rest of the roadmap accordingly. Our goal is to work toward a 6-8 week release cycle (2-3 weeks alpha, 2-3 weeks beta, 1-2 weeks rc, then final).

Download builder update

We have pushed a complete update to the Download Builder. It is now fully integrated with ThemeRoller so that you can download a customized jQuery UI library zip including a pre-built or custom theme. We’ve also fixed up some issues that existed with downloading an invalid zip file in IE and also 1.5.3 minified files.

Thank you for your help and support

We want to thank the community for it’s support and encourage your participation in helping us to develop the best UI library on the planet. If you are a developer who is interested in helping us with bug fixing, please feel free to post a message on the ui-development group ( http://groups.google.com/group/jquery-ui-dev ) and ask how you can help out.

jQuery UI 1.6rc6: Help us test!

Posted on by

jQuery UI 1.6rc6 is available.

Download jQuery UI 1.6rc6
You can download the entire development bundle directly at

http://jquery-ui.googlecode.com/files/jquery.ui-1.6rc6.zip

This includes a default theme, as well as all the test and demo files. Or you can create a customized download of individual components

http://jqueryui.com/download/

and a custom theme at

http://jqueryui.com/themeroller

This is the final step before releasing 1.6 final tomorrow (Saturday night). Since we only have two days, we really need you help us test if there are no major blockers left we might have overseen. Please create a ticket for any issue you find on the jQuery UI bug tracker:

http://dev.jqueryui.com/ (note: requires registration)

and send a note for discussion on the jQuery UI Development mailing list as well:

http://groups.google.com/group/jquery-ui-dev

Thanks everyone, prepare for a great weekend!

jQuery Meetup in San Francisco

Posted on by

There are a few jQuery guys in San Francisco this week and we thought it’d be fun to have a meetup. John Resig (Creator of jQuery), Rey Bango (Head of jQuery Evangelism Team) and Yehuda Katz (Rails Core Contributor, jQuery Team Member) will all be meeting up tomorrow night (the 29th) if you want to say ‘hi’.

More information can be found on the Upcoming.org site for the event – feel free to add yourself if you’re interested in coming:
jQuery(“#drinks”).imbibe();

jQuery 1.3.1 Released

Posted on by

Welcome Digg users! You may be interested in the full jQuery 1.3 release, which just happened on the 14th. Enjoy!


This is a bug fix release for jQuery 1.3. You can view the full list of what was fixed on the bug tracker.

There are no significant changes in 1.3.1 from 1.3 other than straight bug fixes. If you are still using jQuery 1.2.6, and looking to upgrade, please upgrade directly to this release.

Downloading

A copy of jQuery 1.3.1 is also available on Google’s CDN (feel free to copy the URL directly into your site):

If you wish to checkout the full release from the Subversion repository, you can do so by following the following instructions and checking out the source from the following location:

svn co http://jqueryjs.googlecode.com/svn/tags/1.3.1

A couple quick housekeeping notes:

Some noted in the release notes for 1.3 that we missed testing on Firefox 2, even though we still support it. This was a mistake on our part: We still support Firefox 2 and test on it prior to releases. You can see the full test suite run below.

jQuery 1.3.1

It was also noted that Safari 2 didn’t show up in the list of browsers that we tested against prior to the 1.3 release. This is correct – we are phasing out support for Safari 2 in jQuery. Considering that Safari 2 shows no appreciable market share and has been superseded by 3 separate Safari releases (3.0, 3.1, and 3.2) we no longer see a need for significant testing against that release.

Finally, a few users noticed that we no longer provide a “packed” version of jQuery (a version of jQuery run through Dean Edwards’ Packer with Base62 encoding turned on). We did this for a couple reasons:

  • Packed scripts are significantly harder to debug (even harder than minifed scripts).
  • Packed scripts aren’t able to run on all platforms without issue (such as Adobe AIR and Caja-capable environments).
  • But most importantly: Packed scripts are slower for the user than what you would get from using just minification. This may seem counter-intuitive since a packed script’s file size is smaller than a minified script but the final load time ends up being much higher (due to the decompression step it must go through). We have some data regarding the loading performance of minified scripts vs. packed scripts, for those that are interested.

The minifed copy of jQuery that we provide, run through the YUI Compressor, should be the optimal form of jQuery to use in a production environment (served using gzipping, if possible).