Event Selector Showdown

Posted on by

Simple Challenge: Find all the LI elements underneath two different elements (using their #ID as reference) and bind a click handler which changes the color of the LI’s text. Here is how you would do that in all of the popular event/selector libraries.

Behaviour + Prototype

Behaviour.register({
  '#item li': function(element) {
    Event.observe(element, 'click', function(event) {
      Event.element(element).setStyle({color: '#c00'});
    });
  },
    
  '#otheritem li': function(element) {
    Event.observe(element, 'click', function(event) {
      Event.element(element).setStyle({color: '#c00'});
    });
  }
});

Prototype 1.5.0

$$('#item li, #otheritem li').each(function(li){
  Event.observe(li, 'click', function(event) {
    Event.element(li).setStyle({color: '#c00'});
  });
});

event:Selectors

EventSelectors.start({
  '#item li:click, #otheritem li:click': function(){
    this.setStyle({'color': '#c00'});
  }
});

jQuery

$("#item li, #otheritem li").click(function(){
  $(this).css('color', '#c00');
});

I like to think that the code speaks for itself, as to which one is the easiest to use and understand. I find it interesting how Prototype is migrating closer to what jQuery has now – while jQuery itself is blasting away with some very cool new stuff. Definitely keep your eyes peeled for new releases, as they’ll be coming soon.

Plazes Redesign

Posted on by

Recently Plazes (a popular geolocation web application) put up a redesign of their service. If you take a peek at how it’s doing it’s cool effects, underneath the hood, you’ll see that it’s making good use of jQuery.

The best place to see it in action is on the Plazes People page. The purpose of the page is to allow you to browse around and see what other people are connected and where they’re currently located. This page has a number of cool features that you can play around with:

  • Try moving/zooming the map – the list of people on the left-hand side of the screen will dynamically change and reload.
  • In the input box at the top of the map, enter in part of a city name and it will auto-complete it with the most relevant name.
  • Clicking a user in the left-hand menu will take you to where they’re located on the map.

All in all, it’s a great example of what’s possible with jQuery, Google Maps, and a great dev team to tie it all together.

Firebug Debugger

Posted on by

Joe Hewitt is working on updating his excellent Firebug Firefox extension. If you’re not familiar with it, you should be. It provides detailed per-page error tracking, XMLHTTPRequest tracking, DOM Navigation – everything that a Javascript developer needs.

The new version of Firebug is adding one more feature: Javascript debugging. This will allow you to set break points in your code, pause the application, restart it, and all sorts of cool stuff. If this sounds interesting to you, you should contact Joe, as he needs testers to help him get this off the ground.

Thickbox

Posted on by

Cody Lindley just released a brand new version of Lightbox/Greybox called Thickbox. This release offers some great, added, functionality over the other libraries. Specifically, this release is completely unobtrusive – it uses the natural href, src, and title attributes to seed the box, when it pops up. Even if you don’t have Javascript enabled, it still behaves naturally. It is also capable of dynamically loading blocks of html and displaying it in the overlay. In all, it’s a great release, not the least of which is the fact that it uses jQuery to pull it all together. So check it out, play with it, and let Cody know what you think of it!

jQuery Visual Map

Posted on by

Jeffery Chiang recently submitted an excellent visual representation of the jQuery library, to the jQuery mailing list. It shows all the different plugins and what methods/features they support (borrowed from the jQuery Documentation). Similar diagrams have been done for the Prototype library – but none of them have the cool Devo hat of jQuery to go along with it. If anyone is feeling adventurous, using the styles of this map would make for an awesome redesign of the documentation page.

Winning Opera Widget Uses jQuery

Posted on by

Audun Wilhelmsen (skyfex), a jQuery user who lives in Norway, recently attended The Gathering, one of the largest computer events in the world. While there, he competed in an Opera-sponsored widget development contest. The new Opera 9 Beta has a whole widget framework, that’s sure to challenge Yahoo! Widgets and OSX Dashboard.

Once the final analysis was done by the judges, they decided that Audun was the winner. Not only is this great news for him (he won a $6000 mega gaming machine), but it just goes to show how effective jQuery is for fast Javascript development.

Audun’s winning application is called KnowledgeMate. You enter your search into a single field, and it searches a number of search engines simultaneously (including image search engines), and returns the relevant results. It’s very fast, looks sharp, and is quite handy. I definitely recommend downloading the new Opera beta to give this widget a try, if for nothing else. Congrats Audun!