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 1: 'Random Text'
<!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 = 20;
var fulltext;
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="this is an example of random effect text"
var whichchar=Math.round((Math.random()*fulltext.length))
switch(whichchar){
case 0:
fulltext = '<font color="red">' + fulltext.substring(0,1) + '</font>' + fulltext.substring
(1,fulltext.length);
break;
case fulltext.length:
fulltext = fulltext.substring(0,fulltext.length-1) + '<font color="red">' + fulltext.substring
(fulltext.length-1,fulltext.length) + '</font>';
break;
default:
fulltext =
fulltext.substring(0,whichchar) + '<font color="violet">' +
fulltext.substring(whichchar,whichchar+1) + '</font>' +
fulltext.substring(whichchar+1,fulltext.length);
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 = '<center>' + fulltext + '</center><p>';
wds.style.fontSize='25px'
}
setTimeout("livetext()",speed);
}
livetext()
</script>
</font>
</BODY>
</html>
Java Script which implements a Clock (Client Side) Categories : Java Script , Date Time AJAX Data Grid System using php and mysql. A complete login system with the ability to display data in a grid using ajax. Add , update and delete the records without reloading the page. Categories : PHP , AJAX , Databases , MySQL , Java Script Run a function once per session. Categories : Beginner Guides , Java Script , Cookies The Ajax Tree view class fetches data from a db for the requested parent category id. The data is then stored in an array and converted into JSON (Javascript Object Notation) format. This format is then used by JavaScript for populating tree view. Categories : PHP , PHP Classes , Java Script , AJAX , Databases Form validations using javascript and including all validations in one message Categories : HTML and PHP , Java Script , Form Processing Builds JavaScript that updates the contents of one selector based on another. Categories : HTML , Java Script , PHP , Complete Programs , General Fancy Quick Access Navigation Link Categories : Java Script , Navigation , User Interface , DHTML , Beginner Guides Calendars to choose a range of dates , reservation events ... Categories : PHP , Calendar , Java Script , Date Time showing Help (assistance) to the user while filling html forms. Categories : HTML , Java Script , Form Processing Simple Dhtml tree using DOM Categories : DHTML , Java Script Show and Hide Tables, Table Rows, Form Elements Etc. Categories : Java Script , Beginner Guides Enchancing dd/mm/yyyy forms with unobtrusive javascript Categories : Java Script , HTML , User Interface , Date Time PHP3 generated gif / javascript mouseover. Categories : PHP , Java Script , MySQL Hilight Form Element onFocus Categories : Java Script , Form Processing , CSS Conditional Check - a script that allows a user to submit a form only if the user check a checkbox. Categories : HTML , Java Script , Form Processing , Beginner Guides