This is first of three different 'ripple text' effects coded in Javascript.
Sample 1 = Random change the display of characters in a text string
Sample 2 = Sequential change display of characters in a text string - colour and case
Sample 3 = Change display of characters in a text string - progressive colour change
This is sample 2: 'Ripple Text - colour and case change'
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
<!--
function open () {return true;}
//-->
</SCRIPT>
<title>Ripple Text Examples by Mark Boyle email mboil@hotmail.com</title>
</head>
<BODY bgcolor=green text="white" bgcolor="green" link="yellow" vlink="yellow"
alink="red">
<font color="yellow">
<SCRIPT LANGUAGE="JavaScript">
var speed = 5; // enter duration time here
var fulltext;
var whichchar=0;
if(navigator.appName == "Netscape")
document.write('<layer id="wds"></layer><br>');
if (navigator.appVersion.indexOf("MSIE") != -1)
document.write('<span id="wds"></span><br>');
function livetext()
{
fulltext="Ripple Text with case and colour change effect."
whichchar = whichchar + 1
if (whichchar==fulltext.length+1)
whichchar=0;
// var whichchar=Math.round((Math.random()*fulltext.length))
switch(whichchar){
case 0:
fulltext = '<b><font face="courier" color="orange">' + fulltext.substring
(0,1).toUpperCase() + '</font><font face="courier" color="orange">' + fulltext.substring
(1,fulltext.length).toLowerCase() + '</font></B>';
break;
case fulltext.length:
fulltext = '<b><font face="courier" color="yellow">' + fulltext.substring
(0,fulltext.length).toUpperCase() + '</font></B>';
break;
default:
fulltext = '<b><font face="courier"><font color="orange">' +
fulltext.substring(0,whichchar).toLowerCase() + '</font><font color="tomato">' +
fulltext.substring(whichchar,whichchar+1).toUpperCase() + '</font><font
color="orange">' +
fulltext.substring(whichchar+1,fulltext.length).toLowerCase() + '</font></font></B>';
break;
}
if(navigator.appName == "Netscape") {
size = "<font point-size='25pt'>";
document.wds.document.write(size+'<center>' + fulltext + '</center></font>');
document.wds.document.close();
}
if (navigator.appVersion.indexOf("MSIE") != -1){
wds.innerHTML = '<p><center>' + fulltext + '</center>';
wds.style.fontSize='25px'
}
setTimeout("livetext()",speed);
}
livetext()
</script>
</font>
</BODY>
</html>
Form Processing : with alert Highlight field name which is not filled by user Categories : Java Script , Form Processing , Data Validation , Beginner Guides , Web Design A ball is attached to your mouse cursor with an elastic cord! Categories : Java Script , DHTML , Graphics Pull Down Surfing - Surf on Change Categories : Java Script , MySQL , HTML and PHP , PHP , Databases Flash Detection Script with loads of features Categories : Java Script , Flash Building dynamic menus with PHP & MySQL (ADO), JavaScript and CSS Categories : PHP , Databases , MySQL , Java Script , User Interface How to check if JavaScript is enabled on a remote browser with PHP Categories : PHP , Java Script This PHP function creates dropdown select lists for time and date that you can change, outputs a 14 char MySQL timestamp in a text field Categories : PHP , MySQL , Java Script , HTML and PHP Bypassing Plugin / FLASH Activation Categories : Java Script , Web Browsers , Security , Flash Mordern Peroidic Table - Science Categories : Java Script , HTML , Charts and Graphs Newbie Notes #9 - Hyperlinking a post Categories : PHP , Java Script , HTML and PHP , Beginner Guides Javascript Color Picker Categories : Java Script , Colors , HTML enhanced date picker with jcript checking for a dynamic date input Categories : PHP , Java Script , Date Time , Calendar , Arrays ezRemoteScripter - A little remote scripting (AJAX) helper Categories : PHP , Java Script , AJAX Validator 98 - a PHP-script to generate form-validation-code in JavaScript. Categories : Complete Programs , Java Script , PHP , HTML and PHP Simple Javascript CSS Digital Clock Categories : Java Script , Date Time , CSS , Beginner Guides , Web Design