Tech

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.

1
2
3
4
5
 


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.

 

Written by

Joshua Siler is the Founder and CTO of HiringThing, an online application provider dedicated to changing the way small and medium businesses hire talent. You can learn more about HiringThing at http://www.hiringthing.com.
blog comments powered by Disqus