Mr Speaker


Warning: count(): Parameter must be an array or an object that implements Countable in /home/mrspeak/public_html/wp-content/themes/stuartspeaker/functions.php on line 24

Warning: count(): Parameter must be an array or an object that implements Countable in /home/mrspeak/public_html/wp-content/themes/stuartspeaker/functions.php on line 27

Adding “1UP notification” with jQuery

mario scoreNow, as many of you know, I'm a big fan of taking interactions from retro gaming and attempting to squish them onto the page as standard UI elements. If I had my way, all sites would look like BMX Simulator from the C64. With that in mind... today something great happened. A win for old-school-gaming-as-ui-elements unmatched since CSS sprites were invented: Jeremy Keith's 1UP notifications! Don't simply let your user know they've "added a friend", let them feel like they "added a friend" AND scored 1000 points! 1UP notifications just have to storm the web with their awesomeness, and we need to do our best to help them.

Get some points:GO!1000

Of course, you won't have "1000" popping up... you'll have "added" or "removed" or "dugggg" or something a bit useful to the end user. I don't care about end users, so I'll have "1000".

In the spirit of trying to get the effect to take over the web, I thought I'd throw together a jQuery plugin for sticking them on your site. The jquery.oneup.js plugin is very straightforward - it just animates an element upwards while fading out: 1UP style! To use it, just make your typical notification element position:relative, or position:absolute - whatever it takes to make it movable! (I'll fix this in the next version). For the demo, I've styled my notification message like so:

...
<input type="submit" id="go" value="go" />
<span id="loadn">load</span>
...
#loadn{
	position:relative;
	left:-30px;
	top:-4px;
	display:none;
}

The element then sits "invisibled" over the "go" button, ready to fly... Next we wire up our 1UP functionality with the plugin:

$("#go").click(function(){
	$("#loadn").oneUp();
});

YES! That is so cool: check it in action. The plugin accepts parameters speed (as a jQuery time - like, 'slow', 'fast' or 1000) and distance (how many pixels it travels upwards). You can also specify a callback if you need to do something after the notification completes (like in the demo).

Well, I'm pretty stoked with this turn of events. I've got to go back through every single site I've ever done and add way-too-many of these lil' fellows in. The jquery.oneup.js plugin needs a bit of work: so it handles positioning all by itself, and so forth... I'll let you know as soon as that's done. But in the mean time, I've got a highscore to go beat...

10 Comments

  1. Cool nerditry champ.

    Doesn’t do much on Chrome for Mac (4.0.237.0) but I suppose I should expect that.

    Monday, November 16, 2009 at 11:55 pm | Permalink
  2. Ah ha… ’cause it was actually posting back, and Chrome was fast enough to kill the effect!

    Chrome on Mac hey? Are you Mac-ed up now?!

    Tuesday, November 17, 2009 at 7:32 am | Permalink
  3. Could we get a demo?

    Maybe you’ve linked to a demo… your links are hard to spot *grumble*

    Lucky you’re not behind a payed content wall or I’d be a furious paying customer!!!!!

    Tuesday, November 17, 2009 at 3:42 pm | Permalink
  4. Yeah there is a “demo”, and yeah it is hard to spot. Maybe a bit tooo easy at the moment… I’ll fix that on the weekend. I made “link-free” demo just for those who like spoilers..

    But don’t worry – I would never put stuff behind a paid content wall, have advertisements, or have paying customers ’cause that makes the internet a stinky crappy place.

    Tuesday, November 17, 2009 at 4:23 pm | Permalink
  5. As I’ve told you, this is beautiful. In fact I implemented it on the weekend for something. And discovered a bug :)

    Which is why it should be on the ‘hubs, dude!

    I’ll write that post about that, but meanwhile, your callback doesn’t work. Your settings.callback is entirely in the wrong place :)

    Should look more like this:
    http://gist.github.com/243421

    Thursday, November 26, 2009 at 10:18 pm | Permalink
  6. Major awesomeage… I’m sure I’ll be able to find somewhere to impliment that. Cheers!

    Tuesday, December 1, 2009 at 2:45 am | Permalink
  7. try pressing the button multiple time and see the “1000” go up continously up to the top :D

    Sunday, January 10, 2010 at 5:11 pm | Permalink
  8. That’s a pretty fun game you discovered, almostdead!

    Tuesday, January 12, 2010 at 2:50 pm | Permalink
  9. Thanks Mr Speaker.

    I implemented this in a site yesterday afternoon.

    Implementation was easy.

    Worked perfectly in every browser I tested, first time.

    The effect is very useful and nice visually.

    Nice work.

    Cheers

    Saturday, January 16, 2010 at 5:58 pm | Permalink
  10. Excellent plugin! Thank you, man! I was looking for it soooo long! Great work!

    Friday, December 7, 2012 at 7:19 am | Permalink
Captcha! Please type 'radical' here: *
How did you find this thingo? *