Buttons With a Surprise

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.)

Move your mouse here

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.






Robot sprite sheet…

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.

Target Element

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.


Author: HiringThing

HiringThing is easy to use, intuitive online recruiting software that makes it easy to post jobs online, manage applicants and hire great employees.