Usefull JavaScripts

JavaScriptBank · Aug 22, 2009

Good and Nice JavaScripts

Floating images script

One important feature of DHTML is it's ability to move elements around the page freely, without having to be tied down to one single spot on the page. 'Virtual Max' took full advantage of this feature... detail

Demo: Floating images script

How to setup

Step 1: Place JavaScript below in your HEAD section
JavaScript

Code:

<script type="text/javascript">
/***********************************************
* Floating image script- By Virtual_Max (hxxp ://w w w.geocities. com/siliconvalley/lakes/8620)
***********************************************/

//Step 1: Define unique variable names depending on number of flying images (ie:3):
var flyimage1, flyimage2, flyimage3

function pagestart(){
//Step 2: Using the same variable names as 1), add or delete more of the below lines (60=width, height=80 of image):
 flyimage1=new Chip("flyimage1",47,68);
 flyimage2=new Chip("flyimage2",47,68);
 flyimage3=new Chip("flyimage3",47,68);


//Step 3: Using the same variable names as 1), add or delete more of the below lines:
movechip("flyimage1");
movechip("flyimage2");
movechip("flyimage3");

}

if (window.addEventListener)
window.addEventListener("load", pagestart, false)
else if (window.attachEvent)
window.attachEvent("onload", pagestart)
else if (document.getElementById)
window.onload=pagestart

</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:

<DIV ID="flyimage1" STYLE="position:absolute; left: -500px; width:47; height:68;">

<A HREF="hxxp ://jsbank.topcities. com"><IMG SRC="ballon4.gif" BORDER=0></a>
</DIV>

<DIV ID="flyimage2" STYLE="position:absolute; left: -500px; width:47; height:68;">
<A HREF="hxxp ://jsbank.topcities. com"><IMG SRC="ballon3.gif" BORDER=0></a>
</DIV>

<DIV ID="flyimage3" STYLE="position:absolute; left: -500px; width:47; height:68;">
<A HREF="hxxp ://jsbank.topcities. com"><IMG SRC="ballon2.gif" BORDER=0></a>
</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
	-->

Step 3: Download files below
Files
moveobj.js

ballon2.gif
ballon3.gif
ballon4.gif

Copyright said:
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 · Sep 8, 2009

Messagebox with Background Fade Effect

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

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
	-->

JavaScriptBank · Sep 21, 2009

DHTML Pong script

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

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

JavaScriptBank · Sep 28, 2009

3D Starfield using Images

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

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

JavaScriptBank · Oct 5, 2009

Wavy Text script

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

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

JavaScriptBank · Oct 12, 2009

JavaScript Countdown Timer

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: 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

JavaScriptBank · Oct 21, 2009

Image slideshow transition

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

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

JavaScriptBank · Oct 25, 2009

Web based Music Player

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: 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

JavaScriptBank · Nov 1, 2009

Make link open in new tab/window

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: 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

JavaScriptBank · Nov 9, 2009

AJAX Page Content Loader

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

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

JavaScriptBank · Nov 16, 2009

Top 10 JavaScript Frameworks by Google, Yahoo, Bing

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

top-10-javascript-frameworks-by-google--yahoo--bing.jpg

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

How to setup

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

JavaScriptBank · Nov 19, 2009

Time Picker with child window

This JavaScript code - date picker helps you choose a time through a popup window. Perhaps this feature is not new on 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

Code:

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

Step 2: Place HTML below in your BODY section
HTML

Code:

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

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

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

JavaScriptBank · Nov 22, 2009

Fading Slide Show

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

Code:

<script>
/* 
	Original:  CodeLifter. com (support@codelifter. com)
	Web Site:  hxxp ://w w w.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 w w w.JavaScriptBank. com
    	Come to view and download over 2000+ free javascript at w w w.JavaScriptBank. com
	-->

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

Code:

<body onLoad="runSlideShow()">
<img id="VU" src="logojs.gif" name='SlideShow'>
</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
	-->

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

JavaScriptBank · Nov 29, 2009

Virtual Keyboard

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

Code:

<script type="text/javascript" src="vk_loader.js" ></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:

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

Step 3: downloads
Files
Virtual_Keyboard.zip

AJAX news ticker - JavaScript Refresh Page - JavaScript Unclosable Window

JavaScriptBank · Dec 7, 2009

Validate E-Mail

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: Use JavaScript code below to setup the script
JavaScript

Code:

<script language="javascript">
// Created by: Francis Cocharrua :: hxxp ://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 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:

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

Javascript floating message - Javascript multi level drop down menu - JavaScript in_array()

ranacseruet · Dec 8, 2009

Helpfull & nice tutorials

hi, happy to get these good & nice tutorials... Thanks a lot & hope to get more in near future

JavaScriptBank · Dec 9, 2009

Top 10 Beautiful Christmas Countdown Timers

Only a fews of days then Christmas will come. And if you are looking for one beautiful countdown timer for waiting Christmas Day 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 Spotlight - JavaScript Validate E-Mail - AJAX Page Content Loader

JavaScriptBank · Dec 13, 2009

Line Graph script

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

Code:

<script type="text/javascript" src="wz_jsgraphics.js"></script>
<script type="text/javascript" src="line.js"></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: Copy & Paste HTML code below in your BODY section
HTML

Code:

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

Step 3: downloads
Files
line.js
wz_jsgraphics.js

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

JavaScriptBank · Dec 16, 2009

Falling Snowflakes with images

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

Code:

<script type="text/javascript">

/******************************************
* Snow Effect Script- By Altan d.o.o. (hxxp ://w w w.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="hxxp ://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: must download files below
Files
snow3.gif

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

JavaScriptBank · Dec 19, 2009

40 Super Nice JavaScript Extensions and Plugins

In the environment of Internet in any country, beside the web promotion - one of Internet marketing UK aspects; if a company or a website want to success; it nee... detail at JavaScriptBank. com - 2.000+ free JavaScript codes

Demo: JavaScript 40 Super Nice JavaScript Extensions and Plugins

How to setup

AJAX news ticker - JavaScript Refresh Page - JavaScript Unclosable Window

The Most Active and Friendliest Affiliate Marketing Community Online!

Usefull JavaScripts

New Member

New Member

New Member

New Member

New Member

New Member

New Member

New Member

New Member

New Member

New Member

New Member

New Member

New Member

New Member

New Member

New Member

New Member

New Member

New Member

The Most Active and Friendliest
Affiliate Marketing Community Online!