JavaScript Collector

[JavaScriptBank]

Good and Nice JavaScripts

Obtaining the URL of the Referring Document

Use this JavaScript snippet to obtain the URL which referred the user to that page. Be aware that on some servers this may not work.... detail

Demo: Obtaining the URL of the Referring Document

How to setup

Step 1: Use JavaScript code below to setup the script
JavaScript

<script type="text/javascript">
<!--

// Created by: Chris Stimpert :: http://ilovethecode.com/

function refer() {
  if (!document.referrer) {
    document.write("No referrer, pal.")
  }
  else {
    document.write(document.referrer);
  }
}
//-->

</script>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Step 2: Copy & Paste HTML code below in your BODY section
HTML

<script type="text/javascript">
  refer();
</script>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Originally Posted by Copyright

The Site may provide, or third parties may provide, links to non-JavaScriptBank.com Internet World Wide Web sites or resources. Because JavaScriptBank.com has no control over such sites and resources, you acknowledge and agree that JavaScriptBank.com is not responsible for the availability of such external sites or resources, and does not endorse and is not responsible or liable for any content, advertising, products, or other materials on or available from such sites or resources. You further acknowledge and agree that JavaScriptBank.com shall not be responsible or liable, directly or indirectly, for any damage or loss caused or alleged to be caused by or in connection with use of or reliance on any such content, goods or services available on or through any such site or resource.

[JavaScriptBank]

Click the button until there are three same numbers.... detail

Demo: Click Random Number Button

How to setup

Step 1: Place HTML below in your BODY section
HTML

<form name="f">

<font face="Comic Sans MS" size="5" color="#000080"><b>Click 
the button and the value of the other three buttons change random.</b></font><p align="center"><font face="Comic Sans MS" size="5" color="#000080"><b>
If the three values become equal then you win..........</b></font><br>
<input type="button" value="         CLICK        " name="C"> <br>

<input type="button" value="   " name="b1"> 
<input type="button" value="   " name="b2"> 
<input type="button" value="   " name="b3"> 

</form>
<script language="vbscript">
Randomize
l=6
u=8
cl=1
sub C_onclick
document.F.b1.value=int((u-l+1)*rnd+l)
document.F.b2.value=int((u-l+1)*rnd+l)
document.F.b3.value=int((u-l+1)*rnd+l)
document.F.C.value= "YOU CLICKED  "&cl&" TIMES"
if document.F.b1.value=document.F.b2.value and document.F.b3.value=document.F.b2.value then
msgbox "WIN       "&" YOU CLICKED "&cl&" TIMES"

end if
cl=cl+1
end sub
</script>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

[JavaScriptBank]

This is a cross-browser script that moves any number of images around the page, each following a randomly determined path.... detail

Demo: Floating star

How to setup

Step 1: Place JavaScript below in your HEAD section
JavaScript

<SCRIPT language=JavaScript1.2>
<!-- 
/**  by.???ꥸ?ʥ늡vaScript  **/
/**  http://sound.jp/jun88/  **/
var no = 4; // STAR number??
var speed = 20; // smaller number moves the STAR faster

var dx, xp, yp;    // coordinate and position variables
var am, stx, sty;  // amplitude and step variables
var i, doc_width = 800, doc_height = 1800;
function star(){
doc_width =document.body.clientWidth;
doc_height =document.body.clientHeight;
dy = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();
sayu=new Array();
j = 0;

for (i = 1; i < (no+1); ++ i) {
dy[i] = 0;                        // set coordinate variables
xp[i] = Math.random()*(doc_width-50);  // set position variables
yp[i] = Math.random()*(doc_height-50);
am[i] = Math.random()*20;         // set amplitude variables
sty[i] = 0.02 + Math.random()/10; // set step variables
stx[i] = 1.7 + Math.random();     // set step variables
sayu[i]=2.5*Math.random()-1;
document.all["dot"+i].style.display="block";

}
STAR_IE();
}
function STAR_IE() {
for (i = 1; i <( no+1); ++ i) {  // iterate for every dot
xp[i] += stx[i];
yp[i]=yp[i]+sayu[i];
if ((xp[i] > doc_width-50)||(yp[i] > doc_height-50)) {
yp[i] = Math.random()*(doc_height-am[i]-50);
xp[i] = 0;
sty[i] = 0.02 + Math.random()/10;
stx[i] = 1.7 + Math.random();
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}
dy[i] += sty[i];
document.all["dot"+i].style.pixelTop =document.body.scrollTop+ yp[i]+ am[i]*Math.sin(dy[i]);
document.all["dot"+i].style.pixelLeft =document.body.scrollLeft+xp[i];
}
setTimeout("STAR_IE()", speed);
}
// End -->
</SCRIPT>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Step 2: Place HTML below in your BODY section
HTML

<body onload=star()>
<DIV id=dot1 
style="DISPLAY: none; LEFT: 15px; POSITION: absolute; TOP: 105px"><IMG height=19 
src="index_f1.gif" width=21 border=0></DIV>
<DIV id=dot2 
style="DISPLAY: none; LEFT: 15px; POSITION: absolute; TOP: 135px"><IMG height=19 
src="index_f2.gif" width=21 border=0></DIV>
<DIV id=dot3 
style="DISPLAY: none; LEFT: 15px; POSITION: absolute; TOP: 165px"><IMG height=19 
src="index_f3.gif" width=21 border=0></DIV>
<DIV id=dot4 
style="DISPLAY: none; LEFT: 15px; WIDTH: 765px; POSITION: absolute; TOP: 195px; HEIGHT: 19px"><IMG 
height=19 src="index_f4.gif" width=21 
border=0></DIV>
</body>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Step 3: downloads
Files
index_f1.gif
index_f2.gif
index_f3.gif
index_f4.gif

JavaScript Countdown Timer - JavaScript Currency Format - JavaScript Format Phone Number

[JavaScriptBank]

A shooting gun game with cannon. Use arrow keys to move and Spacebar to fire.... detail

Demo: Cannon Fire

How to setup

Step 1: Use CSS code below for styling the script
CSS

<STYLE>.bullet {
	FONT-WEIGHT: bold; FONT-SIZE: 10px; FONT-FAMILY: verdana; POSITION: absolute
}

</STYLE>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Step 2: Use JavaScript code below to setup the script
JavaScript

<SCRIPT>
	var blnPressed = false;
	var intClrIntId = 0;
	var intClrIntIdTarget = 0;
	var intLife = 3;
	var intHits=0;
	var objScore,objLife,objNumBull;
	var intBullets=200;
	var intTargets=30;
	var blnGameOver=false;
	
	setTimeout("objScore = document.all['scr'];objLife= document.all['life'];objNumBull=document.all['numBullets'];",1000);

	intClrIntId = setInterval('moveBullets()',30);
	intClrIntIdTarget = setInterval('displayTarget()',900);

	function moveObjRight()
	{
		var obj = document.all['imgObj'];

		if(blnPressed && (obj.style.pixelLeft+6) < 175)
		{
			obj.style.left = obj.style.pixelLeft+6 ;			
		}
	}

	function moveObjLeft()
	{
		var obj = document.all['imgObj'];

		if(blnPressed && (obj.style.pixelLeft-6) > 0)
		{
			obj.style.left = obj.style.pixelLeft-6 ;			
		}
	}
	
	function chkKeyDown()
	{
		var intEvent=0;

		if(blnGameOver)
		return;

		intEvent = event.keyCode;
		
		switch(intEvent)
		{
			//Left arrow
			case 37:
				blnPressed=true;
				moveObjLeft();
				break;			
			//Right arrow
			case 39:
				blnPressed=true;
				moveObjRight()
				break;			
			//Spacebar
			case 32:
				fire();
				break;
			default:
				break;			
		}
	}

	function fire()
	{
		if(intBullets != 0)
		{
			var objBullet = new createObj("*",'bullet');
			var objGun = document.all['imgObj'];

			objBullet.style.left=objGun.style.pixelLeft+3;
			objBullet.style.color="blue";
			objBullet.style.top=objGun.style.pixelTop-10;
			intBullets--;
			objNumBull.innerText = intBullets;
		}
	}

	function moveBullets()
	{
		var objBullets = document.all['bullet'];
		var objTargets = document.all['target'];

		for(var i=2; i<objBullets.length;i++)
		{
			if(objBullets[i].style.pixelTop > -10)
			{
				objBullets[i].style.top = objBullets[i].style.pixelTop - 15; 
				checkBulletCollision(objBullets[i]);
			}
			else
			{
				objBullets[i].style.display='none';
			}
		}

		for(var i=2; i<objTargets.length;i++)
		{
			if(objTargets[i].style.pixelTop < 300)
			{
				objTargets[i].style.top = objTargets[i].style.pixelTop + 4; 
				
				if(objTargets[i].innerHTML != 'X')
				checkGunCollision(objTargets[i]);
			}
			else
			{
				objTargets[i].style.display='none';
			}
		}		
	}

	function checkBulletCollision(objBullet)
	{
		var objTargets = document.all['target'];
		var intX=0,intY=0;

		for(var i=2; i<objTargets.length;i++)
		{
			intX = Math.abs(objBullet.style.pixelLeft - objTargets[i].style.pixelLeft);
			intY = Math.abs(objBullet.style.pixelTop - objTargets[i].style.pixelTop);

			if(objTargets[i].innerHTML == 'X')
			{
				objTargets[i].style.display='none';
			}

			if((intX <= 10) && (intY<=10) && (objBullet.style.display != 'none') && (objTargets[i].style.display != 'none'))
			{
				objTargets[i].innerHTML='X';
				objBullet.style.display='none';
				intHits++;
				objScore.innerText=intHits*100;
			}			
		}		
	}

	function checkGunCollision(objTarget)
	{
		var objGun = document.all['imgObj'];
		var intX=0,intY=0;

		intX = Math.abs(objTarget.style.pixelLeft - objGun.style.pixelLeft);
		intY = Math.abs(objTarget.style.pixelTop - objGun.style.pixelTop);

		if((intX <= 12) && (intY<=10))
		{
			objTarget.innerHTML='X';
			objTarget.style.display='none';
			
			objGun.style.fontSize = "26";
			objGun.innerHTML = "X";

			document.all['main'].style.backgroundColor="orange";

			setTimeout('document.all[\'main\'].style.backgroundColor="white"',200);
			
			clearInterval(intClrIntId);
			clearInterval(intClrIntIdTarget);
			
			intLife--;
			if(intLife>0)
			{
				objLife.innerText=intLife;
				intializeGame();
			}
			else
			{
				objLife.innerText=0;
				gameOver();
			}
		}

		if(intBullets == 0)
		{
			gameOver();
		}
	}

	function intializeGame()
	{
		var objMain = document.all['main'];
		var strMain='';

		strMain='<div align="center" id="imgObj" style="position:absolute;left:100px;top:270px;font-family:verdana;font-size:10px;font-weight:bold">|<br>[_]</div><hr style="position:absolute;left:0px;top:296px;color:black;width:200px;">';

		objMain.innerHTML = strMain;
		intClrIntId = setInterval('moveBullets()',30);
		intClrIntIdTarget = setInterval('displayTarget()',1500);
	}

	function createObj(str,name)
	{
		var objSpan = document.createElement('SPAN');
		var objText = document.createTextNode(str);
		objSpan.appendChild(objText);
		objSpan.className = 'bullet';
		objSpan.id=name;
		document.all['main'].appendChild(objSpan);
		return(objSpan);
	}

	function generateTarget()
	{
		var objTarget = new createObj("[_]",'target');
		var fltRandom;

		objTarget.style.top=0;
		objTarget.style.color="red";
		fltRandom = Math.random();
		objTarget.style.left = (fltRandom*1000)/5.5;
	}

	function printMsg(msg)
	{
		var objMsg=document.all['msg'];

		objMsg.innerHTML = objMsg.innerHTML + '<BR>' + msg;
	}

	function displayTarget()
	{
		var fltRandom;
		
		fltRandom = Math.random();

		setTimeout('generateTarget();',fltRandom*1000);
	}

	function gameOver()
	{
		document.all['GOMsg'].style.display="block";
		clearInterval(intClrIntId);
		clearInterval(intClrIntIdTarget);
		blnGameOver=true;
	}
</SCRIPT>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Step 3: Place HTML below in your BODY section
HTML

<BODY onkeydown=chkKeyDown() onkeyup=blnPressed=false; onload="document.all['numBullets'].innerText = intBullets;">
<div style="position: relative; float: right; width: 80%;">
<SPAN id=bullet style="LEFT: 10px; POSITION: absolute; TOP: 10px"></SPAN><SPAN 
id=bullet style="LEFT: 10px; POSITION: absolute; TOP: 10px"></SPAN><SPAN 
id=target style="LEFT: 10px; POSITION: absolute; TOP: 10px"></SPAN><SPAN 
id=target style="LEFT: 10px; POSITION: absolute; TOP: 10px"></SPAN>
<DIV id=main 
style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; OVERFLOW-Y: hidden; LEFT: 20px; BORDER-LEFT: black 1px solid; WIDTH: 200px; BORDER-BOTTOM: black 1px solid; POSITION: absolute; TOP: 20px; HEIGHT: 300px; BACKGROUND-COLOR: white">
<DIV id=imgObj 
style="FONT-WEIGHT: bold; FONT-SIZE: 10px; LEFT: 100px; FONT-FAMILY: verdana; POSITION: absolute; TOP: 270px" 
align=center>|<BR>[_] </DIV>
<HR 
style="LEFT: 0px; WIDTH: 200px; COLOR: black; POSITION: absolute; TOP: 296px">
</DIV>
<DIV id=GOMsg 
style="BORDER-RIGHT: black 1px solid; PADDING-RIGHT: 6px; BORDER-TOP: black 1px solid; DISPLAY: none; PADDING-LEFT: 6px; FONT-WEIGHT: bold; FONT-SIZE: 25px; LEFT: 70px; PADDING-BOTTOM: 6px; BORDER-LEFT: black 1px solid; WIDTH: 100px; COLOR: red; PADDING-TOP: 6px; BORDER-BOTTOM: black 1px solid; FONT-FAMILY: Comic Sans MS; POSITION: absolute; TOP: 140px; HEIGHT: 70px; BACKGROUND-COLOR: yellow">Game<BR>&nbsp;&nbsp;&nbsp;Over 
</DIV>
<DIV 
style="BORDER-RIGHT: black 4px solid; BORDER-TOP: gray 4px solid; FONT-SIZE: 12px; LEFT: 20px; BORDER-LEFT: gray 4px solid; WIDTH: 200px; BORDER-BOTTOM: black 4px solid; FONT-FAMILY: verdana; POSITION: absolute; TOP: 325px; HEIGHT: 68px">
<TABLE borderColor=orange cellSpacing=0 cellPadding=4 width="100%" border=1>

  <TBODY>
  <TR style="FONT-WEIGHT: bold; COLOR: lime" bgColor=black>
    <TD width="30%">Score : </TD>
    <TD id=scr align=right>0 </TD></TR>
  <TR style="FONT-WEIGHT: bold; COLOR: lime" bgColor=black>
    <TD>Life : </TD>
    <TD id=life align=right>3 </TD></TR>

  <TR style="FONT-WEIGHT: bold; COLOR: lime" bgColor=black>
    <TD>Bullets : </TD>
    <TD id=numBullets align=right>&nbsp; </TD></TR></TBODY></TABLE></DIV>
<DIV 
style="FONT-SIZE: 12px; LEFT: 20px; WIDTH: 200px; FONT-FAMILY: verdana; POSITION: absolute; TOP: 420px; TEXT-ALIGN: center">Fire: 
&lt;&lt;Space_Bar&gt;&gt; <BR>Movement: [Left &lt;--] [Right --&gt;]<br><a href="http://www.javascriptbank.com">www.javascriptbank.com</a></DIV>
</DIV>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

JavaScript Vertical Marquee - JavaScript DHTML analog clock - JavaScript Backwards Text

[JavaScriptBank]

Entertain your visitors to a quick game of Tic-Tac-Toe. Comes with artificial intelligence and the ability to keep score.... detail

Demo: Tic Tac Toe: 3 steps

How to setup

Step 1: Use JavaScript code below to setup the script
JavaScript

<script language="javascript">
var image1=new Image(); image1.src="ex.gif";
var image2=new Image(); image2.src="oh.gif";

var level=1, myway, mynextmove;
var tmp, done, iswon, content;
var pcwins=[0,0,0,0];
var playerwins=[0,0,0,0];
var draws=[0,0,0,0]; 
var playerstarts=true;
var moves=new Array();
var game=new Array(9);
var choices=[11,12,13,21,22,23,31,32,33];
var corners=[11,13,31,33];
var ways=new Array();
ways[1]=[0,11,12,13];
ways[2]=[0,21,22,23];
ways[3]=[0,31,32,33];
ways[4]=[0,11,21,31];
ways[5]=[0,12,22,32];
ways[6]=[0,13,23,33];
ways[7]=[0,11,22,33];
ways[8]=[0,13,22,31]; 
var w3c=(document.getElementById)?true:false;
var ns4=(document.layers)?true:false;
var ie4=(document.all && !w3c)?true:false;
var ie5=(document.all && w3c)?true:false;
var ns6=(w3c && navigator.appName.indexOf("Netscape")>=0)?true:false;

function init(){
oktoplay=true;
iswon=false;
done=0;
writetext(4);
moves[11]=0; moves[12]=0; moves[13]=0; moves[21]=0; moves[22]=0; moves[23]=0; moves[31]=0; moves[32]=0; moves[33]=0;
for(i=0;i<=8;i++){
document.images['rc'+choices[i]].src="nothing.gif";
document.images['rc'+choices[i]].alt="";
game[i]=0;
}
if(!playerstarts)pcturn();
}

function writetext(num){
switch(num){
case 1: content='This game is a draw';
break;
case 2: content='The computer won this round.';
break;
case 3: content='You won this round.';
break;
case 4: content='LEVEL: '+level+'\n\nComputer Wins:  This level- '+pcwins[level]+'  (Total: '+(pcwins[0]+pcwins[1]+pcwins[2]+pcwins[3])+')\nPlayer Wins  :  This level- '+playerwins[level]+'  (Total: '+(playerwins[0]+playerwins[1]+playerwins[2]+playerwins[3])+')\nDraws        :  This level- '+draws[level]+'  (Total: '+(draws[0]+draws[1]+draws[2]+draws[3])+')';
break;
}

document.scores.scores2.value=content

if(num<4)setTimeout('init(4)',1000);
}

function setlevel(x){
	if (level!=x){
		level=x;
		init();
}}

function setbutton(cellnum){
if (!iswon){ 			// Thanks to Roger for finding this Bug !!!
if(moves[cellnum]==0){
document.images['rc'+cellnum].src="ex.gif";
document.images['rc'+cellnum].alt=" X ";
moves[cellnum]=1;
game[done]=cellnum;
done++;
findwinner(true);
}else alert('You cannot move here!');
}}

function pcstrategy(istowin){
if (level>0){
var str=(istowin)? 2 : 1;
for(n=1;n<=8;n++){
if((moves[ways[n][1]]==str) && (moves[ways[n][2]]==str) && (moves[ways[n][3]]==0)) tmp=ways[n][3];
if((moves[ways[n][1]]==str) && (moves[ways[n][3]]==str) && (moves[ways[n][2]]==0)) tmp=ways[n][2];
if((moves[ways[n][2]]==str) && (moves[ways[n][3]]==str) && (moves[ways[n][1]]==0)) tmp=ways[n][1];
}}}


function selecCorner(which){
if (which=="empty"){
do{
tmp=corners[Math.floor(Math.random()*4)];
}while(moves[tmp]!=0);
}
else
tmp=corners[Math.floor(Math.random()*4)];
}


function pcdontlose(){
if (!playerstarts){
if (done==0){
tmp=choices[2*Math.floor(Math.random()*5)];
if (tmp==22) myway=1;
else myway=2;
}
else if (done==2){
if (myway==1){
if (game[1]==11 || game[1]==13 || game[1]==31 || game[1]==33)
tmp=44-game[1];	
else{
dlta=22-game[1];
op0=22+dlta+(10/dlta);
op1=22+dlta-(10/dlta);
tmp=eval("op"+Math.floor(Math.random()*2));
}}
else if (myway==2){
if (game[1]==22){
tmp=44-game[0];
myway=21;
}
else if (game[1]==11 || game[1]==13 || game[1]==31 || game[1]==33){
selecCorner("empty");
myway=22;
}
else{
tmp=22;
myway=23;
}}}
else if (done==4){
if (myway==22){
for (i=0; i<4 ;i++){            
if (moves[corners[i]]==0){
tmp=corners[i];
}}}
else if (myway==23){
dlta=game[1]-game[0];
op0=44-(game[1]+dlta);
op1=(op0+game[0])/2;
tmp=eval("op"+Math.floor(Math.random()*2));
}
else if (myway==1)
tmp=44+game[2]-(2*game[3]);
}}
else if (level==3){
if (done==1){
if (game[0]==11 || game[0]==13 || game[0]==31 || game[0]==33){
tmp=22;
myway=1;
}
else if (game[0]==22){
selecCorner("any");
myway=2;
}
else{
tmp=22;
myway=3;
}}
else if (done==3){
if (myway==1){
if (game[2]==44-game[0])
tmp=choices[1+(2*Math.floor(Math.random()*4))];
else
tmp=44-game[0]
}
else if (myway==2){
if (game[2]==44-game[1])
selecCorner("empty");
}
else if (myway==3){
if (game[2]==11 || game[2]==13 || game[2]==31 || game[2]==33)
tmp=44-game[2];
if (game[2]==44-game[0]){
dlta=22-game[2];
tmp=22+(10/dlta);
mynextmove=tmp+dlta;
}
else{
dlta=22-game[0];
op0=game[0]+(10/dlta);	
op1=game[0]-(10/dlta);	
op2=game[2]+dlta;	
tmp=eval("op"+Math.floor(Math.random()*3));
}}}
else if (done==5 && myway==3){
tmp=mynextmove;
}}}


function findwinner(isplayer){
me=(isplayer)? 1 : 2;
for(n=1;n<=8;n++){
if( (moves[ways[n][1]]==me) && (moves[ways[n][2]]==me) && (moves[ways[n][3]]==me) ){
iswon=true;
break;
}}
if(iswon){
if(isplayer){
playerwins[level]++;
playerstarts=true;
writetext(3);
}else{
pcwins[level]++;
playerstarts=false;
writetext(2);
}}else{
if(done>8){
draws[level]++;
playerstarts=!playerstarts;
writetext(1);
}else if(isplayer) pcturn();
}}

function pcrandom(){
do{
tmp=choices[Math.floor(Math.random()*9)];
}while(moves[tmp]!=0);
}

function pcturn(){
tmp='00';
pcstrategy(true);
if(tmp=='00')pcstrategy(false);
if(tmp=='00' && level>1)
	pcdontlose();
if(tmp=='00')
	pcrandom();
moves[tmp]=2;
game[done]=tmp;
document.images['rc'+tmp].src="oh.gif";
document.images['rc'+tmp].alt=" O ";
done++;
findwinner(false);
}

window.onload=init;

window.onresize=function(){
  if(ns4)setTimeout('history.go(0)',400);
}
</script>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Step 2: Copy & Paste HTML code below in your BODY section
HTML

<table cellpadding="0" cellspacing="0" border="5" bordercolor="black" bordercolorlight="gray" bgcolor="white"><tr>
<td width="55"><a href="javascript:setbutton(11)">
<img src="nothing.gif" border="0" name="rc11" width="55" height="55"></a></td>
<td width="55"><a href="javascript:setbutton(12)">
<img src="nothing.gif" border="0" name="rc12" width="55" height="55"></a></td>
<td width="55"><a href="javascript:setbutton(13)">
<img src="nothing.gif" border="0" name="rc13" width="55" height="55"></a></td>
</tr><tr>
<td width="55"><a href="javascript:setbutton(21)">
<img src="nothing.gif" border="0" name="rc21" width="55" height="55"></a></td>
<td width="55"><a href="javascript:setbutton(22)">
<img src="nothing.gif" border="0" name="rc22" width="55" height="55"></a></td>
<td width="55"><a href="javascript:setbutton(23)">
<img src="nothing.gif" border="0" name="rc23" width="55" height="55"></a></td>
</tr><tr>
<td width="55"><a href="javascript:setbutton(31)">
<img src="nothing.gif" border="0" name="rc31" width="55" height="55"></a></td>

<td width="55"><a href="javascript:setbutton(32)">
<img src="nothing.gif" border="0" name="rc32" width="55" height="55"></a></td>
<td width="55"><a href="javascript:setbutton(33)">
<img src="nothing.gif" border="0" name="rc33" width="55" height="55"></a></td>
</tr></table><br>

<form name="scores"><textarea name="scores2" cols="60" rows="6" ></textarea>

<br><br>
<input type="radio" name="level" id="level" onclick="setlevel(0)">level 0 -- the 
	Computer is totally dumb. <br>
<input type="radio" name="level" id="level" onclick="setlevel(1)" checked>level 
	1 -- Computer is smarter (original version). <br>
<input type="radio" name="level" id="level" onclick="setlevel(2)">level 2 -- You 
	MAY win (only when you start). <br>
<input type="radio" name="level" id="level" onclick="setlevel(3)">level 3 -- 
	Computer NEVER lose. <br>

</form>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Step 3: Download files below
Files
ex.gif
oh.gif
nothing.gif

JavaScript Bookmark Page script - JavaScript Color Wheel - JavaScript Image slideshow

[JavaScriptBank]

Spectacular way to welcome your visitors. Text Wheel rotate your messages like a wheel in the middle of your webpage. You may add as many [URL="http://www.javascriptbank.com/javascript/text/"]me... detail

Demo: TextWheel

How to setup

Step 1: Copy & Paste JavaScript code below in your HEAD section
JavaScript

<script>
<!-- Beginning of JavaScript -

// CREDITS:
// TextWheel by Julian Paulus

var message = new Array()
message[0]=" >>>> a7ebech hwaya"
message[1]=" >>>> amoot 3alech"
message[2]=" >>>> danara 7ayati"
message[3]=" >>>> danara roo7i"
message[4]=" >>>> Danara malaki"
message[5]=" >>>> danara 7abibty"

// Edit the width an height of your TextWheel (pixels)
var scrollerheight=120
var scrollerwidth=360

// Edit the font
var font_family="Verdana"

// Edit the font-size
var font_size=20

// Edit the horizontal and vertical position of your TextWheel (pixels)
var x_textposition=12
var y_textposition=12
function initiate() {
	if (document.all) {	
		document.all.rotationstyle1.style.posLeft=x_textposition
		document.all.rotationstyle1.style.posTop=y_textposition
		
		document.all.rotationstyle2.style.posLeft=x_textposition
		document.all.rotationstyle2.style.posTop=y_textposition
		
		document.all.rotationstyle3.style.posLeft=x_textposition
		document.all.rotationstyle3.style.posTop=y_textposition
		
		document.all.rotationstyle4.style.posLeft=x_textposition
		document.all.rotationstyle4.style.posTop=y_textposition
		
		document.all.rotationstyle5.style.posLeft=x_textposition
		document.all.rotationstyle5.style.posTop=y_textposition
		
		document.all.rotationstyle6.style.posLeft=x_textposition
		document.all.rotationstyle6.style.posTop=y_textposition
		
		setmessages()
		}
}

function setmessages() {

		rotationstyle1.innerHTML=
		'<OBJECT ID="rotationobj1" CLASSID="CLSID:369303C2-D7AC-11d0-89D5-00A0C90833E6" STYLE="position:relative;width:'+scrollerwidth+'px;height:'+2*scrollerheight+'px">'+
        '<PARAM NAME="Line0001" VALUE="SetLineStyle(0)">'+
        '<PARAM NAME="Line0002" VALUE="SetLineColor(0,0,0)">'+
		'<PARAM NAME="Line0003" VALUE="SetFillColor(255,255,0)">'+
		'<PARAM NAME="Line0004" VALUE="SetFont(\''+font_family+'\', '+font_size+', 400, 0, 0, 0)">'+
		'<PARAM NAME="Line0005" VALUE="Text(\''+message[0]+'\',0, 2, 0)">'+
		'</OBJECT>'		
		
		rotationstyle2.innerHTML=
		'<OBJECT ID="rotationobj2" CLASSID="CLSID:369303C2-D7AC-11d0-89D5-00A0C90833E6" STYLE="position:relative;width:'+scrollerwidth+'px;height:'+2*scrollerheight+'px">'+
        '<PARAM NAME="Line0001" VALUE="SetLineStyle(0)">'+
        '<PARAM NAME="Line0002" VALUE="SetLineColor(0,0,0)">'+
		'<PARAM NAME="Line0003" VALUE="SetFillColor(255,255,0)">'+
		'<PARAM NAME="Line0004" VALUE="SetFont(\''+font_family+'\', '+font_size+', 400, 0, 0, 0)">'+
		'<PARAM NAME="Line0005" VALUE="Text(\''+message[1]+'\',0, 2, 0)">'+
		'</OBJECT>'	
		
		rotationstyle3.innerHTML=
		'<OBJECT ID="rotationobj3" CLASSID="CLSID:369303C2-D7AC-11d0-89D5-00A0C90833E6" STYLE="position:relative;width:'+scrollerwidth+'px;height:'+2*scrollerheight+'px">'+
        '<PARAM NAME="Line0001" VALUE="SetLineStyle(0)">'+
        '<PARAM NAME="Line0002" VALUE="SetLineColor(0,0,0)">'+
		'<PARAM NAME="Line0003" VALUE="SetFillColor(255,255,0)">'+
		'<PARAM NAME="Line0004" VALUE="SetFont(\''+font_family+'\', '+font_size+', 400, 0, 0, 0)">'+
		'<PARAM NAME="Line0005" VALUE="Text(\''+message[2]+'\',0, 2, 0)">'+
		'</OBJECT>'	
		
		rotationstyle4.innerHTML=
		'<OBJECT ID="rotationobj4" CLASSID="CLSID:369303C2-D7AC-11d0-89D5-00A0C90833E6" STYLE="position:relative;width:'+scrollerwidth+'px;height:'+2*scrollerheight+'px">'+
        '<PARAM NAME="Line0001" VALUE="SetLineStyle(0)">'+
        '<PARAM NAME="Line0002" VALUE="SetLineColor(0,0,0)">'+
		'<PARAM NAME="Line0003" VALUE="SetFillColor(255,255,0)">'+
		'<PARAM NAME="Line0004" VALUE="SetFont(\''+font_family+'\', '+font_size+', 400, 0, 0, 0)">'+
		'<PARAM NAME="Line0005" VALUE="Text(\''+message[3]+'\',0, 2, 0)">'+
		'</OBJECT>'	
		
		rotationstyle5.innerHTML=
		'<OBJECT ID="rotationobj5" CLASSID="CLSID:369303C2-D7AC-11d0-89D5-00A0C90833E6" STYLE="position:relative;width:'+scrollerwidth+'px;height:'+2*scrollerheight+'px">'+
        '<PARAM NAME="Line0001" VALUE="SetLineStyle(0)">'+
        '<PARAM NAME="Line0002" VALUE="SetLineColor(0,0,0)">'+
		'<PARAM NAME="Line0003" VALUE="SetFillColor(255,255,0)">'+
		'<PARAM NAME="Line0004" VALUE="SetFont(\''+font_family+'\', '+font_size+', 400, 0, 0, 0)">'+
		'<PARAM NAME="Line0005" VALUE="Text(\''+message[4]+'\',0, 2, 0)">'+
		'</OBJECT>'	
		
		rotationstyle6.innerHTML=
		'<OBJECT ID="rotationobj6" CLASSID="CLSID:369303C2-D7AC-11d0-89D5-00A0C90833E6" STYLE="position:relative;width:'+scrollerwidth+'px;height:'+2*scrollerheight+'px">'+
        '<PARAM NAME="Line0001" VALUE="SetLineStyle(0)">'+
        '<PARAM NAME="Line0002" VALUE="SetLineColor(0,0,0)">'+
		'<PARAM NAME="Line0003" VALUE="SetFillColor(255,255,0)">'+
		'<PARAM NAME="Line0004" VALUE="SetFont(\''+font_family+'\', '+font_size+', 400, 0, 0, 0)">'+
		'<PARAM NAME="Line0005" VALUE="Text(\''+message[5]+'\',0, 2, 0)">'+
		'</OBJECT>'	
		
		rotationobj1.Rotate(0,0,0) 
		rotationobj2.Rotate(0,60,0) 
		rotationobj3.Rotate(0,120,0) 
		rotationobj4.Rotate(0,180,0) 
		rotationobj5.Rotate(0,240,0) 
		rotationobj6.Rotate(0,300,0) 
		
		startscroll()
}

function startscroll() {
        rotationobj1.Rotate(1,2,0) 
		rotationobj2.Rotate(1,2,0) 
		rotationobj3.Rotate(1,2,0) 
		rotationobj4.Rotate(1,2,0) 
		rotationobj5.Rotate(1,2,0) 
		rotationobj6.Rotate(1,2,0) 
		timer=setTimeout("startscroll()",20)
}


// - End of JavaScript - -->
</script>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Step 2: Place HTML below in your BODY section
HTML

<body onload="initiate()">
<span id="rotationstyle1" style="position: absolute;">
<object id="rotationobj1" classid="CLSID:369303C2-D7AC-11d0-89D5-00A0C90833E6">
</object>
</span>

<span id="rotationstyle2" style="position: absolute;">
<object id="rotationobj2" classid="CLSID:369303C2-D7AC-11d0-89D5-00A0C90833E6">
</object>
</span>

<span id="rotationstyle3" style="position: absolute;">
<object id="rotationobj3" classid="CLSID:369303C2-D7AC-11d0-89D5-00A0C90833E6">
</object>
</span>

<span id="rotationstyle4" style="position: absolute;">
<object id="rotationobj4" classid="CLSID:369303C2-D7AC-11d0-89D5-00A0C90833E6">
</object>
</span>

<span id="rotationstyle5" style="position: absolute;">
<object id="rotationobj5" classid="CLSID:369303C2-D7AC-11d0-89D5-00A0C90833E6">
</object>
</span>

<span id="rotationstyle6" style="position: absolute;">
<object id="rotationobj6" classid="CLSID:369303C2-D7AC-11d0-89D5-00A0C90833E6">
</object>
</span>

<div id="Belongs_not_to_the_script" style="position: absolute; top: 200px; left: 5px;">
<font size="5" face="Verdana" color="#ffffff">

</font><p align="center"><font size="5" face="Verdana" color="#ffffff"> <a href="mailto:mannipaul@hotmail.com">
mannipaul@hotmail.com</a></font></p>
<font size="5" face="Verdana" color="#ffffff">
</body>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

JavaScript Vertical Marquee - JavaScript DHTML analog clock - JavaScript Backwards Text

[JavaScriptBank]

This JavaScript displays a countdown timer and alerts the user when the timer reaches zero. It then redirects to another Web ... detail

Demo: JavaScript Countdown Timer

How to setup

Step 1: Place CSS below in your HEAD section
CSS

<style type="text/css">
#txt {
  border:none;
  font-family:verdana;
  font-size:16pt;
  font-weight:bold;
  border-right-color:#FFFFFF
}

</style>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Step 2: Use JavaScript code below to setup the script
JavaScript

<script language="javascript">
// Created by: Neill Broderick :: http://www.bespoke-software-solutions.co.uk/downloads/downjs.php

var mins
var secs;

function cd() {
 	mins = 1 * m("10"); // change minutes here
 	secs = 0 + s(":01"); // change seconds here (always add an additional second to your total)
 	redo();
}

function m(obj) {
 	for(var i = 0; i < obj.length; i++) {
  		if(obj.substring(i, i + 1) == ":")
  		break;
 	}
 	return(obj.substring(0, i));
}

function s(obj) {
 	for(var i = 0; i < obj.length; i++) {
  		if(obj.substring(i, i + 1) == ":")
  		break;
 	}
 	return(obj.substring(i + 1, obj.length));
}

function dis(mins,secs) {
 	var disp;
 	if(mins <= 9) {
  		disp = " 0";
 	} else {
  		disp = " ";
 	}
 	disp += mins + ":";
 	if(secs <= 9) {
  		disp += "0" + secs;
 	} else {
  		disp += secs;
 	}
 	return(disp);
}

function redo() {
 	secs--;
 	if(secs == -1) {
  		secs = 59;
  		mins--;
 	}
 	document.cd.disp.value = dis(mins,secs); // setup additional displays here.
 	if((mins == 0) && (secs == 0)) {
  		window.alert("Time is up. Press OK to continue."); // change timeout message as required
  		// window.location = "yourpage.htm" // redirects to specified page once timer ends and ok button is pressed
 	} else {
 		cd = setTimeout("redo()",1000);
 	}
}

function init() {
  cd();
}
window.onload = init;
</script>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Step 3: Copy & Paste HTML code below in your BODY section
HTML

<form name="cd">
<input id="txt" readonly="true" type="text" value="10:00" border="0" name="disp">
</form>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

AJAX news ticker - JavaScript Refresh Page - JavaScript Unclosable Window

[JavaScriptBank]

This JavaScript creates slideshow effect with one of transitions.... detail

Demo: Image slideshow transition

How to setup

Step 1: Use JavaScript code below to setup the script
JavaScript

<script LANGUAGE="JavaScript1.1">
<!-- Beginning of JavaScript -

messages = new Array()
//anh dung de tao hieu ung
messages[0] = "<img src=logojs.gif>"
messages[1] = "<img src=photo1.jpg>"
messages[2] = "<img src=photo2.jpg>"
messages[3] = "<img src=photo3.jpg>"
messages[4] = "<img src=photo4.jpg>"

var i_messages = 0
var timer

function dotransition() {
    if (document.all) {
        content.filters[0].apply()
        content.innerHTML = messages[i_messages]
        content.filters[0].play()
        if (i_messages >= messages.length-1) {
            i_messages = 0
        }
        else {
            i_messages++
        }
    } 
    
    if (document.layers) {
       document.nn.document.write("<table cellspacing=2 cellpadding=2 border=0><tr><td align=left>"+messages[i_messages]+"</td></tr></table>")
		document.close()
        if (i_messages >= messages.length-1) {
            i_messages = 0
        }
        else {
            i_messages++
        }
    } 
    timer = setTimeout("dotransition()",5000)   
}
// - End of JavaScript - -->
</script>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Step 2: Copy & Paste HTML code below in your BODY section
HTML

<BODY onload="dotransition()">
<DIV id=content style="position: relative; width:160px; height:240px; text-align:center; filter: revealTrans(Transition=12, Duration=3)"></DIV>
</BODY>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

JavaScript Enlarge Image - JavaScript Fading Slide Show - JavaScript Rotating Image script

[JavaScriptBank]

Bring the sound of life - music to your visitors by this JavaScript. It is an advanced web based midi player that actually enables you to jump, pause, and manipulate the play list like never before.... detail

Demo: Web based Music Player

How to setup

Step 1: Place JavaScript below in your HEAD section
JavaScript

<SCRIPT language=JavaScript>
<!-- Begin
counter = 0;
html = true;
songs = new Array();
function addsong() {
file = document.forms[0].file.value;
if(file == "") {
alert("Entra un nombre de archivo o da click en Examinar..");
}
else {
fn = file;
while(fn.indexOf() != -1) {
pos = fn.indexOf();
fn = fn.substring(fn.lenght);
}
if(fn.indexOf(".gif") == 1) {
alert("Sólo sonidos o música");
}
else {
songs[counter] = file;
document.forms[0].selMusica[counter] = new Option(fn, file, false, true);
counter++;
}
document.forms[0].file.value = "";
}
}
function musica() {
document.all.sound.src=document.clock.selMusica.options[document.clock.selMusica.selectedIndex].text;
}
function stop() {
document.all.sound.src="";
}
function count() {
document.clock.songs.value=document.clock.selMusica.options.length;
}
function deletethis() {
if(counter > 0) {
counter--;
document.forms[0].selMusica[counter] = null;
songs[counter] = "";
}
else {
alert("No hay nada en la lista!");
   }
}
function bajar() {
document.clock.selMusica.options[document.clock.selMusica.selectedIndex++];
saber2();
saber();
}
function subir() {
document.clock.selMusica.options[document.clock.selMusica.selectedIndex--];
saber2();
saber();
}
function saber() {
document.clock.url.value=document.clock.selMusica.options[document.clock.selMusica.selectedIndex].text;
}
function saber2() {
fn = document.clock.selMusica.options[document.clock.selMusica.selectedIndex].text;
char = unescape("%5C");
while(fn.indexOf(char) != -1) {
pos = fn.indexOf(char);
fn = fn.substring(pos + 1, fn.length);
document.clock.nombre.value=fn;
}
}
// End-->
</SCRIPT>

Step 2: Place HTML below in your BODY section
HTML

<BODY onclick=count() onload=count()>
<BGSOUND id=sound src="">
<FORM name=clock><INPUT type=file name=file size="20"> <INPUT onclick=addsong() type=button value=Add><INPUT onclick=deletethis() type=button value=Delete><BR><INPUT onclick=musica() type=button value=Listen name=empezar> 
<INPUT onclick=stop() type=button value=Stop name=detener> You have:<INPUT 
readOnly size=2 name=songs>song(s) in the list.<BR>Name of the song:<INPUT 
size=25 name=nombre><INPUT onclick="saber2(); saber()" type=button value="Know Name & Url">Url 
	of the song:<INPUT size=19 name=url> <BR><INPUT onclick=bajar() type=button value=MoveDown><INPUT onclick=subir() type=button value=MoveUp><BR><BR><SELECT 
multiple size=20 name=selMusica></SELECT> </FORM>
</BODY>

JavaScript Spotlight - JavaScript Validate E-Mail - AJAX Page Content Loader

[JavaScriptBank]

Use this simple JavaScript to make all links on your web pages open in new tab/window. Script is easy to setup, you should save them into a f... detail

Demo: Make link open in new tab/window

How to setup

Step 1: Use JavaScript code below to setup the script
JavaScript

<script language=javascript>
/*
	Kevin Yank
	http://www.sitepoint.com/authorcontact/48
*/
function externalLinks()
{
  if (!document.getElementsByTagName) return;
  var anchors = document.getElementsByTagName("a");
  for (var i=0; i<anchors.length; i++)
  {
      var anchor = anchors[i];
      if(anchor.getAttribute("href"))
		anchor.target = "_blank";
  }
}
window.onload = externalLinks;

</script>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Step 2: Place HTML below in your BODY section
HTML

<a href="http://javascriptbank.com/">Home</a> | 
	<a href="http://javascriptbank.com/4rum/">Forum</a> | 
	<a href="http://javascriptbank.com/javascript/">JavaScript</a> | 
	<a href="http://javascriptbank.com/service/">Services</a> | 
	<a href="http://javascriptbank.com/javascript/submit-javascript-bank.html">Submit script</a> | 
	<a href="http://javascriptbank.com/thietkeweb/javascriptmall/">Documentary</a> | 
	<a href="http://javascriptbank.com/javascript/contact-javascript-bank.html">Contact us</a> | 
	<a href="http://javascriptbank.com/javascript/aboutus-javascript-bank.html">About us</a>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

JavaScript Countdown Timer - JavaScript Currency Format - JavaScript Format Phone Number

[JavaScriptBank]

AJAX - a very great web development technology nowaday. Use this AJAX in order to load XML and HTML files on the same website with XMLHttpRequest. And in the <code>body... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

Demo: AJAX Page Content Loader

How to setup

Step 1: Place CSS below in your HEAD section
CSS

<style type="text/css">
<!--
#contentLYR {
  position:relative;/*
  width:200px;
  height:115px;
  left: 200px;
  top: 200px;*/
  z-index:1;
}
-->
</style>

Step 2: Use JavaScript code below to setup the script
JavaScript

<script type="text/javascript">
<!-- Begin
/*
     This script downloaded from www.JavaScriptBank.com
     Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
*/

// Created by: Eddie Traversa (2005) :: http://dhtmlnirvana.com/
function ajaxLoader(url,id) {
  if (document.getElementById) {
    var x = (window.ActiveXObject) ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
  }
  if (x) {
    x.onreadystatechange = function() {
      if (x.readyState == 4 && x.status == 200) {
        el = document.getElementById(id);
        el.innerHTML = '<JavaScriptBank>This is content of demo.xml file</JavaScriptBank>';//x.responseText;
      }
    }
    x.open("GET", url, true);
    x.send(null);
  }
}
//-->
</script>

Step 3: Place HTML below in your BODY section
HTML

<div id="contentLYR"></div>
	<script>window.onload = function(){ajaxLoader('demo.xml','contentLYR');}</script>

Step 4: must download files below
Files
demo.xml

JavaScript Enlarge Image - JavaScript Fading Slide Show - JavaScript Rotating Image script

[JavaScriptBank]

JavaScript - an indispensable part for developing websites and web pages, whether that is simple pages or professional website, and whether you are senior or junior. Nowadays, JavaScript frameworks be... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

Demo: Top 10 JavaScript Frameworks by Google, Yahoo, Bing

How to setup

Javascript Music Player - Random Text Generator - Floating Image Script

[JavaScriptBank]

This JavaScript code - date picker helps you choose a time through a popup window. Perhaps this feature is not new on [URL="http://www.javascriptbank.com/"]J... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

Demo: Time Picker with child window

How to setup

Step 1: Place JavaScript below in your HEAD section
JavaScript

<script language="JavaScript" type="text/javascript" src="timePicker.js">
/*
	Bassem R. Zohdy | bassem.zohdy@gmail.com
*/
</script>

Step 2: Copy & Paste HTML code below in your BODY section
HTML

<form name="form1">
	<input id="field" onkeydown="time(this.id)"/>
</form>

Step 3: must download files below
Files
down.jpg
time.html
timePicker.js
up.jpg

AJAX news ticker - JavaScript Refresh Page - JavaScript Unclosable Window

[JavaScriptBank]

Displays images continuously in a slideshow presentation format, with a fade effect on image transitions. (Fade in Internet Explorer 4+ only).... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

Demo: Fading Slide Show

How to setup

Step 1: Use JavaScript code below to setup the script
JavaScript

<script>
/* 
	Original:  CodeLifter.com (support@codelifter.com)
	Web Site:  http://www.codelifter.com 
*/

// set the following variables
// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 5000

// Duration of crossfade (seconds)
var crossFadeDuration = 3

// Specify the image files
var Pic = new Array() // don't touch this
// to add more images, just continue
// the pattern, adding to the array below
Pic[0] = 'logojs.gif'
Pic[1] = 'photo3.jpg'
Pic[2] = 'logojs.gif'
Pic[3] = 'photo5.jpg'
Pic[4] = 'photo2.jpg'

// do not edit anything below this line

var t
var j = 0
var p = Pic.length
var preLoad = new Array()
for (i = 0; i < p; i++){
   preLoad[i] = new Image()
   preLoad[i].src = Pic[i]
}

function runSlideShow(){
   if (document.all){
      document.images.SlideShow.style.filter="blendTrans(duration=2)"
      document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)"
      document.images.SlideShow.filters.blendTrans.Apply()      
   }
   document.images.SlideShow.src = preLoad[j].src
   if (document.all){
      document.images.SlideShow.filters.blendTrans.Play()
   }
   j = j + 1
   if (j > (p-1)) j=0
   t = setTimeout('runSlideShow()', slideShowSpeed)
}
</script>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Step 2: Copy & Paste HTML code below in your BODY section
HTML

<body onLoad="runSlideShow()">
<img id="VU" src="logojs.gif" name='SlideShow'>
</body>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

JavaScript Bookmark Page script - JavaScript Color Wheel - JavaScript Image slideshow

[JavaScriptBank]

This JavaScript integrates complete virtual keyboard solution to the any web page. It does support mouse input, as well as keyboard input translation. Plain text and rich te... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

Demo: Virtual Keyboard

How to setup

Step 1: Place JavaScript below in your HEAD section
JavaScript

<script type="text/javascript" src="vk_loader.js" ></script>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Step 2: Copy & Paste HTML code below in your BODY section
HTML

<form action="no.cgi" method="get">
      <div>
       Subject:<br />

       <input name="testa" id="testa" type="text" onfocus="VirtualKeyboard.attachInput(this)" /><br />
       Password (has keyboard animation disabled):<br />
       <input name="test_pwd" id="test_pwd" type="password" class="VK_no_animate" onfocus="VirtualKeyboard.attachInput(this)" /><br />
       Text:<br />
       <textarea name="testb" id="testb" type="text" cols="55" rows="10" wrap="soft" onfocus="VirtualKeyboard.attachInput(this)"></textarea>
       <br />
       <br />

       <div id="td"></div>
       <br />
       <input id="showkb" type="button" value="Keyboard" onclick="VirtualKeyboard.toggle('testb','td'); return false;" />
      </div>
      <div id="dbg">
      </div>
     </form>
     <script type="text/javascript">
         EM.addEventListener(window,'domload',function(){
             /*
             *  open the keyboard
             */
             VirtualKeyboard.toggle('testb','td');
             var el = document.getElementById('sul')
                ,lt = VirtualKeyboard.getLayouts()
                ,dl = window.location.href.replace(/[?#].+/,"")
             for (var i=0,lL=lt.length; i<lL; i++) {
                 var cl = lt[i];
                 cl = cl[0]+" "+cl[1];
                 lt[i] = "<a href=\""+dl+"?vk_layout="+cl+"\" onclick=\"VirtualKeyboard.switchLayout(this.title);return false;\" title=\""+cl+"\" alt=\""+cl+"\" >"+cl+"</a>"
             }
             el.innerHTML += "<li>"+lt.join("</li><li>")+"</li>";
         });
     </script>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Step 3: downloads
Files
Virtual_Keyboard.zip

JavaScript Line Graph script - JavaScript Virtual Keyboard - JavaScript Horizontal Slider

[JavaScriptBank]

Keep your content fresh. Use this JavaScript to automatically reload a fresh copy of your Web page from the server. You determine the time de... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

Demo: Refresh Page - Automatic

How to setup

Step 1: Use JavaScript code below to setup the script
JavaScript

<script type="text/javascript">
<!-- Begin
// Created by: Lee Underwood
function reFresh() {
  window.open(location.reload(true))
}
/* Set the number below to the amount of delay, in milliseconds,
you want between page reloads: 1 minute = 60000 milliseconds. */
window.setInterval("reFresh()",300000);
// End -->
</script>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

JavaScript Enlarge Image - JavaScript Fading Slide Show - JavaScript Rotating Image script

[JavaScriptBank]

This JavaScript verifies that a string looks like a real e-mail address.... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

Demo: JavaScript Validate E-Mail

How to setup

Step 1: Copy & Paste JavaScript code below in your HEAD section
JavaScript

<script language="javascript">
// Created by: Francis Cocharrua :: http://scripts.franciscocharrua.com/

function Validate_String(string, return_invalid_chars) {
  valid_chars = '1234567890-_.^~abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
  invalid_chars = '';
  if(string == null || string == '')
     return(true);

  //For every character on the string.   
  for(index = 0; index < string.length; index++) {
    char = string.substr(index, 1);                        
     
    //Is it a valid character?
    if(valid_chars.indexOf(char) == -1) {
      //If not, is it already on the list of invalid characters?
      if(invalid_chars.indexOf(char) == -1) {
        //If it's not, add it.
        if(invalid_chars == '')
          invalid_chars += char;
        else
          invalid_chars += ', ' + char;
      }
    }
  }
            
  //If the string does not contain invalid characters, the function will return true.
  //If it does, it will either return false or a list of the invalid characters used
  //in the string, depending on the value of the second parameter.
  if(return_invalid_chars == true && invalid_chars != '') {
    last_comma = invalid_chars.lastIndexOf(',');
    if(last_comma != -1)
      invalid_chars = invalid_chars.substr(0, $last_comma) + 
      ' and ' + invalid_chars.substr(last_comma + 1, invalid_chars.length);
    return(invalid_chars);
    }
  else
    return(invalid_chars == ''); 
}


function Validate_Email_Address(email_address){
  // Modified and tested by Thai Cao Phong, JavaScriptBank.com
  //Assumes that valid email addresses consist of user_name@domain.tld
  
  at = email_address.indexOf('@');
  dot = email_address.indexOf('.');

  if(at == -1 || 
    dot == -1 || 
    dot <= at + 1 ||
    dot == 0 || 
    dot == email_address.length - 1)
  {
  	alert("Invalid email");
    return(false);
  }
     
  user_name = email_address.substr(0, at);
  domain_name = email_address.substr(at + 1, email_address.length);                  

  if(Validate_String(user_name) === false || Validate_String(domain_name) === false)
  {
  	alert("Invalid email");
    return(false);
  }

  alert("Valid email");//return(true);
}
</script>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Step 2: Copy & Paste HTML code below in your BODY section
HTML

<form name=f>
<input type=text name=mail value="">
<input type=button value=Check onclick="Validate_Email_Address(document.f.mail.value)">
</form>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

JavaScript Line Graph script - JavaScript Virtual Keyboard - JavaScript Horizontal Slider

[JavaScriptBank]

Only a fews of days then Christmas will come. And if you are looking for one beautiful countdown timer for waiting <i>Christmas Day</i> on your website, then I hope this post will satisfy your needs; ... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

Demo: JavaScript Top 10 Beautiful Christmas Countdown Timers

How to setup

JavaScript Bookmark Page script - JavaScript Color Wheel - JavaScript Image slideshow

[JavaScriptBank]

This is a purely DHTML/ CSS based Line Graph script. It loads fast and blends in with the rest of the page. You can even use a transparent detail at JavaScriptBank.com - 2.000+ free JavaScript codes

Demo: JavaScript Line Graph script

How to setup

Step 1: Use JavaScript code below to setup the script
JavaScript

<script type="text/javascript" src="wz_jsgraphics.js"></script>
<script type="text/javascript" src="line.js"></script>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Step 2: Place HTML below in your BODY section
HTML

<div id="lineCanvas" style="overflow: auto; position:relative;height:300px;width:400px;"></div>

<script type="text/javascript">
var g = new line_graph();
g.add('1', 145);
g.add('2', 0);
g.add('3', 175);
g.add('4', 130);
g.add('5', 150);
g.add('6', 175);
g.add('7', 205);
g.add('8', 125);
g.add('9', 125);
g.add('10', 135);
g.add('11', 125);

g.render("lineCanvas", "Line Graph");
</script>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Step 3: downloads
Files
line.js
wz_jsgraphics.js

JavaScript Countdown Timer - JavaScript Currency Format - JavaScript Format Phone Number

[JavaScriptBank]

Decorate your webpage with this great animated document effect! Watch as snow fall gently trickles down the page, then disappear. The image of snow flakes used is changeable, so snow definitely isn't ... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

Demo: JavaScript Falling Snowflakes with images

How to setup

Step 1: Place JavaScript below in your HEAD section
JavaScript

<script type="text/javascript">

/******************************************
* Snow Effect Script- By Altan d.o.o. (http://www.altan.hr/snow/index.html)
******************************************/
  
  //Configure below to change URL path to the snow image
  var snowsrc="snow3.gif"
  // Configure below to change number of snow to render
  var no = 10;
  // Configure whether snow should disappear after x seconds (0=never):
  var hidesnowtime = 0;
  // Configure how much snow should drop down before fading ("windowheight" or "pageheight")
  var snowdistance = "pageheight";

///////////Stop Config//////////////////////////////////

  var ie4up = (document.all) ? 1 : 0;
  var ns6up = (document.getElementById&&!document.all) ? 1 : 0;

	function iecompattest(){
	return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
	}

  var dx, xp, yp;    // coordinate and position variables
  var am, stx, sty;  // amplitude and step variables
  var i, doc_width = 800, doc_height = 600; 
  
  if (ns6up) {
    doc_width = self.innerWidth;
    doc_height = self.innerHeight;
  } else if (ie4up) {
    doc_width = iecompattest().clientWidth;
    doc_height = iecompattest().clientHeight;
  }

  dx = new Array();
  xp = new Array();
  yp = new Array();
  am = new Array();
  stx = new Array();
  sty = new Array();
  snowsrc=(snowsrc.indexOf("dynamicdrive.com")!=-1)? "snow.gif" : snowsrc
  for (i = 0; i < no; ++ i) {  
    dx[i] = 0;                        // set coordinate variables
    xp[i] = Math.random()*(doc_width-50);  // set position variables
    yp[i] = Math.random()*doc_height;
    am[i] = Math.random()*20;         // set amplitude variables
    stx[i] = 0.02 + Math.random()/10; // set step variables
    sty[i] = 0.7 + Math.random();     // set step variables
		if (ie4up||ns6up) {
      if (i == 0) {
        document.write("<div id="dot"+ i +"" style="POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;"><a href="http://dynamicdrive.com"><img src='"+snowsrc+"' border="0"></a></div>");
      } else {
        document.write("<div id="dot"+ i +"" style="POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;"><img src='"+snowsrc+"' border="0"></div>");
      }
    }
  }

  function snowIE_NS6() {  // IE and NS6 main animation function
    doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10;
		doc_height=(window.innerHeight && snowdistance=="windowheight")? window.innerHeight : (ie4up && snowdistance=="windowheight")?  iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight")? iecompattest().scrollHeight : iecompattest().offsetHeight;
    for (i = 0; i < no; ++ i) {  // iterate for every dot
      yp[i] += sty[i];
      if (yp[i] > doc_height-50) {
        xp[i] = Math.random()*(doc_width-am[i]-30);
        yp[i] = 0;
        stx[i] = 0.02 + Math.random()/10;
        sty[i] = 0.7 + Math.random();
      }
      dx[i] += stx[i];
      document.getElementById("dot"+i).style.top=yp[i]+"px";
      document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+"px";  
    }
    snowtimer=setTimeout("snowIE_NS6()", 10);
  }

	function hidesnow(){
		if (window.snowtimer) clearTimeout(snowtimer)
		for (i=0; i<no; i++) document.getElementById("dot"+i).style.visibility="hidden"
	}
		

if (ie4up||ns6up){
    snowIE_NS6();
		if (hidesnowtime>0)
		setTimeout("hidesnow()", hidesnowtime*1000)
		}

</script>

Step 2: Download files below
Files
snow3.gif

JavaScript Line Graph script - JavaScript Virtual Keyboard - JavaScript Horizontal Slider