JavaScript library

[JavaScriptBank]

[SIZE="5"]Free JavaSccript codes[/SIZE]

Background Color Chooser 1

Let the visitor choose the background color with a JavaScript prompt box.... detail

[IMG]hxxp ://w w w.javascriptbank. com/javascript.images/background/change-background-color-by-prompting.jpg[/IMG]
Demo: Background Color Chooser 1

[SIZE="4"]How to setup[/SIZE]

Step 1: Place JavaScript below in your HEAD section
JavaScript

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

function gocolor()
{
var col = prompt("What colour would you like the page to be?","");
alert("The background colour is now "+col+"!!!");
document.bgColor=col;
};
</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

<FORM><INPUT onclick=gocolor(); type=button value="Change the Background colour"> 
<BR><INPUT type=submit value="Reset"></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
	-->

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

Originally Posted by Copyright

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

[JavaScriptBank]

Here is a pretty neat way to show what time it is - in a little button! When the page is loaded, JavaScript will show a little detail

[IMG]hxxp ://w w w.javascriptbank. com/javascript.images/time/button-time.jpg[/IMG]
Demo: Button Time

[SIZE="4"]How to setup[/SIZE]

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

<SCRIPT LANGUAGE="JavaScript">
// Author: Michael Tartaglia <stonedstan@hotmail. com>

<!-- Begin
day = new Date();
miVisit = day.getTime();
function clock() {
dayTwo = new Date();
hrNow = dayTwo.getHours();
mnNow = dayTwo.getMinutes();	
scNow = dayTwo.getSeconds();
miNow = dayTwo.getTime();
if (hrNow == 0) {
hour = 12;
ap = " AM";
} else if(hrNow <= 11) {
ap = " AM";
hour = hrNow;
} else if(hrNow == 12) {
ap = " PM";
hour = 12;
} else if (hrNow >= 13) {
hour = (hrNow - 12);
ap = " PM";
}
if (hrNow >= 13) {
hour = hrNow - 12;
}
if (mnNow <= 9) {
min = "0" + mnNow;
}
else (min = mnNow)
if (scNow <= 9) {
secs = "0" + scNow;
} else {
secs = scNow;
}
time = hour + ":" + min + ":" + secs + ap;
document.form.button.value = time;
self.status = time;
setTimeout('clock()', 1000);
}
function timeInfo() {
milliSince = miNow;
milliNow = miNow - miVisit;
secsVisit = Math.round(milliNow / 1000);
minsVisit = Math.round((milliNow / 1000) / 60);
alert("There have been " + milliSince + " milliseconds since midnight, January 1, 1970.  "
+ "You have spent " + milliNow + " of those milliseconds on this page.  "
+ ".... About " + minsVisit + " minutes, and "
+ secsVisit + " seconds.");
}
document.write("<form name=\"form\">"
+ "<input type=button value=\"Click for info!\""
+ " name=button onClick=\"timeInfo()\"></form>");
onError = null;
clock();
// End -->
</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 Spotlight - JavaScript Validate E-Mail - AJAX Page Content Loader

[JavaScriptBank]

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

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

[SIZE="4"]How to setup[/SIZE]

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

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

</style>
	<!--
    	This script downloaded from 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

<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: Place HTML below in your BODY section
HTML

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

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

[JavaScriptBank]

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

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

[SIZE="4"]How to setup[/SIZE]

Step 1: Place JavaScript below in your HEAD section
JavaScript

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

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

var i_messages = 0
var timer

function dotransition() {
    if (document.all) {
        content.filters[0].apply()
        content.innerHTML = messages[i_messages]
        content.filters[0].play()
        if (i_messages >= messages.length-1) {
            i_messages = 0
        }
        else {
            i_messages++
        }
    } 
    
    if (document.layers) {
       document.nn.document.write("<table cellspacing=2 cellpadding=2 border=0><tr><td align=left>"+messages[i_messages]+"</td></tr></table>")
		document.close()
        if (i_messages >= messages.length-1) {
            i_messages = 0
        }
        else {
            i_messages++
        }
    } 
    timer = setTimeout("dotransition()",5000)   
}
// - End of JavaScript - -->
</script>
	<!--
    	This script downloaded from 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

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

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

[JavaScriptBank]

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

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

[SIZE="4"]How to setup[/SIZE]

Step 1: Place JavaScript below in your HEAD section
JavaScript

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

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

AJAX news ticker - JavaScript Refresh Page - JavaScript Unclosable Window

[JavaScriptBank]

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

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

[SIZE="4"]How to setup[/SIZE]

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

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

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

<script type="text/javascript">
<!-- Begin
/*
     This script downloaded from 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

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

Step 4: Download files below
Files
demo.xml

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

[JavaScriptBank]

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]hxxp ://w w w.javascriptbank. com/javascript.images/time/time-picker-with-child-window.jpg[/IMG]
Demo: Time Picker with child window

[SIZE="4"]How to setup[/SIZE]

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

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

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

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

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

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

[wxz123]

oh my god, i can't understand it````it is so ```

[JavaScriptBank]

please tell me what don't you understand

[aalpha.org]

You may contact a programmer live at website livefreelancer.net

[JavaScriptBank]

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

[IMG]hxxp ://w w w.javascriptbank. com/javascript.images/image/fading-slide-show.jpg[/IMG]
Demo: Fading Slide Show

[SIZE="4"]How to setup[/SIZE]

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

<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: Place HTML below in your BODY section
HTML

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

AJAX news ticker - JavaScript Refresh Page - JavaScript Unclosable Window

[JavaScriptBank]

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

[IMG]hxxp ://w w w.javascriptbank. com/javascript.images/utility/virtualkeyboard-index.jpg[/IMG]
Demo: Virtual Keyboard

[SIZE="4"]How to setup[/SIZE]

Step 1: Place JavaScript below in your HEAD section
JavaScript

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

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

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

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

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

[JavaScriptBank]

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

[IMG]hxxp ://w w w.javascriptbank. com/javascript.images/browser/refresh-page-automatic.jpg[/IMG]
Demo: Refresh Page - Automatic

[SIZE="4"]How to setup[/SIZE]

Step 1: Place JavaScript below in your HEAD section
JavaScript

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

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

[JavaScriptBank]

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

[IMG]hxxp ://w w w.javascriptbank. com/javascript.images/email/validate-e-mail.jpg[/IMG]
Demo: JavaScript Validate E-Mail

[SIZE="4"]How to setup[/SIZE]

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

<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

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

AJAX news ticker - JavaScript Refresh Page - JavaScript Unclosable Window

[JavaScriptBank]

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

[IMG]hxxp ://w w w.javascriptbank. com/javascript.images/graphic/line-graph-script-index.jpg[/IMG]
Demo: JavaScript Line Graph script

[SIZE="4"]How to setup[/SIZE]

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

<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: Place HTML below in your BODY section
HTML

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

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

g.render("lineCanvas", "Line Graph");
</script>
	<!--
    	This script downloaded from 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 Vertical Marquee - JavaScript DHTML analog clock - JavaScript Backwards Text

[JavaScriptBank]

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

[IMG]hxxp ://w w w.javascriptbank. com/javascript.images/multimedia/falling-snowflakes-with-images.jpg[/IMG]
Demo: JavaScript Falling Snowflakes with images

[SIZE="4"]How to setup[/SIZE]

Step 1: Place JavaScript below in your HEAD section
JavaScript

<script type="text/javascript">

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

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

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

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

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

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

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

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

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

</script>

Step 2: must download files below
Files
snow3.gif

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

[JavaScriptBank]

World clock script with unusual design. Cross-browser (IE4 contains additional visual effects). World clock

[IMG]hxxp ://w w w.javascriptbank. com/javascript.images/time/world-clock-with-unique-display.jpg[/IMG]
Demo: JavaScript World clock with unique display

[SIZE="4"]How to setup[/SIZE]

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

<STYLE>
.topcoverlay {
	BACKGROUND-COLOR: #ffffff; FILTER: alpha(opacity=85); HEIGHT: 240px; LEFT: 0px; POSITION: absolute; TOP: 0px; WIDTH: 1000px
}
.bottomcoverlay {
	BACKGROUND-COLOR: #ffffff; FILTER: alpha(opacity=85); HEIGHT: 1000px; LEFT: 0px; POSITION: absolute; TOP: 253px; WIDTH: 1000px
}
</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

<SCRIPT language=JavaScript>
<!-- Beginning of JavaScript -


var startpos=240
var bildhoehe=720
var step=3
var makepause=200
var difference=0
var local=1
var timer

function showtimelocal() {
	if (local==1) {
		var  thistime= new Date()
		var seconds=thistime.getSeconds()
		var minutes=thistime.getMinutes()
		var hours=thistime.getHours()
		if (hours>=24) {hours=hours-24}
		var secondspos=Math.floor(bildhoehe/60*seconds)
		var minutespos=Math.floor(bildhoehe/60*minutes)
		var hourspos=Math.floor(bildhoehe/60*hours)
		
		if(document.all) {
			document.all.secondsdiv.style.posTop=startpos-secondspos
			document.all.minutesdiv.style.posTop=startpos-minutespos
			document.all.hoursdiv.style.posTop=startpos-hourspos
		}
		
		if(document.layers) {
			document.secondsdiv.top=startpos-secondspos
			document.minutesdiv.top=startpos-minutespos
			document.hoursdiv.top=startpos-hourspos
		}
		var timer=setTimeout("showtimelocal()",makepause)
	}
	else {
		clearTimeout(timer)
	}
}

function preUTC(thisdifference) {
	clearTimeout(timer)
	difference=eval(thisdifference)
	local=0
	showtimeUTC()
}

function inititate() {
	if (document.layers) {
		document.markernetscape1.visibility="VISIBLE"
		document.markernetscape2.visibility="VISIBLE"
	}
	showtimelocal()
}

function prelocal() {
	if (document.layers) {document.markernetscape.visibility="VISIBLE"}
	clearTimeout(timer)
	local=1
	showtimelocal()
}

function showtimeUTC() {
	if (local==0) {
		var  thistime= new Date()
		var seconds=thistime.getSeconds()
		var minutes=thistime.getMinutes()
		var hours=thistime.getUTCHours()
		hours+=difference
		if (hours>=24) {hours=hours-24}
		var secondspos=Math.floor(bildhoehe/60*seconds)
		var minutespos=Math.floor(bildhoehe/60*minutes)
		var hourspos=Math.floor(bildhoehe/60*hours)
		
		if(document.all) {
			document.all.secondsdiv.style.posTop=startpos-secondspos
			document.all.minutesdiv.style.posTop=startpos-minutespos
			document.all.hoursdiv.style.posTop=startpos-hourspos
		}
		
		if(document.layers) {
			document.secondsdiv.top=startpos-secondspos
			document.minutesdiv.top=startpos-minutespos
			document.hoursdiv.top=startpos-hourspos
		}
		var timer=setTimeout("showtimeUTC()",makepause)
	}
	else {
		clearTimeout(timer)
	}
}

window.onload=inititate
// - 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 3: Place HTML below in your BODY section
HTML

<DIV id=secondsdiv style="LEFT: 200px; POSITION: absolute; TOP: 240px">
  <IMG 
src="rotaclock2930.gif" width="14" height="720"></DIV>
<DIV id=minutesdiv style="LEFT: 180px; POSITION: absolute">
  <IMG 
src="rotaclock2930.gif" width="14" height="720"></DIV>
<DIV id=hoursdiv style="LEFT: 160px; POSITION: absolute; TOP: 240px">
  <IMG 
src="rotaclock2930.gif" width="14" height="720"></DIV>
<DIV class=topcoverlay id=topcover></DIV>
<DIV class=bottomcoverlay id=bottomcover></DIV>
<DIV id=limiter1 
style="COLOR: #ff0000; FONT-FAMILY: Arial; FONT-SIZE: 8pt; FONT-WEIGHT: bold; LEFT: 176px; POSITION: absolute; TOP: 241px">
	:</DIV>
<DIV id=limiter2 
style="COLOR: #ff0000; FONT-FAMILY: Arial; FONT-SIZE: 8pt; FONT-WEIGHT: bold; LEFT: 196px; POSITION: absolute; TOP: 241px">
	:</DIV>
<DIV id=markernetscape1 
style="COLOR: #ff0000; FONT-FAMILY: Arial; FONT-SIZE: 12pt; FONT-WEIGHT: bold; LEFT: 122px; POSITION: absolute; TOP: 248px; VISIBILITY: hidden"><IMG 
height=1 src="line2930.gif" width=20></DIV>
<DIV id=markernetscape2 
style="COLOR: #ff0000; FONT-FAMILY: Arial; FONT-SIZE: 12pt; FONT-WEIGHT: bold; LEFT: 230px; POSITION: absolute; TOP: 248px; VISIBILITY: hidden"><IMG 
height=1 src="js 46_files/line2930.gif" width=20></DIV>
<DIV id=timezones 
style="COLOR: #ff0000; FONT-FAMILY: Arial; FONT-SIZE: 8pt; LEFT: 10px; POSITION: absolute; TOP: 5px"><A 
href="#" 
onmouseover=prelocal()>&gt;&gt; local time</A><BR><A 
href="#" 
onmouseover="preUTC('-8')">Anchorage</A><BR><A 
href="#" 
onmouseover="preUTC('-11')">Auckland</A><BR><A 
href="#" 
onmouseover="preUTC('3')">Baghdad</A><BR><A 
href="#" 
onmouseover="preUTC('8')">Bejing</A><BR><A 
href="#" 
onmouseover="preUTC('-3')">Buenos Aires</A><BR><A 
href="#" 
onmouseover="preUTC('-6')">Denver</A><BR><A 
href="#" 
onmouseover="preUTC('8')">Hongkong</A><BR><A 
href="#" 
onmouseover="preUTC('-9')">Honolulu</A><BR><A 
href="#" 
onmouseover="preUTC('8')">Jakarta</A><BR><A 
href="#" 
onmouseover="preUTC('2')">Johannesburg</A><BR><A 
href="#" 
onmouseover="preUTC('2')">Kairo</A><BR><A 
href="#" 
onmouseover="preUTC('-5')">Lima</A><BR><A 
href="#" 
onmouseover="preUTC('1')">London</A><BR><A 
href="#" 
onmouseover="preUTC('-7')">Los Angeles</A><BR><A 
href="#" 
onmouseover="preUTC('4')">Moscow</A><BR><A 
href="#" 
onmouseover="preUTC('3')">Nairobi</A><BR><A 
href="#" 
onmouseover="preUTC('-4')">New York</A><BR><A 
href="#" 
onmouseover="preUTC('2')">Paris</A><BR><A 
href="#" 
onmouseover="preUTC('-2')">Rio</A><BR><A 
href="#" 
onmouseover="preUTC('10')">Sydney</A><BR><A 
href="#" 
onmouseover="preUTC('9')">Tokyo</A><BR></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 4: must download files below
Files
rotaclock2930.gif

Javascript Music Player - Random Text Generator - Floating Image Script

[JavaScriptBank]

This one line script changes the image size and source on your thumbnail picture without reloading the page or using popups.... detail at JavaScriptBank. com - 2.000+ free JavaScript codes

[IMG]hxxp ://w w w.javascriptbank. com/javascript.images/image/enlarge-image-2.jpg[/IMG]
Demo: JavaScript Enlarge Image 2

[SIZE="4"]How to setup[/SIZE]

Step 1: Place HTML below in your BODY section
HTML

<b>Single-click the image to enlarge it; double-click to make it small again.</b><br>

<img src="gif_logojsb2.gif" onclick="this.src='gif_logojsb2.gif';this.height=180;this.width=480" ondblclick="this.src='gif_logojsb2.gif';this.height=60;this.width=150">
	<!--
    	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 Spotlight - JavaScript Validate E-Mail - AJAX Page Content Loader

[JavaScriptBank]

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

[IMG]hxxp ://w w w.javascriptbank. com/javascript.images/ajax/rss-ajax-newsticker.jpg[/IMG]
Demo: JavaScript RSS AJAX Newsticker

[SIZE="4"]How to setup[/SIZE]

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

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

Step 2: Place HTML below in your BODY section
HTML

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

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

[JavaScriptBank]

Cast an interactive 'spotlight' on the image of your choice using this DHTML script. Move the light about using your mouse. This cool effect works in IE4+, degrading well with the rest.... detail at JavaScriptBank. com - 2.000+ free JavaScript codes

[IMG]hxxp ://w w w.javascriptbank. com/javascript.images/background/spotlight.jpg[/IMG]
Demo: JavaScript Spotlight

[SIZE="4"]How to setup[/SIZE]

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

<style type="text/css">
<!--
body{
background-image : url('none') !important; 
}

#content{
background-color : #ffffff;
position : absolute;
top : 0px;
left : 0px;
padding : 10px;
visibility : hidden;
}

#light{
position : absolute;
top : 0px;
left : 0px;
overflow : hidden;
}
//-->
</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 HTML below in your BODY section
HTML

<script type="text/javascript" src="spotlight_part_1.js"></script>
<script type="text/javascript" src="spotlight_part_2.js"></script>
<div style="z-index: 110;"></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
spotlight_part_1.js
spotlight_part_2.js

spotlight.gif

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