CoderZone.org

Category: >> JavaScript >> Flip Text Upside Down Bookmark and Share

<< lastnext >>

Snippet Name: Flip Text Upside Down

Description: Cool effect flips text upside down.

Comment: (none)

Author: CoderZone
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  &raquo; 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;
}
 
There haven't been any comments added for this snippet yet. You may add one if you like.  Add a comment 
© coderzone.org | users online: 34