propellerads adcombo
Dismiss Notice
Welcome to Our Community
Wanting to join the rest of our members? Feel free to sign up today.

Usefull JavaScripts

Discussion in 'Programming and Scripts' started by JavaScriptBank, Aug 23, 2009.

  1. JavaScriptBank

    JavaScriptBank Affiliate affiliate

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

    [​IMG]
    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

     
  2. JavaScriptBank

    JavaScriptBank Affiliate affiliate

    38
    0
    0
    Messagebox with Background Fade Effect

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

    [​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
    	-->
    
     
  3. JavaScriptBank

    JavaScriptBank Affiliate affiliate

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

    [​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​
     
  4. JavaScriptBank

    JavaScriptBank Affiliate affiliate

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

    [​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​
     
  5. JavaScriptBank

    JavaScriptBank Affiliate affiliate

    38
    0
    0
    Wavy Text script

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

    [​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​
     
  6. JavaScriptBank

    JavaScriptBank Affiliate affiliate

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

    [​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​
     
  7. JavaScriptBank

    JavaScriptBank Affiliate affiliate

    38
    0
    0
    Image slideshow transition

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

    [​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​
     
  8. JavaScriptBank

    JavaScriptBank Affiliate affiliate

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

    [​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​
     
  9. JavaScriptBank

    JavaScriptBank Affiliate affiliate

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

    [​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​
     
  10. JavaScriptBank

    JavaScriptBank Affiliate affiliate

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

    [​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​
     
  11. JavaScriptBank

    JavaScriptBank Affiliate affiliate

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

    [​IMG]
    Demo: Top 10 JavaScript Frameworks by Google, Yahoo, Bing

    How to setup






    JavaScript Countdown Timer - JavaScript Currency Format - JavaScript Format Phone Number​
     
  12. JavaScriptBank

    JavaScriptBank Affiliate affiliate

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

    [​IMG]
    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​
     
  13. JavaScriptBank

    JavaScriptBank Affiliate affiliate

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

    [​IMG]
    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​
     
  14. JavaScriptBank

    JavaScriptBank Affiliate affiliate

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

    [​IMG]
    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​
     
  15. JavaScriptBank

    JavaScriptBank Affiliate affiliate

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

    [​IMG]
    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()​
     
  16. ranacseruet

    ranacseruet Affiliate affiliate

    16
    0
    0
    Helpfull & nice tutorials

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

    JavaScriptBank Affiliate affiliate

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

    [​IMG]
    Demo: JavaScript Top 10 Beautiful Christmas Countdown Timers

    How to setup






    JavaScript Spotlight - JavaScript Validate E-Mail - AJAX Page Content Loader​
     
  18. JavaScriptBank

    JavaScriptBank Affiliate affiliate

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

    [​IMG]
    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​
     
  19. JavaScriptBank

    JavaScriptBank Affiliate affiliate

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

    [​IMG]
    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​
     
  20. JavaScriptBank

    JavaScriptBank Affiliate affiliate

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

    [​IMG]
    Demo: JavaScript 40 Super Nice JavaScript Extensions and Plugins

    How to setup






    AJAX news ticker - JavaScript Refresh Page - JavaScript Unclosable Window​
     

Featured Resources (View All)

adsxposed