Stack OverflowIdeas for web development practical jokes?
[+40] [15] Ellie P.
[2010-03-10 22:20:54]
[ javascript web-development web-design fun frontend ]

I am a web developer for a Django-based site for a student organization, and I have the opportunity to make the website temporarily absurd for a day of general campus-wide debauchery and chaos (long story, doesn't matter.)

What are your best ideas for web development practical jokes (that you could never use in the real world)?

For example, one idea we had was to use a client-side script to convert each character to its upside down equivalent in Unicode [1], sıɥʇ ǝʞıן ƃuıɥʇǝɯos.

I'm not necessarily looking for Django-specific solutions. I imagine most of these things would happen on the front-end. I am also quite aware that usability will suffer considerably--the point is to be fun for a day, and there will always be a link to the normal version of the site.

Also, everything must be relatively cosmetic and easily reversible--I'm happy to swap out static CSS/JS/HTML/templates/images, and even temporarily add a django view, but no messing with the data level!

(2) Hey, maybe if you post the URL to the site we can get some more specific ideas. - FrustratedWithFormsDesigner
(2) @FrustratedWithFormsDesigner I thought of doing that, but I wanted the discussion to focus on general ideas anyone could use, not "mess up my specific website." - Ellie P.
(3) You could add a "Cornify" button to every page. - Michael Myers
See how many of the suggestions below you can implement--rotating each per page load. - steamer25
(2) And don't forget the classic HTTP 418 - I am a teapot - Marco Mariani
[+49] [2010-03-10 22:55:23] BalusC

At a Dutch IT related forum [1] there was ever an 1 April joke with some Javascripts (created by the creator of the fabulous DHTML Lemmings [2] who's the webdev forum moderator over there) which made all pages instantly been broken up by constantly downfloating mining and exploding lemmings.

Some screens:

alt text

alt text

It was really awesome. I unfortunately cannot find the original scripts anywhere (I'll however contact him sooner or later), but it should give some ideas :)

Update: he pointed me the location of the script: It's however specific to, but it should give sufficient ground for some ideas. Here's a blog [3] with some background and explanation how it works.

Have fun!! ;)


(4) +1 for lemmings! - FrustratedWithFormsDesigner
(2) I used my last vote of the day on this post. Everyone upvote this, it's so much better than my idea!!! - Josh
I, too, used my last vote of the day for this idea. It's awesome! Page-destruction, lemmings...wish I'd thought of this =) - David Thomas
haha, love it.. also add crawling insects on the page, and you have a buggy software right there.. - Anurag
How do you integrate this script? I added the script to a page, nothing happens. Tried to calling the Lemmings() function but I just get an error Object.extend is not a function in Firebug. - DisgruntledGoat
Ah yes, the script is specific to the framework. Unfortunately, you'll have to modify/extract the desired logic yourself. At least the idea is clear. - BalusC
[+35] [2010-03-10 22:28:50] Daniel Vassallo [ACCEPTED] = 'rotate(180deg)';['-webkit-transform'] = 'rotate(180deg)';

Ideas for web development practical jokes - rotated screen

(27) That would be even more more interesting if the rotation amount varied by time. Example: Midnight is 0 deg, noon is 180 deg, midnight (the end of the prank day) is 0 degrees again. - FrustratedWithFormsDesigner
(1) hehe... yes that's cool. Unfortunately I noticed that some sites do not handle the degrees between 0 and 180 very well. For example rotating by 90 degrees you'd get a very long horizontal scroll bar. - Daniel Vassallo
@Daniel Thats a good thing! - Earlz
@Daniel: Perfect opportunity to put the Droste effect into action: - Hooray Im Helping
Excellent! Although I take it this will only work in Firefox and Safari. Any ideas for something extra-mean I can do for the 55% of our viewers who still use IE? - Ellie P.
(3) @Ellie P. you could use xhtml 1.1 strict; that could maybe cause them some pain... =p - David Thomas
@Ellie: Hehe, especially if you send your file as application/xhtml+xml. ;) - Marcel Korpel
(2) You should also be able to make this work in IE by using the CSS filter: flipv; In other words, add the line'flipv'; Opera supports some transforms in the latest version, I think. (They also supported some of the MS filters at one point but I doubt the above would work.) - DisgruntledGoat
(5) Scratch that, I think that only works for images. Applying this to the body works for me: position: absolute; filter: progid:DXImageTransform.Microsoft.Matrix(M11='1',M12='0',M21='0',M22='-1', sizingMethod='auto expand'); - DisgruntledGoat
Classic IE! Compare the IE CSS property value to the standard :P (though IE probably did implement it first!) - alex
A clock! setInterval("for(var a=['webkit','moz','ms','o'],i=0;i<a.length;['-'+a[i++]+'-transform']='rotate('+new Date().getSeconds()*6+'deg)');",1000); - JiminP
[+16] [2010-03-11 15:46:45] nickf

A semi-related story:

When I left a previous job, I added some code into our homepage so that for one particular user only, after one minute on the site without changing the page, it would "cornify" it. This meant that should she open the site, then go check emails, when she returned it would be covered in rainbows and unicorns, but it wouldn't be immediately obvious what triggered them (and hence, when she went to show someone, it probably wouldn't happen). There was also a built-in 1% chance per pageload that all the text on the site would be switched to color: #f0f (fuchsia).

The bad part of the story was that she showed her husband who figured it must be a virus, so they raced out and paid way too much money for Norton's or something. After that, my successor (who, like everyone else in the company, was aware of the prank) turned off the cornify action, but -- since she actually loved it so much -- left in the 1% chance of fuchsia text.

(4) I love cornify. I actually put it on a project where it could be activated by typing in the Konami code. - GSto
[+13] [2010-03-10 22:28:20] Hooray Im Helping

One tag to rule them all:


Doesn't blink dramatically slow down the page though? - animuson
(17) @animuson: that depends on how fast your browser can blink. - FrustratedWithFormsDesigner
[+11] [2010-03-10 22:26:59] FrustratedWithFormsDesigner

Give it a "retro" feel. Marque tags with horizontal and vertical scrolling, loudly coloured backgrounds, low-rez animated GIFs galore... And make sure you use the <blink> tag!

oh yeah, and add those stupid animations that follow the cursor everying, like a sparkly unicorn or something awful like that.

(5) I'm thinking along the lines of xkcd's geocities parody. Make sure to have lots of random HTML code everywhere that isn't right and have Visual Basic source in the HTML comments! - Earlz
(3) With or without the many 'under construction' flashing-.gif-based 404s/301s? - David Thomas
(1) Haha, yeah, I thought about doing something like that, but I worry that people might think we're serious. I suppose if I took it far enough they might get it. I wonder if it can be done entirely in CSS and maintain our XHTML-Strict compliance. I do like the cursor idea. Hadn't thought of that. Way old school. - Ellie P.
(1) @Ellie P. I'm so tempted to say something like 'post the code so we can turn it into an anti-ZenGarden...' must resist... =b - David Thomas
(2) @Ellie: Take a look at for inspiration. Also, such a cursor thing can be seen at - Marcel Korpel
[+9] [2010-03-18 07:30:41] Megadix

Just take a snapshot of the website, and substitute the entire page with just that image. People will try to click everywhere, but no chance :)

(2) If you could make it a gif that looked like it was rendering the page you might even catch out the odd geek. - Spence
[+8] [2010-03-11 15:48:06] Sean Vieira

Why not simply add a bit of javascript ( digitalBush's hotLinkr [1]) to do any of the following:

  • cornify - This injects the cornify script from and adds sparkle and happiness on 5 second intervals.

  • translate - Redirects to a google translated version of the site in Swahili.

  • pad - Adds 300px of padding to all divs on the page.

  • hasselhoff - Changes all images on the site to reference a picture of David Hasselhoff with puppies.

  • overlay - Overlays a transparent div on top of the entires page to prevent interaction with the site.

  • flip - Flips all images upside down on the site in IE. Flips the entire page on other browsers.

  • move - Picks a direction and moves the margin body in that direction.

  • spaz - Jiggles the body margin.

  • vroomvroom - Gives the hotlinking site an extra 20hp and 15 ft/lb of torque.

  • rickroll - Self explanatory. (If evil)

It's already been written for you. [2] All you have to do is edit it.


[+4] [2010-03-18 07:27:40] NAVEED
[+3] [2010-03-15 19:15:22] dj_segfault

My favorite website practical joke has always been adding JavaScript to buttons so when you click on a button, instead of performing their actions, the button would move to the other side of the screen. Click on it again and it moves back. You can move around to several different spots.

[+2] [2010-03-10 22:25:47] Jarrod Roberson

Rotating the entire web page would be fun using CSS Matrix Rotations [1].


[+2] [2010-03-19 00:03:54] Ellie P.

We have a comment feature on the site, and I'm looking for a fun way to prevent folks from commenting during this day of mayhem. I'm considering trying to move the "comment" button to a different location on the page when moused over, to prevent the user from ever actually clicking.

(3) What if when they press the Comment button, the site comments on them? "That's quite the hair do you have there..." - T .
[+2] [2010-03-10 22:30:40] Anurag

Animated characters (using GIF or something) walking across the screen. Or maybe a ghost that jumps at you suddenly :)

(3) That's not a practical joke, that Microsoft's new revenue stream on Win Mo 7 Series Zune. - Frank Krueger
[+2] [2010-03-10 22:48:20] The Jug

Use the text shadow tag and some fun coloring options in CSS to make everything in 3D! Find some cheap 3D glasses and start handing them out to people but not inform them why (probably mention something about the importance of them so they just don't go throw them away...).

EDIT: If you wanted to keep it simple, since hyperlinks are usually blue I'll assume yours are, so just add the following CSS code. Not positive if text shadow is supported in all browsers... I just did it in Firefox.

a { text-shadow: 2px -2px red };

But yeah I don't know how cheap even some cheap 3D glasses would be. Still it'd be kinda funny just to put out there. I think most people would get the joke even without the glasses.

Nice idea, but requires real money. Also, do you know of any specific resources on how to 3D-ify a webpage? Seems like it could be tricky. - Ellie P.
Not at all! I'm just thinking in the oldschool red on blue background (or vice-versa... or whichever is used I can't remember off the top of my head). I've editted my answer with some code. - The Jug
[+1] [2010-07-08 21:41:44] user387091

Make every link go to a Rickroll video on Youtube! Oh the fun things that would ensue...

[+1] [2010-03-10 22:28:21] Adam

Put everything in <marquee> tags. Or make everything fall to the ground like this:

That gravity thing is awesome, but I need a cross-platform compatible solution. Less than 1% of our users use Chrome. - Ellie P.
(2) It is written in JavaScript and should work in nearly all browsers. I just tested it in Firefox, it works it's just slower. See here for more information on how to add it to your site. - Adam