Category Archives: Tutorials

Award Firework Alternative with jquery.imgExplosion

Don’t ask me why, but I needed a way to explode some stars in a fancy animation on a page. At first I found Fireworks.js, which was kinda cool at first–but I quickly realized a few things:

1. It’s using raw javascript, which is a pity if you are already loading the power of jquery and jquery.ui
2. It wasn’t what I really wanted. I wanted STARS!

So, I bring you, jquery.imgExplosion:

Although, the default implementation uses a star graphic I whipped up in Illustrator:

You can still attach the plugin to any image–either on the page or not. Soccer balls? Severed heads? I don’t care what you do with it but FORK the code if you’ve got improvement ideas.
Check out the Demos Page for examples.

Download/Fork on Github


follow on Twitter

Inline Code Assistance for Form Fields with jquery.codeassist

I’m working on a project that required some apparently previously unexpected UI controls. One of them, I decided should be made into a jQuery plugin and get some feedback from the community. I call it jquery.codeassist.

OK… so what the hell does it do?

The plugin creates a code assist menu within textarea and input fields, which allows users to select from a list of suggested values. This effect is triggered by the entry of a key character such as %, $ or [

So far, only %, $ and [ (with an optional closing key of ]) are supported–though, with some tweaks, I know I can get it to accept any input.

OK… but really, what the hell does it do?

It was built for the purpose of allowing users to enter dynamically replaceable code bits into textareas and input fields. A use case example would be if you are allowing users to create a page template or message template that will need to be filtered for the audience or some other situation involving different values for different pieces of data at a time. A user can enter in the code bits, which you can replace behind the scenes in the template.

OK… so is there a real world example?

Since the impetus for this plugin comes from a proprietary and as of yet unseen stealthy startup, I’m not at liberty to show the awesome reason why I found it necessary to create this plugin. But here’s a totally crappy and simple demo so you can see what the hell I’m actually talking about:
Crappy, Simple Demo

And you can download, fork and whatnot on github:
Source on GitHub

Issues I had with the implementation

Mouse position

The thing that is bugging me most at the moment is that I wanted the menu to appear where the mouse is. Simple enough, right? Just take a look at the triggered event pageX and pageY, right? Well, that would work if I was attaching to a mouse event–but the trigger for the menu is a key event, which doesn’t care about the position of the mouse. So to get around this, I’ve got a listener that’s caching the mouse coordinates so we can look at it when we need to:

// this is stupid but I can't find a better way to get the current mouse position
// since the key events don't contain the pageX and pageY 
// so following it around and caching the position :(
	codeassist.pageX = e.pageX;
	codeassist.pageY = e.pageY;

I am genuinely annoyed about this.

Cursor position

For sane browsers, you can simply access element.selectionStart to get the index that the cursor is positioned within the text. However, for IE, you have to hack up a nasty solution:

... // up here, we've defined el as the input, v as the current value of the input, and t = $(this), etc..
var before = ''; // text before cursor
if (el.selectionStart!==undefined){ // sane browser
	before = v.substring(0,el.selectionStart);
}else{ // IE
	var range = document.selection.createRange();
	range.moveStart ('character', -v.length);
	before = v.substring(0,range.text.length);

follow on Twitter

Deck of Playing Cards in JavaScript

So, I drank a whole pot of coffee yesterday. And it was a black, black, pot of coffee–like the soul of an exploded quasar, black. Twelve hours later (midnight), I was buzzing. So, what did I do? I wrote a jQuery library.

Check out the project on github: jquery.playingcards.

Check out a demo here. The demo just writes the cards to the page and allows you to click them to flip the cards. Will add buttons for the other behaviors (shuffle, pile, etc) soon.


I used jQuery as a base (it’s a jquery plugin). However, this code could easily be extracted out to be used with any other JavaScript framework or even stand alone.

The cards are drawn mostly in CSS, using images only in the case of face cards–though, I have committed an open source card font that will eventually be implemented as a configuration option in place of the css/images. The images are courtesy of David Bellot with his awesome SVG card set.


  1. I wanted to use github since just about every cool project I’ve seen in the last 6 months is hosted there.
  2. I wanted to make a public jQuery plugin (made a few before but only proprietarily for companies so I couldn’t share them)
  3. When interviewing developer candidates, I frequently ask that the person code a deck of cards with a few simple methods (init, shuffle, deal) and I realized that although I had thought a lot about this problem and seen other peoples code, I hadn’t taken the time to write my own
  4. Doesn’t everyone need a deck of cards? Why not have one in your JavaScript arsenal?

Get Involved

There’s still a lot that can be added to this library. If you want to develop a game pack extension for it, let me know. Wouldn’t it be cool to have a generic deck of cards and set of rules for every card game known to man, all written in JavaScript? I think so.


  • Buttons for running demo methods (shuffle, deal, pile, etc)
  • Handling for including card.ttf as a font replacement for the css images (if set in config)
  • Keeping track of hands/players? — probably an extension along with game rules
  • Game rule packs (maybe these will extend a board that keeps track of hands, players, score, etc

Let the games begin!

follow on Twitter