JavaScript codes for Web DEV

[JavaScriptBank]

jQuery is becoming more important than we think, although it's just JavaScript framework to help web coders, web programmers write the interactive tasks. However, with the higher requirements of moder... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

Demo: JavaScript Essential jQuery Examples for Web Designers

How to setup

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

[JavaScriptBank]

This JavaScript code example (JavaScript chat code) just help you learn more OOP in JavaScript by making a message box with chat-style window. A simple free JavaScript chat effect with a few codelines... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

Demo: JavaScript Simple JavaScript Chat Box with OOP Skill

How to setup

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

<style type="text/css">
div#list {
  background-color: #DFDFDF;
  color: #000;
  overflow: scroll;
  width: 15em;
  height: 10em;
  padding: 10px;
  text-align: left;
}
</style>

Step 2: Place JavaScript below in your HEAD section
JavaScript

<script type="text/javascript">
// Created by: James Robertson | http://www.r0bertson.co.uk
// This script downloaded from www.JavaScriptBank.com

function addText() {
  olist = document.getElementById('list');
  op = document.createElement('p');
  op.innerHTML = 'More text ...';
  ocontent = document.getElementById('content');
  ocontent.appendChild(op);
  olist.scrollTop = olist.scrollHeight;
}
</script>

Step 3: Place HTML below in your BODY section
HTML

<p>A simple chat-style display</p>

<div id="list">
  <div id="content">
  <p class="other_user">Good afternoon. How are you?</p>
  <p class="other_user">Hello?</p>
  <p class="other_user">Is anybody there?</p>
  </div>
</div>
<p>
<div id="toolbar"><input type="button" value="add text" onclick="addText()" /></div>

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

[JavaScriptBank]

With this JavaScript typing text script, you can use to spell out a string of text, letter by letter. This JavaScript code example provides 3 ways to type our st... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

Demo: JavaScript Simple JavaScript Typing Text onClick

How to setup

Step 1: Place JavaScript below in your HEAD section
JavaScript

<script type="text/javascript">
// Created by: Ilya Gerasimenko | http://www.gerasimenko.com
// This script downloaded from www.JavaScriptBank.com

// Text to type
var stringOfText1 = '... with a new string of text. Convenient for those "read more..." links.';
var stringOfText2 = ' spots on the same page; the animations will be consecutive.';
var stringOfText3 = 'Click (and keep clicking) here to retype this text over and over. You don\'t have to, but you can.';

// Animation
var textHolder;
var textTarget;
var letter;
var index;
var printing;
var waiting = false;

// Start

spellString = function (oId,str) {
 	if (waiting == false) {
  		index = 0;
  		waiting = true;
  		textTarget = document.getElementById(oId);
  		textTarget.innerHTML = '';
  		textHolder = str.split('');
  		sendToPrint();
 	}
}

// Animation

sendToPrint = function () {
 	if (index<textHolder.length) {
 		 printing = window.setTimeout(
    	 function () {
 					  getLetter(textTarget,index); 
 			},	1);
 	} else {
 		 waiting = false;
 	}
}

getLetter = function (textTarget,index) {
 	letter = document.createTextNode(textHolder[index]);
 	if (letter.value == '\\') letter.value = '';
 	printLetter(textTarget,letter);
}

printLetter = function (textTarget,letter) {
 	textTarget.appendChild(letter);
	 window.clearTimeout(printing);
	 index++;
	 sendToPrint();
}


// Created by: Simon Willison | http://simon.incutio.com/
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}
	
addLoadEvent(	function () {
		document.getElementById('clickhere1').onclick = function () {
		  		spellString('typehere1',stringOfText1);
  		}
		document.getElementById('clickhere2').onclick = function () {
				  spellString('typehere2',stringOfText2);
  		}
		document.getElementById('keepclicking').onclick = function () {
		  		spellString('keepclicking',stringOfText3);
  		}
  }
);
</script>

Step 2: Place HTML below in your BODY section
HTML

<!--
/*
     This script downloaded from www.JavaScriptBank.com
     Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
*/
-->
<div style="text-align: left; width: 70%;">

<p id="typehere1"><span id="clickhere1">Click here to <em>replace</em> this text ...</span></p>

<p>Can be used in several<span id="typehere2">... <span id="clickhere2">(click here to <em>read more</em>)</span></span></p>
<p id="keepclicking">Click (and keep clicking) here to <em>retype this text over and over</em>.</p>
</div>

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

[JavaScriptBank]

In this AJAX JavaScript article tutorial, the author shows you some basics about AJAX (Asynchronous JavaScript and XML), such as: methods and properties of AJAX, how to send a request to server with G... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

Demo: JavaScript AJAX Basics for Beginners

How to setup

JavaScript Countdown Timer - JavaScript Web based Music Player - JavaScript AJAX Page Content Loader

[JavaScriptBank]

This JavaScript code example provides us two functions to clean up and format numbers quite nicely.

One JavaScript check number function will take any decima... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

Demo: JavaScript Simple JavaScript Number Formatter

How to setup

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

<script type="text/javascript">
// Created by: Justin Barlow | http://www.netlobo.com/
// This script downloaded from www.JavaScriptBank.com

// This function formats numbers by adding commas
function numberFormat(nStr){
  nStr += '';
  x = nStr.split('.');
  x1 = x[0];
  x2 = x.length > 1 ? '.' + x[1] : '';
  var rgx = /(\d+)(\d{3})/;
  while (rgx.test(x1))
    x1 = x1.replace(rgx, '$1' + ',' + '$2');
  return x1 + x2;
}

// This function removes non-numeric characters
function stripNonNumeric( str ){
  str += '';
  var rgx = /^\d|\.|-$/;
  var out = '';
  for( var i = 0; i < str.length; i++ ){
    if( rgx.test( str.charAt(i) ) ){
      if( !( ( str.charAt(i) == '.' && out.indexOf( '.' ) != -1 ) ||
             ( str.charAt(i) == '-' && out.length != 0 ) ) ){
        out += str.charAt(i);
      }
    }
  }
  return out;
}
</script>

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

<div>
			numberFormat():<br>

			<form method="get" onsubmit="javascript:return false;">
				<input type="text" onkeyup="javascript:document.getElementById('numFormatResult').innerHTML = numberFormat( this.value );">

				<input type="reset" value="clear">
			</form>
			<span id="numFormatResult"></span>
			<br><br>
			stripNonNumeric():<br>
			<form method="get" onsubmit="javascript:return false;">

				<input type="text" onkeyup="javascript:document.getElementById('numStripResult').innerHTML = stripNonNumeric( this.value );">
				<input type="reset" value="clear">

			</form>
			<span id="numStripResult"></span>
			<br><br>
			stripNonNumeric() then numberFormat():<br>
			<form method="get" onsubmit="javascript:return false;">
				<input type="text" onkeyup="javascript:document.getElementById('numBothResult').innerHTML = numberFormat( stripNonNumeric( this.value ) );">

				<input type="reset" value="clear">
			</form>

			<span id="numBothResult"></span>
		</div>

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

[JavaScriptBank]

JavaScript minify (JS minify) is one of most important tasks if you would like to care about web performance. Today, jsB@nk would like to shows you a JavaScript article tutor... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

Demo: JavaScript Better JavaScript Minification

How to setup

JavaScript Countdown Timer - JavaScript Web based Music Player - Free JavaScript Codes

[JavaScriptBank]

In this JavaScript article tutorial, we're together to enjoy awesome experiments on HTML5 with new hot JavaScript APIs. With a lot of JavaScript/Web application live demos in this JavaScript HTML5 tut... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

Demo: JavaScript HOT New JavaScript APIs with HTML5

How to setup

JavaScript Countdown Timer - JavaScript Web based Music Player - Free JavaScript Codes

[JavaScriptBank]

HTML tooltips are the indispensable things on the layout of any website. They may provide more information to our readers without breaking the web designs. Most basic and ... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

Demo: JavaScript Amazing and Cool HTML Tooltips with JavaScript-jQuery

How to setup

JavaScript Countdown Timer - JavaScript Web based Music Player - Free JavaScript Codes

[JavaScriptBank]

This JavaScript article tutorial shows you a short overview about JavaScript objects in comparing and cloning. You'll know how to clone JavaScript objects, make... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

Demo: JavaScript JavaScript Objects: Compare and Clone

How to setup

AJAX news ticker - JavaScript Refresh Page - JavaScript Unclosable Window

[JavaScriptBank]

The type of this JavaScript effect can be seen on many upload-allowance sites, such as Youtube, Flickr, ImageShack, Picasa, etc. That's your visitors can upload files through this JavaScript code, aft... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

Demo: JavaScript JavaScript Add More Unlimited Input Fields

How to setup

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

<style type="text/css">
/*
     This script downloaded from www.JavaScriptBank.com
     Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
*/
#imageUpload input {
	display: block;
}
</style>

Step 2: Place JavaScript below in your HEAD section
JavaScript

<script type="text/javascript">
// Created by: Jeroen Haan | http://www.haan.net
// This script downloaded from JavaScriptBank.com

function fileFields() {
	 var x = document.getElementById('imageUpload');
	 x.onclick = function() {
  		var i = parseFloat(this.lastChild.id)+1;
  		input = document.createElement("input");
  		input.setAttribute("type", "file");
  		input.setAttribute("name", 'imageName_' + i);
  		input.setAttribute("id", i);
  		this.appendChild(input);
	 }
}

// Multiple onload function created by: Simon Willison
// http://simonwillison.net/2004/May/26/addLoadEvent/
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

addLoadEvent(function() {
  fileFields();
});
</script>

Step 3: Place HTML below in your BODY section
HTML

<a href="#" id="imageUpload"><input type="file" name="imageName_1" id="1" /></a>

JavaScript Countdown Timer - JavaScript Web based Music Player - Free JavaScript Codes