You might have noticed the button the front page has our HiringThing mascot peeping out from behind. It's a great way to add some personality, and it didn't take long to whip up a little javascript to get this done.

The code is general enough that you can add the little robot guy to any HTML element. For example, I've added it to this DIV (move your mouse near to see it in action.)

Or I can attach him to this horizontal rule element (again, move your mouse near to see him pop up.)

---

We can also use him multiple times in a coordinated fashion, with different click events for each element. Click on the numbered boxes below to see it in action.

You can see how it works in the example below. The blue box is dynamically added to the target element, and then some location math tells us how to shift the robot background in the box as necessary. The robot is built in a sprite sheet, which allows us to load just one file for the popup and click states.

Feel free to use the code for your own projects (drop me a note if you do something interesting.) Code available below and as a Github Gist, also requires JQuery.

blog comments powered by Disqus