Free JavaScript Code Downloads

JavaScriptBank · Aug 26, 2009

This JavaScript code is a hierarchical, object oriented navigator, open source menu. It can be easily displayed horizontally or vertically, and on several different levels.... detail

Demo: VB Navigator

How to setup

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

Code:

<style>
/*
	Created by: Vladimir Bodurov 
	Web Site: http://www.bodurov.com/menu/ 
*/
A.MenuLink{
 	color:#1D2123;
	 width:100%;
 	text-decoration: none;
}

/* Menu Link when the mouse is over */
A.MenuLink:hover{
 	color:#AA0000;
 	background-color:#FFFF99;
 	text-decoration: underline;
}

/* First menu link element */
DIV.FirstMenuElement{
 	font: 12px Geneva, Arial, Helvetica, sans-serif;
 	position:absolute;
 	padding:3px;
 	width:130px;
 	text-align: center;
 	background-color:#82A6C4;
  border: solid #475156 1px;
 	display:none;
}

/* First menu link element when the mouse is over */
DIV.FirstMenuElementOver{
 	font: 12px Geneva, Arial, Helvetica, sans-serif;
 	position:absolute;
 	width:130px;
 	padding:3px;
 	text-align: center;
 	background-color:#FFFF99;
  border: solid #475156 1px;
}

/* Menu link element */
DIV.MenuElement {
 	font: 12px Geneva, Arial, Helvetica, sans-serif;
 	position:absolute;
 	padding:3px;
 	width:150px;
 	background-color:#EFEFFF;
  border: solid #475156 1px;
 	display:none;
}

/* Menu link element when the mouse is over */
DIV.MenuElementOver {
 	font: 12px Geneva, Arial, Helvetica, sans-serif;
 	position:absolute;
 	padding:3px;
 	width:150px;
 	background-color:#FFFF99;
  border: solid #475156 1px;
}
</style>

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

Code:

<script language="JavaScript" type="text/javascript" src="vb_menu.js"></script>

Step 3: Place HTML below in your BODY section
HTML

Code:

<div id="MenuLine" style="position:relative;"></div>

<script language="JavaScript" src="theMenu.js"></script>

Step 4: Download files below
Files
menu_arrow.gif
theMenu.js
vb_menu.js

Dave B · Aug 28, 2009

Okay... what does it do?

JavaScriptBank · Sep 8, 2009

Full System/Browser Info

Provides you with full system/browser info in a nicely formatted table.... detail

Demo: Full System/Browser Info

How to setup

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

Code:

<SCRIPT language=Javascript>
 <!-- SCRIPT BY DANIEL ALLOWAY COPYRIGHT (C) DANIEL ALLOWAY, 2002 ALL RIGHTS RESERVED

	// Browser Name
     bn = navigator.appName;

	// CPU Class
     if(bn.toLowerCase() != "microsoft internet explorer")
         cpu = "Don't Know";
     else
         cpu = navigator.cpuClass;

	// Browser Version
     if(bn.toLowerCase() == "microsoft internet explorer")
     {
         bv1 = navigator.appVersion.indexOf("MSIE") + 5;
         bv2 = (bv1 + 3);
         bv  = navigator.appVersion.substring(bv1,bv2);
     }

     else if(bn.toLowerCase() == "opera")
     {
         bv1 = navigator.appVersion.indexOf("(") - 4;
         bv2 = (bv1 + 3);
         bv  = navigator.appVersion.substring(bv1,bv2);
     }

     else if(bn.toLowerCase() == "netscape")
     {
         bv1 = navigator.appVersion.indexOf("(") - 5;
         bv2 = (bv1 + 4);
         bv  = navigator.appVersion.substring(bv1,bv2);
     }

	// Application Code  Name
     bc = navigator.appCodeName;

	// Browser Language
     bl = navigator.browserLanguage;



	// Operating System
  if(bn.toLowerCase() == "microsoft internet explorer")
  {
     if(navigator.userAgent.indexOf('IRIX') != -1)
         OpSys = "Irix";
     else if((navigator.userAgent.indexOf('Win') != -1) && (navigator.userAgent.indexOf('98') != -1))
         OpSys = "Windows 98 or greater";
     else if((navigator.userAgent.indexOf('Win') != -1) && (navigator.userAgent.indexOf('95') != -1))
         OpSys = "Windows 95";
     else if(navigator.appVersion.indexOf("16") !=-1)
         OpSys = "Windows 3.1";
     else if (navigator.appVersion.indexOf("NT") !=-1)
         OpSys= "Windows NT";
     else if(navigator.appVersion.indexOf("SunOS") !=-1)
         OpSys = "SunOS";
     else if(navigator.appVersion.indexOf("Linux") !=-1)
         OpSys = "Linux";
     else if(navigator.userAgent.indexOf('Mac') != -1)
         OpSys = "Macintosh";
     else if(navigator.appName=="WebTV Internet Terminal")
         OpSys="WebTV";
     else if(navigator.appVersion.indexOf("HP") !=-1)
         OpSys="HP-UX";
     else
         OpSys = "other";
  }

  else
  {
        OpSys = navigator.platform;
        if(OpSys.toLowerCase() == "win32")
            OpSys = "Windows";
        else
            OpSys = "Other";
  }



	// Java Detection
     if(navigator.javaEnabled())
         java = "Yes";
     else
         java = "No";

	// Anti-alisaing Fonts
     if(window.screen.fontSmoothingEnabled == true)
         font = "Yes"
     else
         font = "No"

	// Current Resolution
     w = screen.width;
     h = screen.height;
     res = w + " x " + h;

	// Max Resolution
     mw = window.screen.availWidth;
     mh = window.screen.availHeight;
     mres = mw + " x " + mh;

	// Color Depth (bit)
     color = window.screen.colorDepth;

	// Number Of Colors
     ncolor = Math.pow(2, color);


	// Write it all to the body
        document.write("<table border='0' bgcolor='#476078' width='400' cellpadding='2' cellspacing='1'>");
        document.write("<tr><td bgcolor='#1B2936' colspan='2' align='center'><small>Script by Daniel Alloway<br>");
        document.write("<a href='http://h2osmash.tripod.com' target='_blank'>http://h2osmash.tripod.com</a></small></td></tr>");

        document.write("<tr><td bgcolor='#223544'>CPU Class: </td>");
        document.write("<td bgcolor='#444444'>", cpu ,"</td></tr>");

        document.write("<tr><td bgcolor='#223544'>Operating System: </td>");
        document.write("<td bgcolor='#444444'>", OpSys ,"</td></tr>");

        document.write("<tr><td bgcolor='#223544'>Browser Name: </td>");
        document.write("<td bgcolor='#444444'>", bn ,"</td></tr>");

        document.write("<tr><td bgcolor='#223544'>Browser Version: </td>");
        document.write("<td bgcolor='#444444'>", bv ,"</td></tr>");

        document.write("<tr><td bgcolor='#223544'>Browser Language: </td>");
        document.write("<td bgcolor='#444444'>", bl ,"</td></tr>");

        document.write("<tr><td bgcolor='#223544'>Code Name: </td>");
        document.write("<td bgcolor='#444444'>", bc ,"</td></tr>");

        document.write("<tr><td bgcolor='#223544'>Java?: </td>");
        document.write("<td bgcolor='#444444'>", java ,"</td></tr>");

        document.write("<tr><td bgcolor='#223544'>Cookies?: </td>");

var oneDay= 1*24*60*60*1000;

var expDate = new Date();

expDate.setTime (expDate.getTime() + oneDay);

var cookieExpires = expDate.toGMTString();

document.cookie="verifyCookie=test; expires="+cookieExpires

if (document.cookie.length>0)

document.write("<td bgcolor='#444444'>Your browser supports cookies.</td>");

else {

document.write("<td bgcolor='#444444'>Your browser doesn't support cookies, or they're currently disabled.</td>");

document.write(document.cookie.substring(0,document.cookie.length)+"<BR><BR>");

}

document.cookie="verifyCookie=CLEAR; expires=Sun, 09-Nov-97 01:00:00 GMT";


        document.write("<tr><td bgcolor='#223544'>Anti-aliasing Fonts: </td>");
        document.write("<td bgcolor='#444444'>", font ,"</td></tr>");

        document.write("<tr><td bgcolor='#223544'>Current Resolution: </td>");
        document.write("<td bgcolor='#444444'>", res ,"</td></tr>");

        document.write("<tr><td bgcolor='#223544'>Max Resolution: </td>");
        document.write("<td bgcolor='#444444'>", mres ,"</td></tr>");

        document.write("<tr><td bgcolor='#223544'>Color Depth: </td>");
        document.write("<td bgcolor='#444444'>", color ," bit</td></tr>");

        document.write("<tr><td bgcolor='#223544'># of Colors: </td>");
        document.write("<td bgcolor='#444444'>", ncolor ,"</td></tr>");
 //-->
</SCRIPT>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

JavaScriptBank · Sep 14, 2009

Copy to Clipboard using Flash

On the Internet in general and JavaScript in particular, there are many codes and tools to help your visitors copy text directly into the clipboard without th... detail

Demo: Copy to Clipboard using Flash

How to setup

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

Code:

<script type="text/javascript">
<!--
/*
	Created by: Mark O'Sullivan :: http://lussumo.com/
	Jeff Larson :: http://www.jeffothy.com/
	Mark Percival :: http://webchicanery.com/
	Licensed under: GNU Lesser General Public License
*/

function copy(text2copy) {
  if (window.clipboardData) {
    window.clipboardData.setData("Text",text2copy);
  } else {
    var flashcopier = 'flashcopier';
    if(!document.getElementById(flashcopier)) {
      var divholder = document.createElement('div');
      divholder.id = flashcopier;
      document.body.appendChild(divholder);
    }
    document.getElementById(flashcopier).innerHTML = '';
    var divinfo = '<embed src="_clipboard.swf" FlashVars="clipboard='+escape(text2copy)+'" width="0" height="0" type="application/x-shockwave-flash"></embed>';
    document.getElementById(flashcopier).innerHTML = divinfo;
  }
}
//-->
</script>

Step 2: Place HTML below in your BODY section
HTML

Code:

<form name="form1" action="">
  <textarea name="results" cols="40" rows="6">All
of the text here will be copied. Epsum factorial non deposit quid pro
quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum.
Souvlaki ignitus carborundum.</textarea>
  <br>
  <input value="Copy This" onclick="copy(document.form1.results.value);" type="button">
</form>

Step 3: Download files below
Files
_clipboard.swf

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

JavaScriptBank · Sep 21, 2009

Auto Popup Window

Automatically opens a small popup window and closes it after a specified time. Great for displaying important messages without ... detail

Demo: Auto Popup Window

How to setup

Step 1: Place JavaScript below in your HEAD section
JavaScript

Code:

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
<!-- Original:  Rick Johnson (frj11@ev1.net) -->
<!-- Web Site:  http://rickjohnson.tripod.com -->

function popupWin() {
text =  "<html>\n<head>\n<title>Pop Window</title>\n<body>\n";
text += "<center>\n<br>";
text += "<a href='http://www.javascriptbank.com/' target='_blank'><h2>Over 2000+ free JavaScripts<br>at JavaScriptBank.com</h2></a>";
text += "</center>\n</body>\n</html>\n";
setTimeout('windowProp(text)', 3000); 		// delay 3 seconds before opening
}
function windowProp(text) {
newWindow = window.open('','newWin','width=300,height=100');
newWindow.document.write(text);
setTimeout('closeWin(newWindow)', 5000);	// delay 5 seconds before closing
}
function closeWin(newWindow) {
newWindow.close();				// close small window and depart
}
//  End -->
</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="popupWin()">
</BODY>
	<!--
    	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 · Sep 28, 2009

Pacman

A simulator effect with Pacman game.... detail

Demo: Pacman

How to setup

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

Code:

<SCRIPT LANGUAGE = "Javascript1.2" >
ammount = 10;
times = 1;
wait = 0;
done = false;
x = new Array();
y = new Array();
temp = 0;
waitUntil = 10;

pillSrc = "Pill.gif";
pacCESrc = "PacCE.gif";
pacOESrc = "PacOE.gif";
pacCWSrc = "PacCW.gif";
pacOWSrc = "PacOW.gif";

for (i = 1; i <= ammount; i++)
  document.write('<DIV ID = "pill' + i + '" STYLE = "visibility: hidden; position: absolute"><IMG NAME = "pic' + i + '" SRC = "' + pillSrc + '"></DIV>');

pillW = document.pic1.width;
pillH = document.pic1.height;

document.write('<DIV ID = "pacCE" STYLE = "visibility: hidden; position: absolute"><IMG NAME = "pac1E" SRC = "' + pacCESrc + '"></DIV>');
document.write('<DIV ID = "pacOE" STYLE = "visibility: hidden; position: absolute"><IMG NAME = "pac2E" SRC = "' + pacOESrc + '"></DIV>');
document.write('<DIV ID = "pacCW" STYLE = "visibility: hidden; position: absolute"><IMG NAME = "pac1W" SRC = "' + pacCWSrc + '"></DIV>');
document.write('<DIV ID = "pacOW" STYLE = "visibility: hidden; position: absolute"><IMG NAME = "pac2W" SRC = "' + pacOWSrc + '"></DIV>');

showPacC = document.getElementById("pacCE").style;
showPacO = document.getElementById("pacOE").style;

pacCWidth = document.pac1E.width;
pacCHeight = document.pac1E.height;
pacOWidth = document.pac2E.width;
pacOHeight = document.pac2E.height;

function pacPicC()
{
  temp = place + 1;
  if (temp > ammount)
    temp = 1;
  if (x[temp] >= x[place])
  {
    showPacC = document.getElementById("pacCE").style;
    xOff = 10;
  }
  else
  {
    showPacC = document.getElementById("pacCW").style;
    xOff = 23;
  }
}

function pacPicO()
{
  temp = place + 1;
  if (temp > ammount)
    temp = 1;
  if (x[temp] >= x[place])
  {
    showPacO = document.getElementById("pacOE").style;
    xOff = 10;
  }
  else
  {
    showPacO = document.getElementById("pacOW").style;
    xOff = 23;
  }
}

function update(e)
{
  wait++;
  if (wait == waitUntil)
  {
    if (times > ammount)
    {
      done = true;
      times = 1;
    }
    showPill = document.getElementById("pill" + times + "").style;
    x[times] = event.x + document.body.scrollLeft - (pillW / 2);
    showPill.left = x[times];
    y[times] = event.y + document.body.scrollTop - (pillH / 2);
    showPill.top = y[times];
    showPill.visibility = "visible";
    if (done)
    {
      showPacC.visibility = "hidden";
      place = times + 1;
      if (place > ammount)
        place = 1;
      pacPicO();
      showPacO.left = x[place] - pacOWidth + xOff;
      showPacO.top = y[place] - (pacOHeight / 2) + 3;
      showPacO.visibility = "visible";
    }  
    times++;
    wait = 0;
  }
  else if (wait == waitUntil / 2 && done)
  {
    showPacO.visibility = "hidden";
    if (place > ammount)
      place = 1;
    pacPicC();
    showPacC.left = x[place] - pacCWidth + xOff;
    showPacC.top = y[place] - (pacCHeight / 2) + 3;
    showPacC.visibility = "visible";
  }
} 
</SCRIPT>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Step 2: Download files below
Files
Pacman_images.zip

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

JavaScriptBank · Oct 5, 2009

Select Menu

Turn a form select list into a two-level select menu.... detail

Demo: Select Menu

How to setup

Step 1: downloads
Files
sm.zip

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

JavaScriptBank · Oct 12, 2009

JavaScript Countdown Timer

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

Demo: JavaScript Countdown Timer

How to setup

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

Code:

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

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

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

Code:

<script language="javascript">
// Created by: Neill Broderick :: http://www.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 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:

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

AJAX news ticker - JavaScript Refresh Page - JavaScript Unclosable Window

JavaScriptBank · Oct 21, 2009

Image slideshow transition

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

Demo: Image slideshow transition

How to setup

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

Code:

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

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

var i_messages = 0
var timer

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

AJAX news ticker - JavaScript Refresh Page - JavaScript Unclosable Window

JavaScriptBank · Oct 26, 2009

Web based Music Player

Bring the sound of life - music to your visitors by this JavaScript. It is an advanced web based midi player that actually enables you to jump, pause, and manipulate the play list like never before.... detail

Demo: Web based Music Player

How to setup

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

Code:

<SCRIPT language=JavaScript>
<!-- Begin
counter = 0;
html = true;
songs = new Array();
function addsong() {
file = document.forms[0].file.value;
if(file == "") {
alert("Entra un nombre de archivo o da click en Examinar..");
}
else {
fn = file;
while(fn.indexOf() != -1) {
pos = fn.indexOf();
fn = fn.substring(fn.lenght);
}
if(fn.indexOf(".gif") == 1) {
alert("SÃ³lo sonidos o mÃºsica");
}
else {
songs[counter] = file;
document.forms[0].selMusica[counter] = new Option(fn, file, false, true);
counter++;
}
document.forms[0].file.value = "";
}
}
function musica() {
document.all.sound.src=document.clock.selMusica.options[document.clock.selMusica.selectedIndex].text;
}
function stop() {
document.all.sound.src="";
}
function count() {
document.clock.songs.value=document.clock.selMusica.options.length;
}
function deletethis() {
if(counter > 0) {
counter--;
document.forms[0].selMusica[counter] = null;
songs[counter] = "";
}
else {
alert("No hay nada en la lista!");
   }
}
function bajar() {
document.clock.selMusica.options[document.clock.selMusica.selectedIndex++];
saber2();
saber();
}
function subir() {
document.clock.selMusica.options[document.clock.selMusica.selectedIndex--];
saber2();
saber();
}
function saber() {
document.clock.url.value=document.clock.selMusica.options[document.clock.selMusica.selectedIndex].text;
}
function saber2() {
fn = document.clock.selMusica.options[document.clock.selMusica.selectedIndex].text;
char = unescape("%5C");
while(fn.indexOf(char) != -1) {
pos = fn.indexOf(char);
fn = fn.substring(pos + 1, fn.length);
document.clock.nombre.value=fn;
}
}
// End-->
</SCRIPT>

Step 2: Place HTML below in your BODY section
HTML

Code:

<BODY onclick=count() onload=count()>
<BGSOUND id=sound src="">
<FORM name=clock><INPUT type=file name=file size="20"> <INPUT onclick=addsong() type=button value=Add><INPUT onclick=deletethis() type=button value=Delete><BR><INPUT onclick=musica() type=button value=Listen name=empezar> 
<INPUT onclick=stop() type=button value=Stop name=detener> You have:<INPUT 
readOnly size=2 name=songs>song(s) in the list.<BR>Name of the song:<INPUT 
size=25 name=nombre><INPUT onclick="saber2(); saber()" type=button value="Know Name & Url">Url 
	of the song:<INPUT size=19 name=url> <BR><INPUT onclick=bajar() type=button value=MoveDown><INPUT onclick=subir() type=button value=MoveUp><BR><BR><SELECT 
multiple size=20 name=selMusica></SELECT> </FORM>
</BODY>

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

JavaScriptBank · Nov 2, 2009

Make link open in new tab/window

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

Demo: Make link open in new tab/window

How to setup

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

Code:

<script language=javascript>
/*
	Kevin Yank
	http://www.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 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:

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

AJAX news ticker - JavaScript Refresh Page - JavaScript Unclosable Window

JavaScriptBank · Nov 9, 2009

AJAX Page Content Loader

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

Demo: AJAX Page Content Loader

How to setup

Step 1: Place CSS below in your HEAD section
CSS

Code:

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

Step 2: Place JavaScript below in your HEAD section
JavaScript

Code:

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

// Created by: Eddie Traversa (2005) :: http://dhtmlnirvana.com/
function ajaxLoader(url,id) {
  if (document.getElementById) {
    var x = (window.ActiveXObject) ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
  }
  if (x) {
    x.onreadystatechange = function() {
      if (x.readyState == 4 && x.status == 200) {
        el = document.getElementById(id);
        el.innerHTML = '<JavaScriptBank>This is content of demo.xml file</JavaScriptBank>';//x.responseText;
      }
    }
    x.open("GET", url, true);
    x.send(null);
  }
}
//-->
</script>

Step 3: Place HTML below in your BODY section
HTML

Code:

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

Step 4: Download files below
Files
demo.xml

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

JavaScriptBank · Nov 16, 2009

Top 10 JavaScript Frameworks by Google, Yahoo, Bing

JavaScript - an indispensable part for developing websites and web pages, whether that is simple pages or professional website, and whether you are senior or junior. Nowadays, JavaScript frameworks be... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

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

How to setup

Javascript Music Player - Random Text Generator - Floating Image Script

JavaScriptBank · Nov 20, 2009

Time Picker with child window

This JavaScript code - date picker helps you choose a time through a popup window. Perhaps this feature is not new on J... [URL="http://www.javascriptbank.com/time-picker-with-child-window.html/en//"]detail at JavaScriptBank.com - 2.000+ free JavaScript codes

Demo: Time Picker with child window

How to setup

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

Code:

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

Step 2: Place HTML below in your BODY section
HTML

Code:

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

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

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

JavaScriptBank · Nov 23, 2009

Fading Slide Show

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

Demo: Fading Slide Show

How to setup

Step 1: Use JavaScript code below to setup the script
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: Copy & Paste HTML code below in your BODY section
HTML

Code:

<body onLoad="runSlideShow()">
<img id="VU" src="logojs.gif" name='SlideShow'>
</body>
	<!--
    	This script downloaded from 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 · Nov 30, 2009

Virtual Keyboard

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

Demo: Virtual Keyboard

How to setup

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

Code:

<script type="text/javascript" src="vk_loader.js" ></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 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 www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Step 3: downloads
Files
Virtual_Keyboard.zip

Javascript Music Player - Random Text Generator - Floating Image Script

JavaScriptBank · Dec 3, 2009

Refresh Page - Automatic

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

Demo: Refresh Page - Automatic

How to setup

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

Code:

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

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

JavaScriptBank · Dec 8, 2009

Validate E-Mail

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

Demo: JavaScript Validate E-Mail

How to setup

Step 1: Place JavaScript below in your HEAD section
JavaScript

Code:

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

<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 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 · Dec 10, 2009

Top 10 Beautiful Christmas Countdown Timers

Only a fews of days then Christmas will come. And if you are looking for one beautiful countdown timer for waiting <i>Christmas Day</i> on your website, then I hope this post will satisfy your needs; ... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

Demo: JavaScript Top 10 Beautiful Christmas Countdown Timers

How to setup

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

JavaScriptBank · Dec 14, 2009

Line Graph script

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

Demo: JavaScript Line Graph script

How to setup

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

Code:

<script type="text/javascript" src="wz_jsgraphics.js"></script>
<script type="text/javascript" src="line.js"></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="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 www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Step 3: downloads
Files
line.js
wz_jsgraphics.js

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

Free JavaScript Code Downloads

Member

New Member

Member

Member

Member

Member

Member

Member

Member

Member

Member

Member

Member

Member

Member

Member

Member

Member

Member

Member