OK, so people are probably going to know it's a joke, but I thought I would share. I'm going tot be posting this on our intranet at work. feel free to steal/re-adapt or make /suggest improvments.
Description : It basically starts off with some dummy error messages that move around when you click on them. I used the cookie plugin to keep track of whether or not people wanted to see the joke again or just hide it altogether ( you know how some people at work are)
( i didnt make it very portable)
http://dansplace.x10.mx/joke/
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>April Fool's Joke with jQuery</title>
<script type="text/javascript" src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js">
</script>
<script type="text/javascript">
//<![CDATA[
/* this function from:
* http://www.admixweb.com/2010/08/24/javascript-tip-get-a-random-number-between-two-integers/
*/
function randomFromTo(from, to) {
return Math.floor(Math.random() * (to - from + 1) + from);
}
var count11 = 1;
function moveRandom(id) {
/* get container position and size
* -- access method : cPos.top and cPos.left */
if (count11 >= 1 && count11 < 11) {
if (count11 === 1) {
count11 = 2
}
var cPos = $('#container').offset();
var cHeight = $('#container').height();
var cWidth = $('#container').width();
// get box padding (assume all padding have same value)
var pad = parseInt($('#container').css('padding-top').replace('px', ''));
// get movable box size
var bHeight = $('#' + id).height();
var bWidth = $('#' + id).width();
// set maximum position
maxY = cPos.top + cHeight - bHeight - pad;
maxX = cPos.left + cWidth - bWidth - pad;
// set minimum position
minY = cPos.top + pad + 5;
minX = cPos.left + pad + 5;
// set new position
newY = randomFromTo(minY, maxY);
newX = randomFromTo(minX, maxX);
$('div').animate({
top: newY,
left: newX
}, 600, function () {});
$('#box img').attr('src', '/images/joke/remove0' + count11 + '.png')
count11++
}
if (count11 >= 11) {
var bb;
bb = confirm("Hope you enjoyed my little joke. \nClick OK to never see this again.\nClick Cancel to temporarily save a link to my joke in the corner of this page.")
if (bb) {
//set cookie as nomore
// hide joke
//hide link
$.cookie('replayjoke', 'nomore', {
expires: 7
});
$("#jokelink").hide();
$("#box,#container").fadeOut();
$("#info").show();
} else {
count11 = 1
//set cookie as playagain
//hide joke
//display link
$.cookie('replayjoke', 'playagain', {
expires: 7
});
$("#jokelink").show();
$("#box,#container").fadeOut();
$("#info").show();
$('#box img').attr('src', '/images/joke/remove0' + count11 + '.png')
$('#box img').attr({
'left': '35%',
'top': '25%'
});
}
}
}
//cookie script
/*!
* jQuery Cookie Plugin
* https://github.com/carhartl/jquery-cookie
*
* Copyright 2011, Klaus Hartl
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://www.opensource.org/licenses/mit-license.php
* http://www.opensource.org/licenses/GPL-2.0
*/ (function ($) {
$.cookie = function (key, value, options) {
// key and at least value given, set cookie...
if (arguments.length > 1 && (!/Object/.test(Object.prototype.toString.call(value)) || value === null || value === undefined)) {
options = $.extend({}, options);
if (value === null || value === undefined) {
options.expires = -1;
}
if (typeof options.expires === 'number') {
var days = options.expires,
t = options.expires = new Date();
t.setDate(t.getDate() + days);
}
value = String(value);
return (document.cookie = [
encodeURIComponent(key), '=', options.raw ? value : encodeURIComponent(value), options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
options.path ? '; path=' + options.path : '', options.domain ? '; domain=' + options.domain : '', options.secure ? '; secure' : ''].join(''));
}
// key and possibly options given, get cookie...
options = value || {};
var decode = options.raw ?
function (s) {
return s;
} : decodeURIComponent;
var pairs = document.cookie.split('; ');
for (var i = 0, pair; pair = pairs[i] && pairs[i].split('='); i++) {
if (decode(pair[0]) === key) return decode(pair[1] || ''); // IE saves cookies with empty string as "c; ", e.g. without "=" as opposed to EOMB, thus pair[1] may be undefined
}
return null;
};
})(jQuery);
//end cookie script
$(document).ready(function () {
if ($.cookie('replayjoke') == null) {
$("#box,#container").show();
} else if ($.cookie('replayjoke') == "nomore") {
$("#box,#container").hide();
$("#jokelink").hide();
$("#info").show();
} else if ($.cookie('replayjoke') == "playagain") {
$("#box,#container").hide();
$("#jokelink").show();
$("#info").show();
}
$("#jokelink").click(function (e) {
e.preventDefault();
$("#box,#container").show();
});
$("#box").click(function () {
moveRandom('box')
});
});
//]]>
</script>
<style type="text/css">
/*<![CDATA[*/
#top {
margin: 0 auto;
background: #d3d3d3;
text-align: center;
padding: 10px;
width: 500px;
margin-bottom: 10px;
}
#container {
margin: 0 auto;
width: 800px;
height: 500px;
padding: 10px;
}
#box {
position: absolute;
left: 35%;
top: 25%;
}
/*]]>*/
</style>
</head>
<body>
<div id="info" style="display:none;">
<p>I used the following code to make this joke, all images are free to use, the cookie plugin and rnadommove plugin should have comments left in.</p>
<ul>
<li>
Random move code original source = <a href="http://superdit.com/2010/12/25/moving-element-to-random-position-inside-a-container/">http://superdit.com/2010/12/25/moving-element-to-random-position-inside-a-container/</a> </li>
<li>Cookie code source = <a href="https://github.com/carhartl/jquery-cookie">https://github.com/carhartl/jquery-cookie</a> </li>
<li>images generated with = <a href="http://atom.smasher.org/error/">http://atom.smasher.org/error/</a> </li>
<li>click here to reset the cookie - <a href=
"javascript:$.cookie('replayjoke',%20null);alert($.cookie('replayjoke'));">reset
cookie</a></li>
</ul>
</div>
<div>
<a id="jokelink" href="#" name="jokelink" style="display:none;">Play Joke Again</a>
</div>
<div id="container">
<div id="box"><img src="../images/joke/remove01.png" /></div>
</div>
</body>
</html>
Before you post, read our: 
April fools joke
