Create a messagebox with an eyecatching background-fade-effect. Add as many messages as you like.... detail

[IMG]hxxp ://w w w.javascriptbank. com/javascript.images/form/messagebox-with-background-fade-effect.jpg[/IMG]
Demo: Messagebox with Background Fade Effect

How to setup

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

Code:

<SCRIPT>
// Messagebox with fading Background

// set your messages. Add as many as you like (you may add additional HTML-tags)
var text=new Array()
text[0]="Thank you for visiting JavaScriptBank. com"
text[1]="Bank of over 2000+ free JavaScript."

// set the corresponding links 
// If you don't want to link a message just add a "#" instead of an URL
var textlink=new Array()
textlink[0]="hxxp ://javascriptbank. com"
textlink[1]="hxxp ://javascriptbankcom"
textlink[2]="hxxp ://javascriptbankcom"

// set the corresponding targets 
// Acceptable values are "_blank", "_self", "_top" or the name of any frame
var texttarget=new Array()
texttarget[0]="_blank"
texttarget[1]="_self"
texttarget[2]="_top"

// set the font of the messages
var textfont="Arial"

// set the font-color of the messages
var textfontcolor="#FFFFFF"

// set the rollover-fontcolor of the messages
var textfontcolorrollover="#FF0000"

// set the font-size of the messages (CSS-values)
var textfontsize=9

// set the font-size for Netscape 4x (HTML-values)
var textfontsizeHTML=2

// set the font backgroundcolor of the textbox
var textbgcolor="#000000"

// set the textweight (normal or bold)
var textweight="nomal"

// set the fontstyle (normal or italic)
var textitalic="normal"

// set the width of the textbox (pixels)
var textwidth=240

// set the height of the textbox (pixels)
var textheight=60

// set the pause (seconds)
var textpause=2

// set the width of the border
var textborder=2

// set the color of the border
var textbordercolor="#FF0000"

// set the horizontal alignment of the messages (center, left, right)
var textalign="center"

// set the vertival alignment of the messages (middle, top, bottom)
var textvalign="middle"

// do not edit below this line
var textdecoration="none"
var textweightA="<b>"
var textweightB="</b>"
var textitalicA=""
var textitalicB=""
var transparency=100
var transparencystep=2

var x_pos=0
var y_pos=0
var i_text=0
var textsplit=""
var i_textsplit=0
var i_mark=0
var tickercontent
var pausefade=30
textpause*=1000

var oneloopfinished=false

var browserinfos=navigator.userAgent 
var ie=document.all&&!browserinfos.match(/Opera/)
var ns4=document.layers
var ns6=document.getElementById&&!document.all&&!browserinfos.match(/Opera/)
var opera=browserinfos.match(/Opera/)  
var browserok=ie||ns4||ns6||opera

function changecontent() {
	getcontent()
	i_text++
	if (i_text>=text.length) {i_text=0}	
	if (ie) {
		ticker.innerHTML=content
		fadeout()
	}
	if (opera || ns6) {
		document.getElementById('ticker').innerHTML=content
		var texttimer=setTimeout("changecontent()",2*textpause)
	}
	if (ns4) {
		document.roof.document.ticker.document.write(content)
		document.roof.document.ticker.document.close()
		var texttimer=setTimeout("changecontent()",textpause)
	}	
}

function fadein() {
	if (transparency<100){
		transparency+=transparencystep
		if (ie) {
			document.all.tickerbg.filters.alpha.opacity=transparency
		}
		var fadetimer=setTimeout("fadein()",pausefade)
	}
	else {
		clearTimeout(fadetimer)
		setTimeout("changecontent()",1000)
	}
}

function fadeout() {
	if (transparency>0){
		transparency-=transparencystep
		if (ie) {
			document.all.tickerbg.filters.alpha.opacity=transparency
		}
		if (ns6) {
			document.getElementById('tickerbg').style.MozOpacity=transparency/100
		}
		var fadetimer=setTimeout("fadeout()",pausefade)
	}
	else {
		clearTimeout(fadetimer)
		setTimeout("fadein()",textpause)
	}
}

getcontent()
function getcontent() {
	if (ie || opera) {
		var tablewidth=textwidth-2*textborder
		var tableheight=textheight-2*textborder
	}
	else {
		var tablewidth=textwidth
		var tableheight=textheight
	}
	if (ie || ns6) {	
		var padding=parseInt(textborder)+3
		content="<table width="+tablewidth+" height="+tableheight+" cellpadding="+padding+" cellspacing=0 border=0><tr valign="+textvalign+"><td align="+textalign+">"
		content+="<a href=\""+textlink[i_text]+"\" target=\""+texttarget[i_text]+"\" style=\"position:relative;font-family:\'"+textfont+"\';font-size:"+textfontsize+"pt;font-weight:"+textweight+";text-decoration:"+textdecoration+";color:"+textfontcolor+";font-style:"+textitalic+";\" onMouseOver=\"this.style.color=\'"+textfontcolorrollover+"\'\" onMouseOut=\"this.style.color=\'"+textfontcolor+"\'\">"
		content+=text[i_text]
		content+="</a></td></tr></table>"
	}
	else {	
		content="<table width="+tablewidth+" height="+tableheight+" cellpadding="+textborder+" cellspacing=0><tr valign="+textvalign+"><td align="+textalign+">"
		content+="<a href=\""+textlink[i_text]+"\" target=\""+texttarget[i_text]+"\" style=\"position:relative;font-family:\'"+textfont+"\';font-size:"+textfontsize+"pt;font-weight:"+textweight+";text-decoration:"+textdecoration+";color:"+textfontcolor+";font-style:"+textitalic+";\">"
		content+=text[i_text]
		content+="</a></td></tr></table>"

		framecontent="<table width="+tablewidth+" height="+tableheight+" cellpadding=0 cellspacing=0 border="+textborder+"><tr><td>"
		framecontent+="<font color=\""+textbgcolor+"\">"
		framecontent+="."
		framecontent+="</font>"
		framecontent+="</td></tr></table>"
	}
}

if (ie || ns6 || opera) {
	if (ns6) {
		textwidth-=2*textborder
		textheight-=2*textborder
	}
	document.write("<div id=\"roof\" style=\"position:relative;width:"+textwidth+"px;height:"+textheight+"px;font-family:\'"+textfont+"\';border-style:solid;border-color:"+textbordercolor+";border-width:"+textborder+"px;background-color:"+textbgcolor+";\">")
	
	if (!opera && !ns6 ) {
		document.write("<div id=\"tickerbg\" style=\"position:absolute;top:"+-textborder+"px;left:"+-textborder+"px;width:"+textwidth+"px;height:"+textheight+"px;font-family:\'"+textfont+"\';font-size:"+textfontsize+"pt;font-weight:"+textweight+";font-style:"+textitalic+";border-style:solid;border-color:"+textbordercolor+";border-width:"+textborder+"px;background-color:"+textfontcolor+";overflow:hidden\;filter:alpha(opacity=100)\">")
		document.write("</div>")
	}
	
	document.write("<div id=\"ticker\" style=\"position:absolute;top:"+-textborder+"px;left:"+-textborder+"px;width:"+textwidth+"px;height:"+textheight+"px;font-family:\'"+textfont+"\';font-size:"+textfontsize+"pt;font-weight:"+textweight+";font-style:"+textitalic+";border-style:solid;border-color:"+textbordercolor+";border-width:"+textborder+"px;overflow:hidden\;\">")
	document.write("</div></div>")

	window.onload=changecontent
}

else if (ns4) {
	document.write("<ilayer name=\"roof\" width="+textwidth+" height="+textheight+">")
		document.write("<layer name=\"tickerframe\" width="+textwidth+" height="+textheight+" top=0 left=0 bgcolor="+textbgcolor+">")
		document.write(framecontent)
		document.write("</layer>")
		document.write("<layer name=\"ticker\" width="+textwidth+" height="+textheight+" top=0 left=0>")
		document.write()
		document.write("</layer>")
	document.write("</ilayer>")
	window.onload=changecontent
}

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

Phong is an incredible ping-pong game with an even more impressive AI (artificial intelligence). Play against the computer, and see if you can win (take it for us, it's possible). We encourage DHTML p... detail

[IMG]hxxp ://w w w.javascriptbank. com/javascript.images/game/dhtml-pong-script.jpg[/IMG]
Demo: DHTML Pong script

How to setup

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

Code:

<style type="text/css">
#pongTable {
	position: absolute;
	top: 20px;
	left: 20px;
	width: 400px;
	height: 300px;
	border: 4px solid #CCC;
	background-color: #F3F3F3;
	z-index: 1;
}
#playerOne {
	position: absolute;
	top: 196px;
	left: 45px;
	width: 10px;
	height: 35px;
	background-color: #777;
	z-index: 2;
}
#playerTwo {
	position: absolute;
	top: 196px;
	left: 390px;
	width: 10px;
	height: 35px;
	background-color: #777;
	z-index: 2;
}
#ball {
	position: absolute;
	top: 160px;
	left: 210px;
	width: 7px;
	height: 7px;
	clip: rect(0px 7px 7px 0px);
	background-color: #555;
	z-index: 2;
	display: none;
}
#click {
	position: absolute;
	top: 160px;
	left: 27px;
	width: 400px;
	text-align: center;
	font-family: Tahoma;
	font-size: 10px;
	z-index: 3;
}
#scores {
	position: absolute;
	top: 330px;
	left: 24px;
	width: 400px;
	font-family: Tahoma;
	font-size: 11px;
	z-index: 3;	
}
</style>
	<!--
    	This script downloaded from w w w.JavaScriptBank. com
    	Come to view and download over 2000+ free javascript at w w w.JavaScriptBank. com
	-->

Step 2: Place JavaScript below in your HEAD section
JavaScript

Code:

<script type="text/javascript">

/***********************************************
* DHTML Phong script- © nathan (hxxp ://w w w.n-son. com/)
***********************************************/

var ballAng;
var speed = 3;
var ping = 5;
var pong = 0;
var mouseSpeed;
var tempY;
function init() {
	document.getElementById("click").style.display = "none";
	document.getElementById("ball").style.display = "inline";
	with( document.getElementById("ball").style ) {
		top = "160px";
		left = "210px";
	}
	document.onmouseup = null;
	document.onmousemove = movePaddle;
	ballAng = Math.round( Math.random() * 100 ) + 130;
	moveDaBall = setInterval("moveBall()", 10);
}
function movePaddle(e) {
	e = (e)?e:event;
	if( tempY ) {
		mouseSpeed = Math.round((e.clientY - tempY) * 1.5);
		if( mouseSpeed == 0 ) mouseSpeed = 1;
	}
	with( document.getElementById("playerOne").style ) {
		top = e.clientY - 18 + "px";
		if( parseInt(top) < 24 || parseInt(top) > 289 ) {
			if( parseInt(top) < 24 ) {
				top = "24px";
			} else {
				top = "289px";
			}
		}
	}
	tempY = e.clientY;
}
function moveBall() {
	var ballX = parseInt(document.getElementById("ball").style.left);
	var ballY = parseInt(document.getElementById("ball").style.top);
	var playOneX = parseInt( document.getElementById("playerOne").style.left );
	var playOneY = parseInt( document.getElementById("playerOne").style.top );
	var playTwoX = parseInt( document.getElementById("playerTwo").style.left );
	var playTwoY = parseInt( document.getElementById("playerTwo").style.top );
	if( ballY >= (playOneY - 5) && ballY <= (playOneY + 35 + 5) && ballX >= playOneX && ballX <= (playOneX + 10) ) {
		if( pong == 3 ) {
			ping++;
			pong = 0;
		} else {
			pong++;
		}
		document.getElementById("ball").style.left = playOneX + 10 + "px";
		ballAng = 180 - ballAng - mouseSpeed;
	}
	if( ballY >= (playTwoY - 5) && ballY <= (playTwoY + 35 + 5) && ballX >= playTwoX && ballX <= (playTwoX + 10) ) {
		if( pong == 3 ) {
			ping++;
			pong = 0;
		} else {
			pong++;
		}
		document.getElementById("ball").style.left = playTwoX + "px";
		ballAng = 180 - ballAng;
	}
	if( ballY < 25 || ballY > 316 ) {
		document.getElementById("ball").style.top = (ballY < 25)?25+"px":316+"px";
		ballAng = 360 - ballAng;
	}
	if( ballX <= 24 || ballX >= 417 ) {
		document.getElementById("ball").style.left = (ballX <=24)?24+"px":417+"px";
		if( ballX<= 24 ) {
			endPoint(document.getElementById("twoScore"));
		} else {
			endPoint(document.getElementById("oneScore"));
		}
	}
	moveAI( ballY );
	moveObjAtAngle( document.getElementById("ball"), ballAng, ping);
}
function moveObjAtAngle( obj, ang, dist ) {
	with( obj.style ) {
		left = parseInt(left) + ( dist * Math.cos( ang * (Math.PI/180) ) ) + "px";
		top  = parseInt(top)  - ( dist * Math.sin( ang * (Math.PI/180) ) ) + "px";
	}
}
function moveAI( y ) {
	var AI = document.getElementById("playerTwo");
	y = y - 10;
	y = parseInt(AI.style.top) + ((y - parseInt(AI.style.top)) / speed);
	if( y < 24 || y > 289 ) {
		if( y < 24 ) {
			y = 24;
		} else {
			y = 289;
		}
	}
	AI.style.top = y +"px";
}
function endPoint(place) {
	clearInterval(moveDaBall);
	ping = 7;
	pong = 0;
	document.onmouseup = init;
	document.getElementById("click").innerHTML = "click to continue";
	place.innerHTML = parseInt(place.innerHTML) + 1;
	if( parseInt(place.innerHTML) == 10 ) {
		if( place.id == "oneScore" ) {
			endGame(1);
		} else {
			endGame(0);
		}
	}
	document.getElementById("click").style.display = "inline";
}
function endGame(win) {
	document.onmouseup = restartGame;
	if( win ) {
		document.getElementById("click").innerHTML = "<strong>you are dah winnah!</strong><br /> click to start over";
	} else {
		document.getElementById("click").innerHTML = "<strong>you are dah losah!</strong><br /> click to start over";
	}
}
function restartGame() {
	document.getElementById("oneScore").innerHTML = 0;
	document.getElementById("twoScore").innerHTML = 0;
	init();
}
document.onmouseup = init;
</script>
	<!--
    	This script downloaded from w w w.JavaScriptBank. com
    	Come to view and download over 2000+ free javascript at w w w.JavaScriptBank. com
	-->

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

Code:

<div id="pongTable">
	<div style="float: right; width: 50%; height: 100%; border-left: 2px dashed #DDD;"> </div>
</div>
<div id="playerOne" style="left: 45px; top: 146px"> </div>
<div id="playerTwo" style="left: 390px; top: 146px"> </div>
<div id="ball" style="left: 210px; top: 160px"> </div>
<div id="click">click to continue</div>

<div id="scores">
	<span style="float: left;" id="oneScore">0</span>
	<span style="float: right;" id="twoScore">0</span>
</div>
	<!--
    	This script downloaded from w w w.JavaScriptBank. com
    	Come to view and download over 2000+ free javascript at w w w.JavaScriptBank. com
	-->

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

Take your webpage into the stars with this 3D animation starfield script! The stars travel towards you in an incessant manner. This JavaScript ... detail

[IMG]hxxp ://w w w.javascriptbank. com/javascript.images/multimedia/3d-starfield-using-images.jpg[/IMG]
Demo: 3D Starfield using Images

How to setup

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

Code:

<SCRIPT language=JavaScript1.2>

//3D Starfield by Mikhail Ansolis , ansolis@yahoo. com

//Pre-load your image below!
//CHANGE 5 to the number of images listed below
grphcs=new Array(5) 

//PRELOAD the involved images (extend or contract variables according to # of images used)
Image0=new Image();
Image0.src=grphcs[0]="../image/Floating_star/index_f1.gif"
Image1=new Image();
Image1.src=grphcs[1]="../image/Floating_star/index_f2.gif"
Image2=new Image();
Image2.src=grphcs[2]="../image/Floating_star/index_f3.gif"
Image3=new Image();
Image3.src=grphcs[3]="../image/Floating_star/index_f4.gif"
Image4=new Image();
Image4.src=grphcs[4]="../image/Floating_star/index_f3.gif"

//SPECIFY number of images to randomly display concurrently from list above. Less the more efficient
Amount=20; 
Ypos=new Array();
Xpos=new Array();
Zpos=new Array();
//SpeedX=new Array();
//SpeedY=new Array();
ScrXpos=new Array();
ScrYpos=new Array();
Speed=new Array();
Size=new Array();
Step=new Array();
ns=(document.layers)?1:0;
ie=document.all&&navigator.userAgent.indexOf("Opera")==-1

if (ns){
for (i = 0; i < Amount; i++){
 var P=Math.floor(Math.random()*grphcs.length);
 rndPic=grphcs[P];
 document.write("<LAYER NAME='sn"+i+"' LEFT=0 TOP=0><img src="+rndPic+"></LAYER>");
} //end for
} //end if
else if (ie){ //IE
document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i = 0; i < Amount; i++){
 document.write('<img id="si'+i+'" src="'+grphcs[Math.round((i+1)*(grphcs.length-1)/Amount)]+'"style="position:absolute;top:0px;left:0px">');
}
document.write('</div></div>');
}

//initialize star properties
if (ie||ns){
WinHeight=(ns)?window.innerHeight-20:window.document.body.clientHeight;
WinWidth=(ns)?window.innerWidth-70:window.document.body.clientWidth;
for (i=0; i < Amount; i++){
  Speed[i]=(i+1)*6/Amount+4; //speed range from 4 to 10
  Xpos[i] = (Math.random()*WinWidth-WinWidth/2)*(Amount-i/3)/Amount;
  Ypos[i] = (Math.random()*WinHeight-WinHeight/2)*(Amount-i/3)/Amount;
  Zpos[i] = Math.random()*900*(Amount-i/3)/Amount+100;
}
}

function fly(){
var WinHeight=(ns)?window.innerHeight-20:window.document.body.clientHeight;
var WinWidth=(ns)?window.innerWidth-70:window.document.body.clientWidth;
var hscrll=(ns)?window.pageYOffset:document.body.scrollTop;

for (i=0; i < Amount; i++){
 Zpos[i]-=Speed[i];
 if (ScrXpos[i]>WinWidth || ScrXpos[i]<0 || ScrYpos[i]>WinHeight || ScrYpos[i]<0 || Zpos[i]<=0) { //generate new stars
  Speed[i]=(i+1)*6/Amount+4; //speed range from 4 to 10
  Xpos[i] = (Math.random()*WinWidth-WinWidth/2)*(Amount-i/3)/Amount;
  Ypos[i] = (Math.random()*WinHeight-WinHeight/2)*(Amount-i/3)/Amount;
  Zpos[i] = Math.random()*900*(Amount-i/3)/Amount+100;
 }
 ScrXpos[i]=Xpos[i]/Zpos[i]*100 + WinWidth/2;
 ScrYpos[i]=Ypos[i]/Zpos[i]*100 + WinHeight/2;

 if (ns){
  document.layers['sn'+i].left=ScrXpos[i];
  document.layers['sn'+i].top=ScrYpos[i]+hscrll;
 }
 else{ //IE
  eval("document.all.si"+i).style.left=ScrXpos[i];
  eval("document.all.si"+i).style.top=ScrYpos[i]+hscrll;
 }
} //end for
setTimeout('fly()',20);
} //end fly

if (ie||ns)
window.onload=fly
//-->
</SCRIPT>
	<!--
    	This script downloaded from w w w.JavaScriptBank. com
    	Come to view and download over 2000+ free javascript at w w w.JavaScriptBank. com
	-->

Step 2: Download files below
Files
Floating_star_images.zip

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

Add a watery, wavy effect to a header text with this mesmerizing script!... detail

[IMG]hxxp ://w w w.javascriptbank. com/javascript.images/text/wavy-text-script.jpg[/IMG]
Demo: Wavy Text script

How to setup

Step 1: CSS below for styling thescript, place it into HEAD section
CSS

Code:

<STYLE type=text/css>BODY {
	BACKGROUND-COLOR: gray; COLOR: lightyellow; TEXT-ALIGN: center
}
SPAN {
	FILTER: dropshadow(color=black); HEIGHT: 10px; WIDTH: 10px
}
</STYLE>
	<!--
    	This script downloaded from w w w.JavaScriptBank. com
    	Come to view and download over 2000+ free javascript at w w w.JavaScriptBank. com
	-->

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

Code:

<SCRIPT language=JavaScript type=text/javascript>
<!--
var T=75; // - Timer
var text="Bank of over 2000+ free JavaScripts"; // - Text to Modify (Variable Length String)
var finds=new Array();
window.onload=main;

function main()
{
 createSpans();
 findPipe();
 replacePipe();
 modifySpans();
}
function createSpans()
{
for(var x=0;x<text.length;x++)
{
 var count=x+1;
 var span=document.createElement('span');
 		 span.id='sid'+x;
		 span.innerHTML=text.substring(count,count-1);
		 with(span.style)
		 {
		   fontWeight="bold";
		 }
		 span.onclick=HUCKO;
		 document.body.appendChild(span);
}
}
var RHucko1=0;
function findPipe()
{
 for(var x=0;x<text.length;x++)
 {
  if(x==0)
	  finds[x]=text.lastIndexOf(' ');
	else 
    finds[x]=text.lastIndexOf(' ',finds[x-1]-1);
 }
}
function replacePipe()
{
var spans=document.getElementsByTagName('span');
 for(var x=0;x<finds.length;x++)
 {
  if(finds[x]==-1)
	{
	
	}
	else
	{
    spans[finds[x]].innerHTML="<b style='visibility:hidden;'>_</b>";
	}
 }
}
function HUCKO(){location.href="hxxp ://JavaScriptBank. com";}
var cnt=0,cntII=1,cntIII=text.length-1;cntIV=text.length-2;
function modifySpans()
{
 if(cnt<text.length)
 {
  document.getElementById('sid'+cnt).style.fontSize=40;
	cnt+=2;
 }
 else if(cntII<text.length)
 {
  document.getElementById('sid'+cntII).style.fontSize=40;
	cntII+=2;
 }
 else if(cntIII>=0)
 {
  document.getElementById('sid'+cntIII).style.fontSize=10;
  cntIII-=2;
 }

  else if(cntIV>=0)
 {
  document.getElementById('sid'+cntIV).style.fontSize=10;
  cntIV-=2;
 }

 else
 {
	   cnt=0;cntII=1;

	 if(RHucko1<1)
	 {
	   cntIII=text.length-1;
		 T=50; // - Timer is Modified
	 }
	RHucko1+=1;
 }
 setTimeout("modifySpans();",T);
}
//-->
</SCRIPT>
	<!--
    	This script downloaded from w w w.JavaScriptBank. com
    	Come to view and download over 2000+ free javascript at w w w.JavaScriptBank. com
	-->

JavaScript Make link open in new tab/window - JavaScript World clock - circumference calculator

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

[IMG]hxxp ://w w w.javascriptbank. com/javascript.images/time/countdown-timer.jpg[/IMG]
Demo: JavaScript Countdown Timer

How to setup

Step 1: CSS below for styling thescript, place it into HEAD section
CSS

Code:

<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 w w w.JavaScriptBank. com
    	Come to view and download over 2000+ free javascript at w w w.JavaScriptBank. com
	-->

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

Code:

<script language="javascript">
// Created by: Neill Broderick :: hxxp ://w w w.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 w w w.JavaScriptBank. com
    	Come to view and download over 2000+ free javascript at w w w.JavaScriptBank. com
	-->

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

Code:

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

JavaScript Make link open in new tab/window - JavaScript World clock - circumference calculator

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

[IMG]hxxp ://w w w.javascriptbank. com/javascript.images/image/image-slideshow-transition.jpg[/IMG]
Demo: Image slideshow transition

How to setup

Step 1: Place JavaScript below in your HEAD section
JavaScript

Code:

<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 w w w.JavaScriptBank. com
    	Come to view and download over 2000+ free javascript at w w w.JavaScriptBank. com
	-->

Step 2: Place HTML below in your BODY section
HTML

Code:

<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 w w w.JavaScriptBank. com
    	Come to view and download over 2000+ free javascript at w w w.JavaScriptBank. com
	-->

Command to print web page in javascript - Javascript Time Picker - JavaScript Go To URL Box

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

[IMG]hxxp ://w w w.javascriptbank. com/javascript.images/multimedia/web-based-music-player.jpg[/IMG]
Demo: Web based Music Player

How to setup

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

Code:

<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: Copy & Paste HTML code below in your BODY section
HTML

Code:

<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 Music Player - Random Text Generator - Floating Image Script

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

[IMG]hxxp ://w w w.javascriptbank. com/javascript.images/link/make-link-open-in-new-tab-window.jpg[/IMG]
Demo: Make link open in new tab/window

How to setup

Step 1: Place JavaScript below in your HEAD section
JavaScript

Code:

<script language=javascript>
/*
	Kevin Yank
	hxxp ://w w w.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 w w w.JavaScriptBank. com
    	Come to view and download over 2000+ free javascript at w w w.JavaScriptBank. com
	-->

Step 2: Place HTML below in your BODY section
HTML

Code:

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

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

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 body... detail at JavaScriptBank. com - 2.000+ free JavaScript codes

[IMG]hxxp ://w w w.javascriptbank. com/javascript.images/ajax/ajax-page-content-loader.jpg[/IMG]
Demo: AJAX Page Content Loader

How to setup

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

Code:

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

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

Code:

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

// Created by: Eddie Traversa (2005) :: hxxp ://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

Code:

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

Step 4: downloads
Files
demo.xml

Javascript Music Player - Random Text Generator - Floating Image Script