Snippet Name: Flip Text Upside Down
Description: Cool effect flips text upside down.
Comment: (none)
Language: JAVASCRIPT
Highlight Mode: JAVASCRIPT
Last Modified: February 27th, 2009
|
Flip text upside down.........
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flip Text » WRITE Upside Down</title>
<script language="JavaScript" src="flip.js"></script>
<style type="text/css">
<!--
@IMPORT url("style.css");
-->
</style>
</head>
<body>
<br>
<br>
<div align="center">
<a href="."><img src="flip-text.gif" alt="flip text write upside down" style=""></a>
<div CLASS="teaser">
How to WRITE upside down IN Twitter, Myspace or my Blog?<br>
Type IN your text and push the "Flip Text" Button. It's cool!
</div>
<br>
<br>
<form name="f" id="f">
<textarea rows="5" cols="50" name="original" style="width:468px;height:100px;"></textarea><br>
<br>
<input type="button" value="Flip Text" onClick="flip()"><br>
<br>
<textarea rows="5" cols="50" name="flipped" style="width:468px;height:100px;"></textarea>
</form>
<br>
<br>
<a href="http://www.fliptext.org" title="flip text - write upside down" class="grey">www.fliptext.org</a>
</div>
</body>
</head>
</html>
==========================================================
style.css:
@charset "utf-8";
/* CSS Document */
body{
color:#666666;
background-color:#FFFFFF;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
}
img{
border:0;
}
h1{
font-family:Verdana, Arial, Helvetica, sans-serif;
margin-bottom: 0px;
font-size:12px;
text-decoration:underline;
font-weight:bold;
}
a{
color:#06b1f0;
text-decoration:underline;
}
a.grey{
color:#666666;
text-decoration:underline;
}
form{
}
textarea{
border:1px solid #92cadf;
}
.teaser{
color:#666666;
}
==========================================================
flip.js:
// JavaScript Document
function flip() {
var result = flipString(document.f.original.value);
document.f.flipped.value = result;
}
function flipString(aString) {
aString = aString.toLowerCase();
var last = aString.length - 1;
var result = "";
for (var i = last; i >= 0; --i) {
result += flipChar(aString.charAt(i))
}
return result;
}
function flipChar(c) {
if (c == 'a') {
return '\u0250'
}
else if (c == 'b') {
return 'q'
}
else if (c == 'c') {
return '\u0254'
}
else if (c == 'd') {
return 'p'
}
else if (c == 'e') {
return '\u01DD'
}
else if (c == 'f') {
return '\u025F'
}
else if (c == 'g') {
return 'b'
}
else if (c == 'h') {
return '\u0265'
}
else if (c == 'i') {
return '\u0131'//'\u0131\u0323'
}
else if (c == 'j') {
return '\u0638'
}
else if (c == 'k') {
return '\u029E'
}
else if (c == 'l') {
return '1'
}
else if (c == 'm') {
return '\u026F'
}
else if (c == 'n') {
return 'u'
}
else if (c == 'o') {
return 'o'
}
else if (c == 'p') {
return 'd'
}
else if (c == 'q') {
return 'b'
}
else if (c == 'r') {
return '\u0279'
}
else if (c == 's') {
return 's'
}
else if (c == 't') {
return '\u0287'
}
else if (c == 'u') {
return 'n'
}
else if (c == 'v') {
return '\u028C'
}
else if (c == 'w') {
return '\u028D'
}
else if (c == 'x') {
return 'x'
}
else if (c == 'y') {
return '\u028E'
}
else if (c == 'z') {
return 'z'
}
else if (c == '[') {
return ']'
}
else if (c == ']') {
return '['
}
else if (c == '(') {
return ')'
}
else if (c == ')') {
return '('
}
else if (c == '{') {
return '}'
}
else if (c == '}') {
return '{'
}
else if (c == '?') {
return '\u00BF'
}
else if (c == '\u00BF') {
return '?'
}
else if (c == '!') {
return '\u00A1'
}
else if (c == "\'") {
return ','
}
else if (c == ',') {
return "\'"
}
return c;
} |
