Free JavaScript Code Downloads

housefull · Feb 23, 2010

Thanks for sharing Script! It's great

JavaScriptBank · Feb 24, 2010

Rating star script

Need a system to rate an item on your web page? Let's implement the simple script to do that. This script is very easy to setup and modify, you only copy all JavaScript code into your web page (should... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

Demo: JavaScript Rating star script

How to setup

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

Code:

<SCRIPT language=JavaScript>
string="<a href='http://javascriptbank.com/' style='text-decoration: none;'>JavaScriptBank.com</a>"   // string to elastic text
pausetime=100; // time to elastic effect. Decrease to slow

// do not modify below this line
var sizes = new Array("-8px","-4px","-2px","-1px","0px", "1px", "2px", "4px", "8px", "16px", "32px");
sizes.pos = 0; 

function rubberBand()
 {
  var el = document.all.elastic;
  if (el.direction==null)  {el.direction = 1;}
  else if ((sizes.pos > sizes.length-2) || (sizes.pos==0)) {el.direction *= -1;}
  el.style.letterSpacing = sizes[sizes.pos += el.direction];
  setTimeout('rubberBand()',pausetime);
}
rubberBand();

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

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

Code:

<P id=elastic style="FONT-SIZE: 25px; POSITION: relative; TOP: 20px" align=center>
<!-- put desired text below. Replase my text.  HTML tag allowed-->
<A href="http://javascriptbank.com/" style="text-decoration: none;">JavaScriptBank.com</A>
<!-- put desired text above. Replase my text. HTML tag allowed -->
</P>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

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

JavaScriptBank · Mar 2, 2010

Horizontal Slider JavaScript v2.2

Cross-Browser DHTML Horizontal Slide Show: JavaScript concatenates and slides any number of images from right to left. Adjustable: Size, Backgroun... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

Demo: JavaScript Horizontal Slider JavaScript v2.2

How to setup

Step 1: Place CSS below in your HEAD section
CSS

Code:

<STYLE type=text/css>A {
	TEXT-DECORATION: none
}
A:link {
	COLOR: blue
}
A:visited {
	COLOR: blue
}
A:hover {
	COLOR: red; BACKGROUND-COLOR: #66ffff
}
.tab {
	FONT-SIZE: 12px; FONT-FAMILY: Arial,Helvetica
}
.tabc {
	FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: navy; FONT-FAMILY: Arial,Helvetica; TEXT-ALIGN: center
}
.tabt {
	FONT-WEIGHT: bold; FONT-SIZE: 18px; COLOR: red; FONT-FAMILY: Arial,Helvetica; TEXT-ALIGN: center
}
</STYLE>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

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

Code:

<SCRIPT language=JavaScript>
if(top.location != self.location)
top.location.replace(self.location);
</SCRIPT>

<SCRIPT language=javascript>

//If using any portion of this DEMO script,
//one must insert along this notice too:


/***********************************
	vasile barsan
*   http://javascripts.vbarsan.com/
*   This notice may not be removed 
***********************************/

var swidth=310;var sheight=50;var sspeed=2;var resspeed=sspeed;var restart=sspeed;var rspeed=sspeed;var imagef='';
preload1 = new Image();
preload1.src = "../image/gif_logojsb2.gif";
preload2 = new Image();
preload2.src = "../image/gif_logojsb.gif";
preload3 = new Image();
preload3.src = "../image/gif_logojsb2.gif";
var leftimage=new Array();
leftimage[0]='<a href="http://javascriptbank.com"><img src='+preload1.src+' width=310 height=47 alt="JavaScript Bank"></a>';
leftimage[1]='<a href="http://javascriptbank.com"><img src='+preload2.src+' width=310 height=47 alt="JavaScript Bank"></a>';
leftimage[2]='<a href="http://javascriptbank.com"><img src='+preload3.src+' width=310 height=47 alt="JavaScript Bank"></a>';
for(mi=0;mi<leftimage.length;mi++)imagef=imagef+leftimage[mi];
function goup(){if(sspeed!=rspeed*8){sspeed=sspeed*2;restart=sspeed;}}
function start(){if(document.getElementById)firstns6(document.getElementById('slider'));else if(document.all)firstie(slider);else if(document.layers)firstns4(document.slider1.document.slider2);}
var operbr=navigator.userAgent.toLowerCase().indexOf('opera');if(operbr==-1&&navigator.product&&navigator.product=="Gecko"){var agt = navigator.userAgent.toLowerCase();var rvStart = agt.indexOf('rv:');var rvEnd = agt.indexOf(')', rvStart);var check15 = agt.substring(rvStart+3, rvEnd);if(parseFloat(check15)>=1.8) operbr=0;}if (navigator.appVersion.indexOf("Mac")!=-1)operbr=0;
function firstns4(whichdiv){tdivns4=eval(whichdiv);tdivns4.document.write('<nobr>'+imagef+'</nobr>');tdivns4.document.close();thel=tdivns4.document.width;tdivns4.left=swidth;slidens4();}
function slidens4(){if(tdivns4.left>=thel*(-1)){tdivns4.left-=sspeed;setTimeout("slidens4()",100);}else{tdivns4.left=swidth;slidens4();}}
function firstie(whichdiv){tdivie=eval(whichdiv);tdivie.innerHTML=('<nobr>'+imagef+'</nobr>');thel=tdivie.offsetWidth;tdivie.style.pixelLeft=swidth;slideie();}
function slideie(){if(tdivie.style.pixelLeft>thel*(-1)){tdivie.style.pixelLeft-=sspeed;setTimeout("slideie()",100);}else{tdivie.style.pixelLeft=swidth;slideie();}}
function firstns6(whichdiv){tdiv6=eval(whichdiv);tdiv6.innerHTML=('<nobr>'+imagef+'</nobr>');thel=tdiv6.offsetWidth;if(operbr!=-1){opslider.innerHTML='<nobr>'+imagef+'</nobr>';thel=opslider.offsetWidth;}tdiv6.style.left=swidth;slidens6();}
function slidens6(){if(parseInt(tdiv6.style.left)>=thel*(-1)){tdiv6.style.left=parseInt(tdiv6.style.left)-sspeed;setTimeout("slidens6()",100);}else{tdiv6.style.left=swidth;slidens6();}}
</SCRIPT>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Step 3: Place HTML below in your BODY section
HTML

Code:

<BODY onload=start();>
<SCRIPT language=javascript>document.write('<table border=2 align="center" bgcolor="#ccffcc"><tr><td bgcolor="#ffffcc"><div class=tabc><b><a class=tab href="#" onClick="goup();">Speed<br>UP</a></b></div></td><td width='+swidth+'>');if(document.layers)document.write('<span style="borderWidth:0.1px; borderStyle:none; clip:rect(0 '+swidth+' '+sheight+' 0);"><ilayer width='+swidth+' height='+sheight+' name="slider1"><layer class=tabt width='+swidth+' height='+sheight+'>SLIDING SHOW</layer><layer width='+swidth+' height='+sheight+' name="slider2" onMouseover="sspeed=0;" onMouseout="sspeed=resspeed"></layer></ilayer></span>');else {document.write('<div style="position:relative;overflow:hidden;width:'+swidth+';height:'+sheight+';clip:rect(0 '+swidth+' '+sheight+' 0);">');if(operbr!=-1)document.write('<div id="opslider" style="position:absolute;visibility:hidden;"></div>');else document.write('<div class=tabt style="position:absolute;width:'+swidth+';height:'+sheight+';">SLIDING SHOW</div>');document.write('<div id="slider" style="position:relative;height:'+sheight+';" onMouseover="sspeed=0;" onMouseout="sspeed=resspeed"></div></div>');}</SCRIPT>
</TD></TR></TABLE><BR>
</fieldset>
</center>
<SCRIPT language=JavaScript>
function ctrlA0(corp) {
with(corp){
focus(); select()
}
if(document.all){
txt=corp.createTextRange()
txt.execCommand("Copy")
window.status='Text copied to clipboard'
}
else window.status='Press ctrl-c to copy the text to the clipboard'
setTimeout("window.status=''",5000)
}
</SCRIPT>
</body>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

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

JavaScriptBank · Mar 5, 2010

3D self-revolving cube

This is a spinning three dimensional cube. Eight dots revolve by itself to create a motional cube.... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

Demo: JavaScript 3D self-revolving cube

How to setup

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

Code:

<SCRIPT language=javascript>
/*
     This script downloaded from www.JavaScriptBank.com
     Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
*/

<!-- // (c) 2001 Till Nagel, till@netzministerium.de & Rene Sander, rene@netzministerium.de

// ---------------------------------------------------------------------------

// creates cube model with name and (a simple) material
var cubeModel = new Model("cube", new Material("&deg;"));

// defines model points.
// The model's points have to be defined before the respective code is written into the document.
cubeModel.setPoints(createCubeModelPoints());


// ---------------------------------------------------------------------------

// the matrix to transform the model with
var staticRotationMatrix = new Matrix();
staticRotationMatrix.rotateX(0.05);
staticRotationMatrix.rotateY(0.1);

// ---------------------------------------------------------------------------

function initOnLoad() {
	fixNetscape();
	
	// assign layer (only for Netscape 4.x, for all other browsers
	// this is done automatically when writing the point code)
	cubeModel.assignLayers();
	
	// creates and inits matrix to initialize the model
	var initMatrix = new Matrix();
	initMatrix.scale(50, 50, 50);
	// >> begin to work with the model etc.

	// initializes model
	cubeModel.transform(initMatrix);
	
	// >> first draw of the model (recommended)
	cubeModel.draw();
	
	// starts animation
	animate();
}

/*
 * The main animate method. Calls itself repeatedly.
 */
function animate() {
	var delay = 10;
	
	// animates cube model ----------------------------------------

	// rotates the cube
	cubeModel.transform(staticRotationMatrix);
	
	// updates display
	cubeModel.draw();
	
	// calls itself with an delay to decouple client computer speed from the animation speed.
	// result: the animation is as fast as possible.
	setTimeout("animate()", delay);
}



// ---------------------------------------------------------------------------

function createCubeModelPoints() {
	// the cube model
	return new Array(
		//  Point3D( x,  y,  z, m)
		new Point3D( 1,  1,  1, 0),
		new Point3D( 1,  1, -1, 0),
		new Point3D( 1, -1,  1, 0),
		new Point3D( 1, -1, -1, 0),
		new Point3D(-1,  1,  1, 0),
		new Point3D(-1,  1, -1, 0),
		new Point3D(-1, -1,  1, 0),
		new Point3D(-1, -1, -1, 0)
	);
}

// -->
</SCRIPT>

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

Code:

<DIV id=fixnetscape style="POSITION: absolute; VISIBILITY: hidden"></DIV>
<SCRIPT language=JavaScript type=text/javascript>
	<!-- // (c) 2001 Till Nagel, till@netzministerium.de & Rene Sander, rene@netzministerium.de
	
	// MANDATORY: INSERTION OF HTML PART INTO PAGE
	// creates the HTML code representing the model's points
	// NB: This is written directly into the page from within the method	
	cubeModel.createPointCode();
	
	// -->
	</SCRIPT>

Step 3: Download files below
Files
LyrObj.js
3dhtml.js
ColorUtil.js
materials.js

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

JavaScriptBank · Mar 9, 2010

Animated Drop Down Navigation Menu

This free JavaScript will add dropping animation for menus when users move mouse over a specified link, or they are set to appear through click. The menu also allo... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

Demo: JavaScript Animated Drop Down Navigation Menu

How to setup

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

Code:

<style type="text/css" name="jkoutlinemenu.css">
/*
     This script downloaded from www.JavaScriptBank.com
     Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
*/
.outlinemenu{
position: absolute; /*leave this alone*/
display: none; /*leave this alone*/
width: 180px; /*default width of menu*/
border: 1px solid black;
overflow-x: hidden;
}

.outlinemenu ul{
list-style-type: none;
margin: 0;
padding: 0;
}

.outlinemenu ul li a{
background: white;
font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
color: #00014e;
display: block;
width: auto;
padding: 3px 0;
padding-left: 5px;
text-decoration: none;
border-bottom: 1px solid #B5B5B5;
}

.outlinemenu ul li a:visited, .outlinemenu ul li a:active{
color: #00014e;
}

.outlinemenu ul li a:hover{
color: black;
background: #ffffcb;
}

/* Holly Hack for IE \*/
* html .outlinemenu li {height: 1%; }
* html .outlinemenu li a { height: 1%; }
/* End */
</style>

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

Code:

<script type="text/javascript" src="/javascript/jquery.js"></script>
<script type="text/javascript" name="jkoutlinemenu.js">
/***********************************************
* Animated Outline Menu- by JavaScript Kit (www.javascriptkit.com)
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for full source code
***********************************************/
var jkoutlinemenu={

effectduration: 300, //duration of animation, in milliseconds
outlinemenulabels: [],
outlinemenus: [], //array to contain each block menu instances
zIndexVal: 1000, //starting z-index value for drop down menu
$shimobj: null,

addshim:function(){
	$(document.body).append('<IFRAME id="outlineiframeshim" src="'+(location.protocol=="https:"? 'blank.htm' : 'about:blank')+'" style="display:none; left:0; top:0; z-index:999; position:absolute; filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)" frameBorder="0" scrolling="no"></IFRAME>')
	this.$shimobj=$("#outlineiframeshim")
	//alert(this.$shimobj.attr("src"))
},

alignmenu:function(e, outlinemenu_pos){
	var outlinemenu=this.outlinemenus[outlinemenu_pos]
	var $anchor=outlinemenu.$anchorobj
	var $menu=outlinemenu.$menuobj
	var menuleft=($(window).width()-(outlinemenu.offsetx-$(document).scrollLeft())>outlinemenu.actualwidth)? outlinemenu.offsetx : outlinemenu.offsetx-outlinemenu.actualwidth+outlinemenu.anchorwidth //get x coord of menu
	var menutop=($(window).height()-(outlinemenu.offsety-$(document).scrollTop()+outlinemenu.anchorheight)>outlinemenu.actualheight)? outlinemenu.offsety+outlinemenu.anchorheight : outlinemenu.offsety-outlinemenu.actualheight //get y coord of menu
	$menu.css({left:menuleft+"px", top:menutop+"px"})
	this.$shimobj.css({width:outlinemenu.actualwidth+"px", height:outlinemenu.actualheight+"px", left:menuleft+"px", top:menutop+"px", display:"block"})
},

showmenu:function(e, outlinemenu_pos){
	var outlinemenu=this.outlinemenus[outlinemenu_pos]
	var $menu=outlinemenu.$menuobj
	var $menuinner=outlinemenu.$menuinner
	if ($menu.css("display")=="none"){
		this.alignmenu(e, outlinemenu_pos)
		$menu.css("z-index", ++this.zIndexVal)
		$menu.show(this.effectduration, function(){
			$menuinner.css('visibility', 'visible')
		})
	}
	else if ($menu.css("display")=="block" && e.type=="click"){ //if menu is hidden and this is a "click" event (versus "mouseout")
		this.hidemenu(e, outlinemenu_pos)
	}
	return false
},

hidemenu:function(e, outlinemenu_pos){
	var outlinemenu=this.outlinemenus[outlinemenu_pos]
	var $menu=outlinemenu.$menuobj
	var $menuinner=outlinemenu.$menuinner
	$menuinner.css('visibility', 'hidden')
	this.$shimobj.css({display:"none", left:0, top:0})
	$menu.hide(this.effectduration)
},

definemenu:function(anchorid, menuid, revealtype, optwidth, optheight){
	var $=jQuery
	this.outlinemenulabels.push([anchorid, menuid, revealtype, optwidth, optheight])
},

render:function($){
	for (var i=0, labels=this.outlinemenulabels[i]; i<this.outlinemenulabels.length; i++, labels=this.outlinemenulabels[i]){
		this.outlinemenus.push({$anchorobj:$("#"+labels[0]), $menuobj:$("#"+labels[1]), $menuinner:$("#"+labels[1]).children('ul:first-child'), revealtype:labels[2]})
		var outlinemenu=this.outlinemenus[i]	
		outlinemenu.$anchorobj.add(outlinemenu.$menuobj).attr("_outlinemenupos", i+"pos")
		outlinemenu.$menuobj.css(parseInt(labels[3])>10? {width:parseInt(labels[3])+"px"} : {})
		outlinemenu.$menuobj.css(parseInt(labels[4])<outlinemenu.$menuobj.height()? {height:parseInt(labels[4])+"px", overflow:"scroll", overflowX:"hidden"} : {})
		outlinemenu.actualwidth=outlinemenu.$menuobj.outerWidth()
		outlinemenu.actualheight=outlinemenu.$menuobj.outerHeight()
		outlinemenu.offsetx=outlinemenu.$anchorobj.offset().left
		outlinemenu.offsety=outlinemenu.$anchorobj.offset().top
		outlinemenu.anchorwidth=outlinemenu.$anchorobj.outerWidth()
		outlinemenu.anchorheight=outlinemenu.$anchorobj.outerHeight()
		outlinemenu.$menuobj.css("z-index", ++this.zIndexVal).hide()
		outlinemenu.$menuinner.css("visibility", "hidden")
		outlinemenu.$anchorobj.bind(outlinemenu.revealtype=="click"? "click" : "mouseenter", function(e){
				return jkoutlinemenu.showmenu(e, parseInt(this.getAttribute("_outlinemenupos")))
		})
		outlinemenu.$anchorobj.bind("mouseleave", function(e){
				var $menu=jkoutlinemenu.outlinemenus[parseInt(this.getAttribute("_outlinemenupos"))].$menuobj
				if (e.relatedTarget!=$menu.get(0) && $(e.relatedTarget).parents("#"+$menu.get(0).id).length==0){ //check that mouse hasn't moved into menu object
					jkoutlinemenu.hidemenu(e, parseInt(this.getAttribute("_outlinemenupos")))
				}
		})
		outlinemenu.$menuobj.bind("click mouseleave", function(e){
			jkoutlinemenu.hidemenu(e, parseInt(this.getAttribute("_outlinemenupos")))
		})
	} //end for loop
	$(document).bind("click", function(e){
		for (var i=0; i<jkoutlinemenu.outlinemenus.length; i++){
			jkoutlinemenu.hidemenu(e, i)
		}
	}) //end document.click
	$(window).bind("resize", function(){
		for (var i=0; i<jkoutlinemenu.outlinemenus.length; i++){
			var outlinemenu=jkoutlinemenu.outlinemenus[i]	
			outlinemenu.offsetx=outlinemenu.$anchorobj.offset().left
			outlinemenu.offsety=outlinemenu.$anchorobj.offset().top
		}
	})
	jkoutlinemenu.addshim()
}

}

jQuery(document).ready(function($){
	jkoutlinemenu.render($)
})
/*
     This script downloaded from www.JavaScriptBank.com
     Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
*/
</script>

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

Code:

<a href="#" id="designanchor">Web Design Links</a>

<br /><br />

<div style="text-align:right"><a href="#" id="designanchor2">More web Design Links</a></div>


<!--Define HTML for all animated menus at the very end of the page (ie: right before </body> tag)!-->

<div id="mymenu1" class="outlinemenu">
<ul>
<li><a href="http://www.dynamicdrive.com/">JavaScript Kit</a></li>
<li><a href="http://www.dynamicdrive.com/" >Dynamic Drive</a></li>
<li><a href="http://www.javascriptbank.com/">JavaScript Bank</a></li>
<li><a href="http://www.dynamicdrive.com/style/" >CSS Library</a></li>
<li><a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></li>
<li><a href="http://www.javascriptkit.com/domref/">DOM Reference</a></li>
<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
<li><a href="http://www.javascriptbank.com/forum/">JavaScript Forums</a></li>
<li><a href="http://www.javascriptbank.com/service/">JavaScript Services</a></li>
<li><a href="http://www.codingforums.com/" style="border-bottom-width: 0">Coding Forums</a></li>		
</ul>
</div>

<script type="text/javascript">
//jkoutlinemenu.definemenu("anchorid", "menuid", "mouseover|click", optional_width, optional_height)
jkoutlinemenu.definemenu("designanchor", "mymenu1", "mouseover", 180)
</script>


<div id="mymenu2" class="outlinemenu">
<ul>
<li><a href="http://www.dynamicdrive.com/">JavaScript Kit</a></li>
<li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
<li><a href="http://www.javascriptbank.com/">JavaScript Bank</a></li>
<li><a href="http://www.dynamicdrive.com/style/" >CSS Library</a></li>
<li><a href="http://www.javascriptbank.com/forum/">JavaScript Forums</a></li>
<li><a href="http://www.javascriptbank.com/service/">JavaScript Services</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C1/">Horizontal CSS Menus</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C2/">Vertical CSS Menus</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C4/">Image CSS</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C6/">Form CSS</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C5/">DIVs and containers</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C7/">Links & Buttons</a></li>
<li><a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></li>
<li><a href="http://www.javascriptkit.com/domref/">DOM Reference</a></li>
<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
<li><a href="http://www.codingforums.com/" style="border-bottom-width: 0">Coding Forums</a></li>		
</ul>
</div>

<script type="text/javascript">
//jkoutlinemenu.definemenu("anchorid", "menuid", "mouseover|click", optional_width, optional_height)
jkoutlinemenu.definemenu("designanchor2", "mymenu2", "mouseover", 170, 150)
</script>

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

JavaScriptBank · Mar 13, 2010

Top 10 Best JavaScript eBooks that Beginners should Learn

As the title of this post said, you should choose one of these JavaScript ebooks, or some ebooks to start learning if you are JavaScript (or Progamming) beginners. So if you are an expert? Then I hope... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

Demo: JavaScript Top 10 Best JavaScript eBooks that Beginners should Learn

How to setup

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

JavaScriptBank · Mar 16, 2010

RSS AJAX Newsticker

This JavaScript tutorial will show you how to combine RSS, AJAX, and JavaScript to create a real-time RSS ticker.

Thanks to AJAX... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

Demo: JavaScript RSS AJAX Newsticker

How to setup

Step 1: Place JavaScript below in your HEAD section
JavaScript

Code:

<script type="text/javascript" src="rssticker.js"></script>

Step 2: Place HTML below in your BODY section
HTML

Code:

CNN:
<DIV style="HEIGHT: 100px; border-style: dotted; border-width: 1px; background-color: silver; text-align: left;">
<script type="text/javascript">
//rss_ticker(RSS_id, cachetime, divId, divClass, delay, optionalswitch)
new rss_ticker("CNN", 60, "cnnbox", "cnnclass", 200)

</script>
</DIV>
<br><br><br>
Each ticker on the page can be invoked independently, for example:
<DIV style="HEIGHT: 100px; border-style: dotted; border-width: 1px; background-color: silver; text-align: left;">
<PRE><script type="text/javascript">
//rss_ticker(RSS_id, cachetime, divId, divClass, delay, optionalswitch)
new rss_ticker("CNN", 60, "cnnbox", "cnnclass", 2000)
</script></PRE>

</DIV>

Step 3: must download files below
Files
rssticker.js

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

JavaScriptBank · Mar 20, 2010

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: JavaScript Fading Slide Show

How to setup

Step 1: Place JavaScript below in your HEAD section
JavaScript

Code:

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

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

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

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

// do not edit anything below this line

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

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

Step 2: Place HTML below in your BODY section
HTML

Code:

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

Javascript Music Player - Random Text Generator - Floating Image Script

JavaScriptBank · Mar 23, 2010

VML fireworks script

This is an interesting fireworks effect with the following attributes:

+ Makes use of VML support in IE5+ to render the stars. No graphics involved.
+ Uses conditional... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

Demo: JavaScript VML fireworks script

How to setup

Step 1: Place CSS below in your HEAD section
CSS

Code:

<STYLE type=text/css>BODY {
	OVERFLOW-X: hidden
}
v\:* {
	BEHAVIOR: url(#default#VML)
}
      </STYLE>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

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

Code:

<!--[if IE ]>
<SCRIPT language=JavaScript>
// VML fireworks script By Jacco IJzerman , j.ijzerman1@chello.nl
//Customize fireworks colors:
colors = new Array();
colors[0] = new Array('yellow', 'lime');
colors[1] = new Array('lime', 'green')
colors[2] = new Array('lime', 'blue');
colors[3] = new Array('lightyellow', 'purple');
colors[4] = new Array('lightblue', 'white');
colors[5] = new Array('blue', 'silver');
colors[6] = new Array('red', 'fuchsia');
colors[7] = new Array('yellow', 'red');

maximum = 1000;

vmlobj=''; 
for(i = 0; i < 12; i++){ 
vmlobj += '<div id="ster'+i+'" style="position:absolute; left:-50px; top-50px; visibility:hidden; z-index:50;">';
vmlobj += '<v:shape style="width:15px; height:15px;" fillcolor="yellow" coordorigin="0,0" coordsize="200 200">';
vmlobj += '<v:path v="m 8,65 l 72,65, 92,11, 112,65, 174,65, 122,100, 142,155,92,121, 42,155, 60,100 x e"/>';
vmlobj += '<v:stroke on="false" /></v:shape></div>';
}
document.write(vmlobj); vmlobj = null;

aantal = 0;

function begin()
{
try {
if(aantal == maximum){ return;}
kleurschema = Math.floor(Math.random() * colors.length);
posLinks = Math.floor(Math.random() * (document.body.clientWidth - 180));
posLinks = (posLinks < 170)? 170: posLinks;
posBoven = Math.floor(Math.random() * (document.body.clientHeight - 180));
posBoven = (posBoven < 170)? 170: posBoven;
straal = 0; uiteen = true; teller = 1; flikkereffect = false;
for(var i = 0; i < 12; i++){
document.getElementsByTagName('shape')[i].setAttribute('fillcolor', colors[kleurschema][0]);
document.getElementById('ster'+i).style.visibility = 'hidden'; // 5.0 fix
document.getElementById('ster'+i).style.left = posLinks;
document.getElementById('ster'+i).style.top = posBoven;
}
document.getElementById('ster0').style.top = (document.body.clientHeight - 20); 
document.getElementById('ster0').style.visibility = 'visible';
omhoog();
} catch(e){}
}

function omhoog()
{
try {
positie = parseInt(document.getElementById('ster0').style.top);
if(positie > posBoven){
document.getElementById('ster0').style.top = (positie - 25); 
setTimeout('omhoog()', 50);
} else {
for(i = 1; i < 12; i++){
document.getElementById('ster'+i).style.top = positie;
document.getElementById('ster'+i).style.visibility = 'visible';
} 
uiteenspatten();
}
} catch(e){}
}

function uiteenspatten()
{
try {
if(straal > 120 && straal % 10 == 0){ 
flikkereffect = true;
teller = (teller == colors[kleurschema].length)? 0: (teller+1);
}
for(var i = 0; i < 12; i++){
var hoek = i * 30; 
var piHoek = Math.PI - Math.PI / 180 * hoek;
var links = posLinks + Math.round(straal * Math.sin(piHoek)); 
var boven = positie + Math.round(straal * Math.cos(piHoek));
document.getElementById('ster'+i).style.left = links;
document.getElementById('ster'+i).style.top = boven;
if(flikkereffect){
document.getElementsByTagName('shape')[i].setAttribute('fillcolor', colors[kleurschema][teller]);
}
}
if(straal < 160 && uiteen){
straal += (straal < 120)? 10: 5;
setTimeout('uiteenspatten()', 50);
}
else if(straal > 120){
uiteen = false; straal -= 5;
setTimeout('uiteenspatten()', 50);
}
else if(straal <= 120){
for(var i = 0; i < 12; i++){
document.getElementById('ster'+i).style.visibility = 'hidden';
}
aantal++;
setTimeout('begin()', 500);
}
} catch(e) {}
}

window.onload=begin;

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

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

JavaScriptBank · Mar 27, 2010

Vertical Marquee

Text scrolls from bottom to top, pauses, then scrolls up and out of view. A JavaScript link can be added, opening in a new window. Configuration is simple.... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

Demo: JavaScript Vertical Marquee

How to setup

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

Code:

<style type="text/css">
#jump_base {
  overflow-y:hidden;
  width: 200px;
  height: 100px;
  border: 2px dotted #000099;
  margin: auto;
  padding: 0 10px 0 10px;
  font-size: .9em;
  font-family: Verdana, Arial, sans-serif;
}

#jump_base a {
  color: #000099;
  background-color: inherit;
}

.news {
  background-color: #DDDDDD;
  color: inherit;
}
</style>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

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

Code:

<script language="javascript">
// Created by: Mike Hudson :: http://www.afrozeus.com

/*
To change the values in the setupLinks function below.
You will notice there are two arrays for each of Titles and
Links. Currently there are 3 items in each array, but you can easily
expand on that by adding to the array. For example, to add a 4th record,
you would simply include the following 2 lines at the end of setupLinks
function:

arrLinks[3] = "someURL.htm";
arrTitles[3] = "Some title";
*/
function setupLinks() {
  arrLinks[0] = "http://forums.webdeveloper.com/forumdisplay.php?s=&forumid=3";
  arrTitles[0] = "If you have any questions, be sure to visit our forums.";
  arrLinks[1] = "http://javascript.internet.com/new/";
  arrTitles[1] = "Don't miss anything â€” check our new additions.";
  arrLinks[2] = "http://www.webreference.com/programming/javascript/diaries/";
  arrTitles[2] = "Want to learn JavaScript? Start at the beginning.";
}

var m_iInterval;
var m_Height;
//window.onload = wl;
var iScroll=0;

var arrLinks;
var arrTitles;

var arrCursor = 0;

var arrMax;
window.onload=wl;

function wl() {
  m_iInterval = setInterval(ontimer, 10);
  var base = document.getElementById("jump_base");

  m_Height = base.offsetHeight;

  var divi = parseInt(m_Height/5);
  m_Height = divi*5;

  var td1 = document.getElementById("td1");
  var td2 = document.getElementById("td2");
  var td3 = document.getElementById("td3");
  td1.height = m_Height-5;
  td2.height = m_Height-5;
  td3.height = m_Height-5;

  arrLinks = new Array();
  arrTitles = new Array();

  setupLinks();
  arrMax = arrLinks.length-1;
  setLink();
}
function setLink() {
  var ilink = document.getElementById("jump_link");
  ilink.innerHTML = arrTitles[arrCursor];
  ilink.href = arrLinks[arrCursor];
}
function ontimer() {
  var base = document.getElementById("jump_base");
  iScroll+=5;
  if (iScroll>(m_Height*2)) {
    iScroll=0;
    arrCursor++;
    if (arrCursor>arrMax)
      arrCursor=0;
    setLink();
  }
  if (iScroll==m_Height) {
    pause();
    m_iInterval = setTimeout(resume, 4000);
  }
  base.scrollTop=iScroll;
}
function pause() {
  clearInterval(m_iInterval);
}
function resume() {
  m_iInterval = setInterval(ontimer, 10);
}


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

Step 3: Place HTML below in your BODY section
HTML

Code:

<div id="jump_base" class="news" onmouseover="pause()" onmouseout="resume()">
  <table class="news">
    <tr>
    <td id="td1"> </td></tr>
    <tr><td id = "td2" valign="middle" align="center"><a id="jump_link" href="" target="_new"></a></td></tr>

    <tr><td id="td3"> </td></tr>
  </table>
</div>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Javascript Music Player - Random Text Generator - Floating Image Script

JavaScriptBank · Mar 31, 2010

Extreme Form Field Validator

Handle and precess all of your form field validations using just one script. This JavaScript can verify numeric strings; monitor the detail at JavaScriptBank.com - 2.000+ free JavaScript codes

Demo: JavaScript Extreme Form Field Validator

How to setup

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

Code:

<style>
#errordiv {
  border: 1px solid red;
  background-color: #FFAFAF;
  display: none;
  width: 50%;
  margin: 5px;
  padding: 5px;
}

.required {
  background-color: #CC4444;
}

.required:focus {
  background-color: #fff;
  border: 1px solid #f00;
}

.checkit {
  background-color: #E0E5EF;
}
</style>

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

Code:

<script type="text/javascript" src="chkform.js"></script><script type="text/javascript">
function configureValidation(f,alerttype){
  f.firstname.isAlphaNumeric = true;
  f.lastname.isAlphaNumeric = true;
  f.email.isEmail = true;
  f.phone.isPhoneNumber = true;
  f.birthday.isDate = true;
  f.postalcode.isEmpty = true;
  f.password1.isLengthBetween = [4,255];
  f.password2.isMatch = f.password1.value;
  f.comments.optional = true;
  var preCheck = (!f.infohtml.checked && !f.infocss.checked && !f.infojs.checked) ? errormsg[0] : null;
  return validateForm(f, preCheck, 'required', alerttype);
}
</script>

Step 3: Place HTML below in your BODY section
HTML

Code:

<div>
<form action="#" method="post" onsubmit="return configureValidation(this,3)" onreset="confirm(errormsg[99])">
<table class="formtable">
<tr>
<td>First Name:</td>
<td><input class="checkit" type="text" id="First name" name="firstname" value="" class="text"></td>
</tr>
<tr>
<td>Last Name:</td>
<td><input class="checkit" type="text" id="Last name" name="lastname" value="" class="text"></td>

</tr>
<tr>
<td>Email:</td>
<td><input class="checkit" type="text" id="Email" name="email" value="" class="text"></td>
</tr>
<tr>
<td>Email Preferred:</td>
<td><select name="emailpreferred">
<option value="text">Text</option>
<option value="html">HTML</option>
<option value="flash">Flash</option>
</select></td>

</tr>
<tr>
<td>Phone: (US only) </td>
<td><input class="checkit"  type="text" id="Phone" name="phone" value="000-000-0000" class="text"></td>
</tr>
<tr>
<td>Birthday:</td>
<td><input class="checkit"  type="text" id="Birthday" name="birthday" value="mm-dd-yyyy" class="text"></td>
</tr>
<tr>
<td>Gender:</td>
<td>Male:<input type="radio"  name="gender" value="male" class="radio" checked="checked"> Female:<input type="radio" name="gender" value="female" class="radio"></td>

</tr>
<tr>
<td>Password:</td>
<td><input class="checkit" onKeyPress="checkCapsLock( event )" id="Password" type="password" name="password1" value="" class="text"></td>
</tr>
<tr>
<td>Re-Enter:</td>
<td><input class="checkit" onKeyPress="checkCapsLock( event )" id="Password again" type="password" name="password2" value="" class="text"></td>
</tr>
<tr>
<td>Postal Code</td>
<td><input class="checkit" name="postalcode" type="text" id="Postal code" onKeyPress="javascript:checkNumber(this);" onKeyUp="javascript:checkNumber(this);"></td>
</tr>
<tr>

<td colspan="2">Select one or more of the following:</td>
</tr>
<tr>
<td colspan="2">HTML:<input type="checkbox" name="infohtml" value="true" class="checkbox"> CSS:<input type="checkbox" name="infocss" value="true" class="checkbox"> JavaScript:<input type="checkbox" name="infojs" value="true" class="checkbox"></td>
</tr>
<tr>
<td>Comments:</td>
<td><textarea id="Comment" name="comments" class="text" cols="20" rows="4"></textarea></td>
</tr>

</table>
<div id="errordiv"> </div>
<div>
<input type="submit" name="submit" value="Submit" class="button"> <input type="reset" name="reset" value="Reset" class="button"></td>
</form>
</div>

Step 4: Download files below
Files
chkform.js

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

JavaScriptBank · Apr 2, 2010

iPod Player using Flash

Your website have a sound/music system? Are you looking for a cool music player? And you are fan of Apple/iPod? If your answer is 'Yes', let embed this mp3 player script into your web page then let th... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

Demo: JavaScript iPod Player using Flash

How to setup

Step 1: must download files below
Files

[URL="http://www.javascriptbank.com/vertical-marquee.html"]JavaScript Vertical Marquee

- JavaScript DHTML analog clock - JavaScript Backwards Text

JavaScriptBank · Apr 9, 2010

Calculator for Sunday

Use this JavaScript to figure out when Sunday will be in a given point of time.... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

Demo: JavaScript Calculator for Sunday

How to setup

Step 1: Place JavaScript below in your HEAD section
JavaScript

Code:

<script language="JavaScript">
<!-- Begin
function WeekStart(Month, Year, StartOfWeekDay) {
  _Date = new Date(Year, Month, 1)
  _LastDate = new Date()
  _LastDate = new Date(_Date)
  _LastDate.setMonth(_Date.getMonth() + 1)
  _LastDate.setHours(_LastDate.getHours() - 24)
  _Returns = new Array()
  if (StartOfWeekDay == null) {
    StartOfWeekDay = 0
  }
  var I = 1
  while (I <= _LastDate.getDate()) {
    _Date.setDate(I)
    if (_Date.getDay() == StartOfWeekDay) {
      _Returns[_Returns.length] = new Date(_Date)
      I += 6
    }
    I++
  }
  return(_Returns)
}
//  End -->
</script>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

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

Code:

<form>Month <select name="Month"><option value="0">Jan
</option><option value="1">Feb
</option><option value="2">Mar
</option><option value="3">Apr
</option><option value="4">May
</option><option value="5">Jun
</option><option value="6">Jul
</option><option value="7">Aug
</option><option value="8">Sep
</option><option value="9">Oct
</option><option value="10">Nov
</option><option value="11">Dec

</option></select><br>
Year <input type="text" name="Year" size="4" maxlength="4"><br>
<input type="button" value="Get Days" onclick="alert(WeekStart(document.forms[0].Month.value, document.forms[0].Year.value, 0))">
</form>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

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

JavaScriptBank · Apr 13, 2010

AutoScroll DIV script

Another script to create a auto scrolling message which move depend on scrollbars.... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

Demo: JavaScript AutoScroll DIV script

How to setup

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

Code:

<script type="text/javascript">
	
	var useWidth = "400px";
	var speed = 250 // greater is slower;

	var message = "Now is the time for all good men to come to the aid of their country. That's one small step for man, one giant leap for mankind. Ask not what your country can do for you, ask what you can do for your country. | ";

	// Remember to include the vertical bar | at the end of the message(s);

	var mContainer = "";
	var circleMsg = "";
	var prevMsg =  "";
	var useFloat = "";
	var xV = 0;
	var xL = 0;
	var msgLength = 0;
	
	function updateMessage(){
		
		if (circleMsg == ""){circleMsg = mContainer.lastChild.data}
		else {circleMsg = prevMsg}
		var separatorIdx = circleMsg.lastIndexOf('|');
		if (separatorIdx == -1){separatorIdx = msgLength}
		circleMsg = circleMsg.substring(1,separatorIdx);
		var spliceStr = message.substring(0,msgLength-separatorIdx-1);
		var dispMsg = circleMsg+spliceStr;
		mContainer.removeChild(mContainer.lastChild);
		mContainer.appendChild(document.createTextNode(dispMsg));
		prevMsg = circleMsg+'|'+spliceStr;
		setTimeout("updateMessage()",speed);
	}

	function startCrawl(){

		mContainer.appendChild(document.createTextNode(message))
		setTimeout("updateMessage()",3000);  // delay before crawl start;
	}

	function stayHome(){

		var nV = 0;
		var nL = 0;
		if(!document.body.scrollTop)
			{
			 nV = document.documentElement.scrollTop;
			 nL = document.documentElement.scrollLeft;
			}
		else	{
			 nV = document.body.scrollTop;
			 nL = document.body.scrollLeft;
			}
		if (nV == 0){window.scrollBy(0,1)}
		useFloat.style.top = nV+xV+"px";
		useFloat.style.left = nL+xL+"px";
		setTimeout("stayHome()",50);
	}

	window.onload=function(){

		mContainer = document.getElementById('crawl');
		document.getElementById('isFloat').style.width = useWidth;
		msgLength = message.length;
		useFloat = document.getElementById('isFloat');
		useFloat.style.left = ((screen.width-30)/2)-(parseInt(useWidth)/2)+"px";
		xV = useFloat.offsetTop;
		xL = useFloat.offsetLeft;
		stayHome();
		startCrawl();
	}

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

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

Code:

<Div id='isFloat' style='position:absolute;bottom:20px;overflow:hidden;height:28px;border:solid black 1px;font-size:14pt;background-color:lightyellow;color:darkblue'>

<Div id='crawl' style='padding:3px;white-space:nowrap'></Div>

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

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

JavaScriptBank · Apr 15, 2010

FAQ Drop Down script

Need to create a F.A.Q for your Web site? Use this JavaScript to hide/reveal content on a Web page. Keep your long documents short.... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

Demo: JavaScript FAQ Drop Down script

How to setup

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

Code:

<script type="text/javascript">
<!-- Begin
// Created by: Fang :: http://-------.com/7v7l8

function toggle(obj) {
// Moz. or IE
var sibling=(obj.nextSibling.nodeType==3)? obj.nextSibling.nextSibling : obj.nextSibling;
// hide or show
if(sibling.style.display=='' || sibling.style.display=='block') {
	sibling.style.display='none';
    obj.firstChild.firstChild.data='+';
    }
else {
	sibling.style.display='block';
    obj.firstChild.firstChild.data='-';
    }
}
//
function initCollapse() {
var oDT=document.getElementById('content').getElementsByTagName('dt');
for (var i=0; i < oDT.length; i++) {
	oDT[i].onclick=function() {toggle(this)};
    var oSpan=document.createElement('span');
    var sign=document.createTextNode('+');
    oSpan.appendChild(sign);
    oDT[i].insertBefore(oSpan, oDT[i].firstChild);
    oSpan.style.fontFamily='monospace';
    oSpan.style.paddingRight='0.5em';
    oDT[i].style.cursor='pointer';
    toggle(oDT[i]);
	}
oDT=null;
}
window.onload=function() {if(document.getElementById && document.createElement) {initCollapse();}}
//-->
</script>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

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

Code:

<dl id="content">
    <dt>This is Question #1  <em class="sm">[click here]</em></dt>
      <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam 
		nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat 
		volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation 
		ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
		Duis autem vel eum iriure dolor in hendrerit in.<br><br></dd>
    <dt>This is Question #2  <em class="sm">[click here]</em></dt>
      <dd>Ma quande lingues coalesce, li grammatica del resultant lingue es plu 
		simplic e regulari quam ti del coalescent lingues. Li nov lingua franca 
		va esser plu simplic e regulari quam li existent Europan lingues. It va 
		esser tam simplic quam Occidental: in fact, it va esser Occidental. A un 
		Angleso.<br><br></dd>
    <dt>This is Question #3  <em class="sm">[click here]</em></dt>

      <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam 
		nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat 
		volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation 
		ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
		Duis autem vel eum iriure dolor in hendrerit in.</dd>
</dl>
</div>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

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

nunewnew · Apr 20, 2010

This is an interesting fireworks action with the following attributes:

Plus uses VML support in IE5 + to the stars. No graphics involved.
+ Using a conditional ... detail on JavaScriptBank.com - 2,000 + free JavaScript code

Demo: JavaScript VML fireworks script

How do

Step 1 : The place below the CSS in the HEAD section
CSS
Code:

Code:

 BODY (OVERFLOW-X: hidden) V: * (BEHAVIOR: URL (by default # # VML))

Step 2 : Copy and Paste the JavaScript code into your HEAD section
JavaScript
Code:

Code:

JavaScript Zoom - JavaScript Fading Slideshow - JavaScript rotating image script thx very much

JavaScriptBank · Apr 20, 2010

Dynamic HTML Splash Screen

The dynamic animation JavaScript code is fastest and simpliest way to set up a splash screen effect, thanks to this [URL="http://www.javascriptbank.com/title=DHTML"]DHTML script[/URL]! Users will be ab... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

Demo: JavaScript Dynamic HTML Splash Screen

How to setup

Step 1: Place HTML below in your BODY section
HTML

Code:

<DIV id=splashcontainer style="POSITION: absolute; WIDTH: 350px"></DIV><LAYER 
id=splashcontainerns width="450"></LAYER>
<SCRIPT>
/*
Dynamic Splash Screen effect- Â© Dynamic Drive (www.dynamicdrive.com) Updated: 00/12/18
For full source code, installation instructions, 100's more DHTML scripts, and Terms Of Use, 
Visit http://dynamicdrive.com
*/

//Specify the paths of the images to be used in the splash screen, if any.
//If none, empty out array (ie: preloadimages=new Array())
var preloadimages=new Array("bongbong.gif","bongbong.gif")
//configure delay in miliseconds between each message (default: 2 seconds)
var intervals=2000
//configure destination URL
var targetdestination="http://javascriptbank.com"

//configure messages to be displayed
//If message contains apostrophe('), backslash them (ie: "I'm fine")

var splashmessage=new Array()
var openingtags='<font face="Arial" size="4">'
splashmessage[0]='<img src="bongbong.gif"> JavaScriptBank.com <img src="bongbong.gif">'
splashmessage[1]='Bank of free JavaScript'
splashmessage[2]='over 2000+ free JavaScript code'
splashmessage[3]='please wait...'


var closingtags='</font>'

//Do not edit below this line (besides HTML code at the very bottom)

var i=0

var ns4=document.layers?1:0
var ie4=document.all?1:0
var ns6=document.getElementById&&!document.all?1:0
var theimages=new Array()

//preload images
if (document.images){
for (p=0;p<preloadimages.length;p++){
theimages[p]=new Image()
theimages[p].src=preloadimages[p]
}
}

function displaysplash(){
if (i<splashmessage.length){
sc_cross.style.visibility="hidden"
sc_cross.innerHTML='<b><center>'+openingtags+splashmessage[i]+closingtags+'</center></b>'
sc_cross.style.left=ns6?parseInt(window.pageXOffset)+parseInt(window.innerWidth)/2-parseInt(sc_cross.style.width)/2 : document.body.scrollLeft+document.body.clientWidth/2-parseInt(sc_cross.style.width)/2
sc_cross.style.top=ns6?parseInt(window.pageYOffset)+parseInt(window.innerHeight)/2-sc_cross.offsetHeight/2 : document.body.scrollTop+document.body.clientHeight/2-sc_cross.offsetHeight/2
sc_cross.style.visibility="visible"
i++
}
else{
window.location=targetdestination
return
}
setTimeout("displaysplash()",intervals)
}

function displaysplash_ns(){
if (i<splashmessage.length){
sc_ns.visibility="hide"
sc_ns.document.write('<b>'+openingtags+splashmessage[i]+closingtags+'</b>')
sc_ns.document.close()

sc_ns.left=pageXOffset+window.innerWidth/2-sc_ns.document.width/2
sc_ns.top=pageYOffset+window.innerHeight/2-sc_ns.document.height/2

sc_ns.visibility="show"
i++
}
else{
window.location=targetdestination
return
}
setTimeout("displaysplash_ns()",intervals)
}



function positionsplashcontainer(){
if (ie4||ns6){
sc_cross=ns6?document.getElementById("splashcontainer"):document.all.splashcontainer
displaysplash()
}
else if (ns4){
sc_ns=document.splashcontainerns
sc_ns.visibility="show"
displaysplash_ns()
}
else
window.location=targetdestination
}
window.onload=positionsplashcontainer

</SCRIPT>

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

nunewnew · Apr 20, 2010

wow new update, thank again

JavaScriptBank · Apr 23, 2010

Dancing Animation Stars Cursor

One of the many cursor codes in our JavaScript library, this one creates dancing stars animating around your pointers mouse. This cur... [URL="http://www.javascriptbank.com/dancing-animation-stars-cursor.html/en//"]detail at JavaScriptBank.com - 2.000+ free JavaScript codes

Demo: JavaScript Dancing Animation Stars Cursor

How to setup

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

Code:

<script language="JavaScript">
<!--
/*
Dancing Stars cursor (Submitted by Kurt at kurt.grigg@virgin.net)
Modified and permission granted to Dynamic Drive to feature script in archive
For full source, usage terms, and 100's more DHTML scripts, visit http://dynamicdrive.com
*/

if (document.all){
document.write('<div id="starsDiv" style="position:absolute;top:0px;left:0px">')
for (xy=0;xy<7;xy++)
document.write('<div style="position:relative;width:3px;height:3px;background:#FFFF00;font-size:2px;visibility:visible"></div>')
document.write('</div>')
}

if (document.layers)
{window.captureEvents(Event.MOUSEMOVE);}
var yBase = 200;
var xBase = 200;
var yAmpl = 10;
var yMax = 40;
var step = .2;
var ystep = .5;
var currStep = 0;
var tAmpl=1;
var Xpos = 1;
var Ypos = 1;
var i = 0;
var j = 0;

if (document.all)
{
  function MoveHandler(){
  Xpos = document.body.scrollLeft+event.x;
  Ypos = document.body.scrollTop+event.y;
  }
  document.onmousemove = MoveHandler; 
}

else if (document.layers)
{
  function xMoveHandler(evnt){
  Xpos = evnt.pageX;
  Ypos = evnt.pageY;
  }
  window.onMouseMove = xMoveHandler;
}



function animateLogo() {
if (document.all)
{
 yBase = window.document.body.offsetHeight/4;
 xBase = window.document.body.offsetWidth/4;
}
else if (document.layers)
{
 yBase = window.innerHeight/4 ;
 xBase = window.innerWidth/4;
}

if (document.all)
{
var totaldivs=document.all.starsDiv.all.length
 for ( i = 0 ; i < totaldivs ; i++ )
 {
var tempdiv=document.all.starsDiv.all[i].style
  tempdiv.top = Ypos + Math.cos((20*Math.sin(currStep/20))+i*70)*yBase*(Math.sin(10+currStep/10)+0.2)*Math.cos((currStep + i*25)/10);
  tempdiv.left = Xpos + Math.sin((20*Math.sin(currStep/20))+i*70)*xBase*(Math.sin(10+currStep/10)+0.2)*Math.cos((currStep + i*25)/10);
 }
}

else if (document.layers)
{
 for ( j = 0 ; j < 7 ; j++ ) 
 {
var templayer="a"+j
  document.layers[templayer].top = Ypos + Math.cos((20*Math.sin(currStep/20))+j*70)*yBase*(Math.sin(10+currStep/10)+0.2)*Math.cos((currStep + j*25)/10);
  document.layers[templayer].left =Xpos + Math.sin((20*Math.sin(currStep/20))+j*70)*xBase*(Math.sin(10+currStep/10)+0.2)*Math.cos((currStep + j*25)/10);
 }
}
currStep += step;
setTimeout("animateLogo()", 15);
}
animateLogo();
// -->
</script>

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

Code:

<LAYER NAME="a0" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#FFFF00" CLIP="0,0,3,3"></LAYER>
<LAYER NAME="a1" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#FFFF00" CLIP="0,0,3,3"></LAYER>
<LAYER NAME="a2" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#FFFF00" CLIP="0,0,3,3"></LAYER>
<LAYER NAME="a3" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#FFFF00" CLIP="0,0,3,3"></LAYER>
<LAYER NAME="a4" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#FFFF00" CLIP="0,0,3,3"></LAYER>
<LAYER NAME="a5" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#FFFF00" CLIP="0,0,3,3"></LAYER>
<LAYER NAME="a6" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#FFFF00" CLIP="0,0,3,3"></LAYER>

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

JavaScriptBank · Apr 27, 2010

CoolClock - Super nice Javascript Analog Clock

From this super nice JavaScript analog clock, you have more than 20 layouts of analog clock to display the time on your web pages. This JavaScript analog clock has enou... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

Demo: JavaScript CoolClock - Super nice Javascript Analog Clock

How to setup

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

Code:

<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
<script src="coolclock.js" type="text/javascript"></script>
<script src="moreskins.js" type="text/javascript"></script>

Step 2: Place HTML below in your BODY section
HTML

Code:

<table align="center">
<tbody><tr><td rowspan="2">
	<canvas style="width: 170px; height: 170px;" height="170" width="170" id="c1" class="CoolClock"></canvas>
	<br>
	<canvas style="width: 170px; height: 170px;" height="170" width="170" id="c2" class="CoolClock:chunkySwiss"></canvas>
	<br>
	<canvas style="width: 170px; height: 170px;" height="170" width="170" id="c4" class="CoolClock:machine"></canvas>
</td><td>
	<canvas style="width: 380px; height: 380px;" height="380" width="380" id="c5" class="CoolClock:fancy:190"></canvas>
</td></tr><tr><td align="center">
	<table><tbody><tr>
  <td align="center">New York<br><canvas style="width: 60px; height: 60px;" height="60" width="60" id="c6" class="CoolClock:chunkySwiss:30:noSeconds:-4 leftRightPad"></canvas></td>
  <td align="center">London<br><canvas style="width: 60px; height: 60px;" height="60" width="60" id="c7" class="CoolClock::30:noSeconds:+1 leftRightPad"></canvas></td>
  <td align="center">Townsville<br><canvas style="width: 60px; height: 60px;" height="60" width="60" id="c8" class="CoolClock:fancy:30:noSeconds:+10 leftRightPad"></canvas></td>
	</tr></tbody></table>
</td></tr>
</tbody></table>

Step 3: downloads
Files
coolclock.js
excanvas.js
moreskins.js

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

Free JavaScript Code Downloads

New Member

Member

Member

Member

Member

Member

Member

Member

Member

Member

Member

Member

Member

Member

Member

New Member

Member

New Member

Member

Member