Subscribe to Tutorial Feed

Flash and PHP Bible

The Flash and PHP Bible has been released! The book can be found on Amazon or wherever fine books are sold in your area.

The Flash and PHP Bible has a forum for quick support.

Scriptplayground » tutorials » js » Duplicating the YouTube April Fools Joke

Duplicating the YouTube April Fools Joke

Using Javascript to duplicate the YouTube April Fools Joke.

You may have noticed that YouTube (on April 1st) was upside down. I was interested to know how this was achieved and decided to investigate it a little. Turns out they take each character on the page and assigns an equivalent character code which creates a similar result.

This code is clearly not mine, and I never said it was.. it is merely a copy of the special Javascript file that was found on the You Tube web site for this gag.

How does it work as a drop in solution? Well, click here to flip "most" of Scriptplayground on its <head>. Just wait for the page to completely load.

So, now that you know what it is, let's create our own. I have simplified some of the code for this purpose, but feel free to modify to your needs.

Start by creating a new HTML page and paste the following Javascript into the <head> section of this newly created page.

<script type="text/javascript">

function flipItAll() {
	var elements = document.body.getElementsByTagName("*");
	for (var x = 0; x < elements.length; ++x) {
		if ((elements[x].innerText || elements[x].textContent) 
			&& elements[x].innerHTML.indexOf('<') == -1 
			&& (elements[x].nodeName == "DIV" 
				|| elements[x].nodeName == "SPAN" 
				|| elements[x].nodeName == "A" 
				|| elements[x].nodeName == "H1" 
				|| elements[x].nodeName == "H2"
				|| elements[x].nodeName == "LABEL" 
				|| elements[x].nodeName == "B" 
				|| elements[x].nodeName == "OPTION" 
				|| elements[x].nodeName == "TH")) {
			var result2 = flipStr((elements[x].innerText 
				|| elements[x].textContent).toLowerCase());
			if (elements[x].innerText) {
				elements[x].innerText = result2;
			} else {
				elements[x].textContent = result2;
			}
		}
	}
}
 
function flipStr(str) {
	var result = "";
	for (var x = str.length - 1; x >= 0; --x){
		var c = str.charAt(x);
		var r = watchFlipCharset[c];
		result += r != undefined ? r : c;
	}
 
	return result;
}

var watchFlipCharset = {
a : '\u0250',
b : 'q',
c : '\u0254',
d : 'p',
e : '\u01DD',
f : '\u025F',
g : '\u0183',
h : '\u0265',
i : '\u0131',
j : '\u027E',
k : '\u029E',
l : 'l',
m : '\u026F',
n : 'u',
o : 'o',
p : 'd',
q : 'b',
r : '\u0279',
s : 's',
t : '\u0287',
u : 'n',
v : '\u028C',
w : '\u028D',
y : '\u028E',
z : 'z',
1 : '\u21C2',
2 : '\u1105',
3 : '\u1110',
4 : '\u3123',
5 : '\u078E',  /* or u03DB */
6 : '9',
7 : '\u3125',
8 : '8',
9 : '6',
0 : '0',
'.' : '\u02D9',
',' : "\'",
"\'" : ',',
"\"" : ',,',
"´" : ',',
"`" : ',',
';' : '\u061B',
'!' : '\u00A1',
'\u00A1' : '!',
'?' : '\u00BF',
'\u00BF' : '?',
'[' : ']',
']' : '[',
'(' : ')',
')' : '(',
'{' : '}',
'}' : '{',
'<' : '>',
'>' : '<',
'_' : '\u203E',
'\r' : '\n'
};

onload = function()
{
	flipItAll();
}

</script>

The beginning of this code loops through the document and picks out each element, which then digs deeper and pulls out each portion of the text, flipping it over as it goes.

The last step is to add some standard HTML to test out this process. Simply add a div with some text in the <body> of the document. Once that is complete, save it.

<div>
Really long string here.
</div>

I hope you found this interesting and probably can come up with your own use for it.

Follow Scriptplayground on Twitter (@scriptplay)

Comments: Duplicating the YouTube April Fools Joke

No Comments have been made. Wanna be the first?
Add a comment
The ability to add new comments has been disabled in this archived version.

Loading
Main | Tutorials | Articles