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.
Print It
©2004 - 2010 scriptplayground | Privacy Policy | Legal
Validate Site: XHTML CSS | Designed by: Matthew Keefe of mkeefeDESIGN