tomputer

For a project at work this week I needed to modify a Javascript library so that under a particular condition it would generate a JS event that could be handled elsewhere in the application.  Why use JS events rather than just call a regular JS function? Well, I guess partly to maintain consistency with the way that other events are handled within the app, and partly because it’s a more elegant solution: When an event is thrown, if there’s nothing to catch and handle the event it doesn’t matter but when you call a JS function you need to be sure that the function exists otherwise you’ll end up with JS errors on the page so you have to first test that the function exists before you call it. Also an event can propagate up through the ancestory of objects on your page so it can be handled at whichever level is most appropriate or handled in different ways at different levels.

In JQuery the syntax for creating an event handler is exremely simple, for example, given the following HTML:

<div id='container'>
   Click me!
</div>

…the JQuery code to handle for the click event would be:

$('#container').click(function() {
   alert('You clicked me!');
});

In the above example, the “click” method is a shorthand utility method provided by JQuery, but is the same as:

$('#container').bind('click', function(e) {
   alert('You clicked me!');
});

There’s a whole bunch of standard HTML events that the browser may generate in response to user input (and that can be handled in similar fashion). You can also get JQuery to generate these events programatically.

It turns out that you can create a handler for your own custom event in exactly the same way, just change the name of the event (“click” in the example above), to the name of the event you want to create and be sure to use the longhand “bind” method. E.g.

$('#container').bind('myEvent', function(e) {
   alert('My event just fired');
});

Then, when you want to trigger this event, use the err… “trigger” function:

   $('#container').trigger('myEvent');

Because we’re using events rather than a straight method call (and JQuery 1.3 or later) we could write another handler for myEvent but on an ancestor of #container – the document body in this case. The handlers would be called in order, first on #container, then on the body. If we want to prevent the event from bubbling up through the DOM we can kill it with the stopPropagation() function:

$('#container').bind('myEvent', function(e) {
   e.stopPropagation();
   alert('My event just fired');
});

I was surprised by just how simple this was once I realised that the process for custom events is exactly the same as that for standard browser events.

TinyURL bookmarklet in action

If you just want to try this out, drag the link below to your bookmarks toolbar, then click the new bookmark. I’ve only tested in Firefox 3.04 so far so your mileage may vary if you use another browser. Let me know in the comments if you find this useful or have any problems.

Tiny

(v1.1 updated Dec 6th: The generated tiny url is now automatically selected ready to be copied)

Read on for a description of how it works…

Continue Reading »

If you’re viewing this post in your feedreader, head over to the site to see the example graph!

I’ve been experimenting with Javascript libraries for building graphs dynamically in the client browser. In the past if I’ve wanted to create simple bar graphs I’ve used divs and css – an approach has the advantage of being super lightweight (read “fast”) and usually works cross-browser without too much hassle. The big disadvantage is that it’s inflexible (limited to bar graphs and difficult to update the data once the graph has been rendered) and is a pain to code if there’s more than a couple of rows of data to be plotted.

A few minutes on Google last week came up with a couple of examples of Javacript libraries that can produce much fancier graphs. I’ve settled on PlotKit because it produces beautiful graphs, works in the major browsers (using either Canvas or SVG) and has the most developer friendly licence, .

The example below gets a feed of the BT shareprice from Google (fed through a Yahoo Pipe to convert to JSON – the pipe can be reused as it takes the ticker symbol as a parameter). It then iterates over the feed data to populate the graph and finally calls render() on the graph object.

A handy library to keep in your developer toolbox!

Although not relevant for the data I’m graphing here, PlotKit can also draw really sweet pie charts.