Tomorrow is April Fools’ Day and I thought, “This year, Imma gonna do-a sumptin!”  Who am I going to prank?  Battle of the Bits of course!  I don’t think those noobs even know I have this blog.  :/

So… to get started…  we need to detect that it is indeed April 1st, the day of April Fools’.  This can be done with some simple javascript —

var today = new Date();
if (today.getMonth()+'.'+today.getDate()=='3.1') {
/* put your pranks in HERE!! :D */
}


At first glance this looks screwy. We create a Date() object and get today’s month and day. But April 1st != 3.1 – it should equal 4.1 right? Silly javascript! Month values are stored [0..11] instead of one through twelve. I thought maybe the day would be messed up too as it is stored [0..31] but it works correctly. I tested this code by setting my operating systems clock ahead to 4/1. The neat thing about using javascript for the date check is that it uses the visitors’ system clock rather than the servers.

Let’s add a prank : Sound

And for my first prank I will add a sound to every link click. This sound happens to be my own voice exclaiming *KLINK*. Here I add some jQuery, using the .live() method on all anchor tags.

$(document).ready(function(){
$('a').live('click',
function(event) {
event.preventDefault();
$('#footer').before('');
if (!$(this).hasClass('updateAjaxContent')&&!$(this).hasClass('speakerPopout'))
window.setTimeout('window.location="'+$(this).attr('href')+'"',500);
}
);
});

This code is placed inside the date check so it will only run on April Foools’ Day. First, we prevent the default event from the click. Then we insert a hidden <embed> tag that autoplays our sound.  The visitor’s browser should know what to do, automajikally throwing a Windows Media or Quicktime player into the page depending on browser settings.  If you don’t have a #footer, make sure to change that to a place that exists on your page.  Finally, I run a check on the link’s classes to make sure they don’t already have javascript functionality.  If they do, the sound just plays.  If they don’t, we give the browser a half second to play the sound and then move on to the next page.

Another prank : Color

Want to really confuse your visitors? Let’s shift the colors of your layout randomly! Once again I use some jQuery, embed the following code inside the $(document).ready() which is inside the date check.

function dec2hex(a) {
a = parseInt(a).toString(16);
return a.length<2?"0"+a:a;
}

var swatch, r, g, b, color;

randomColor();

function randomColor() {
swatch = Math.floor(Math.random()*5);
r = dec2hex(Math.floor(Math.random()*256));
g = dec2hex(Math.floor(Math.random()*256));
b = dec2hex(Math.floor(Math.random()*256));
color = '#'+r+g+b;
switch (swatch) {
case 0:
$('boxLink:hover').css('background-color',color);
$('body').animate({color:color},2500,function(){randomColor()});
break;
case 1:
$('.boxLink').css('color',color);
$('a').animate({color:color},12500,function(){randomColor()});
break;
case 2:
$('.logo1').animate({color:color},3500,function(){randomColor()});
break;
case 3:
$('.logo0').animate({color:color},1500,function(){randomColor()});
break;
case 4:
$('html').css('background-color',color);
$('body').css('background-color',color);
$('boxLink:hover').animate({color:color},4500,function(){randomColor()});
break;
}
}

I removed over half of the elements I am affecting with the randomly generated colors to make this easier to understand. The variable ‘swatch’ is used to identify which color is being affected in the layout. dec2hex() helps convert the random values to a hex color value. I’m using the callback feature of the .animate() function to keep the colors fluxing (though I don’t see any color fading to another color {a bug?!?!}). If you call randomColor() directly from inside itself the browser will hang or you’ll get a recursive script error.

View Demo Here

Get Source Here

Tested in Firefox and Chrome. I saved a BotB render page to share the effects. I only replaced the links in the main menu and disabled the April Fools check in jqueryAprilFools.js so you can see the prank in actions always!

I hope somebody learns something. :D

Filed under — Web Tutorial
Tags — javascript, jquery, prank, tutorial

You can follow any responses to this entry through the RSS 2.0 feed.