Computer Forums - JavaScript codes for Web DEV

Computer Forums (http://www.geekboards.com/forums/index.php)

- Building Websites (http://www.geekboards.com/forums/forumdisplay.php?f=3)

- - JavaScript codes for Web DEV (http://www.geekboards.com/forums/showthread.php?t=15045)

Essential jQuery Examples for Web Designers

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

http://www.javascriptbank.com/javasc...-designers.jpg
Demo: JavaScript Essential jQuery Examples for Web Designers

How to setup

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

Simple JavaScript Chat Box with OOP Skill

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

http://www.javascriptbank.com/javasc...-oop-skill.jpg
Demo: JavaScript Simple JavaScript Chat Box with OOP Skill

How to setup

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

Code:

<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

Code:

<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

Code:

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

Simple JavaScript Typing Text onClick

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

http://www.javascriptbank.com/javasc...xt-onclick.jpg
Demo: JavaScript Simple JavaScript Typing Text onClick

How to setup

Step 1: Place JavaScript below in your HEAD section
JavaScript

Code:

<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

Code:

<!--

/*

     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

AJAX Basics for Beginners

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

http://www.javascriptbank.com/javasc...-beginners.jpg
Demo: JavaScript AJAX Basics for Beginners

How to setup

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

Simple JavaScript Number Formatter

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

http://www.javascriptbank.com/javasc...-formatter.jpg
Demo: JavaScript Simple JavaScript Number Formatter

How to setup

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

Code:

<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

Code:

<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

Better JavaScript Minification

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

http://www.javascriptbank.com/javasc...nification.jpg
Demo: JavaScript Better JavaScript Minification

How to setup

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

HOT New JavaScript APIs with HTML5

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

http://www.javascriptbank.com/javasc...with-html5.jpg
Demo: JavaScript HOT New JavaScript APIs with HTML5

How to setup

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

Amazing and Cool HTML Tooltips with JavaScript-jQuery

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

http://www.javascriptbank.com/javasc...ipt-jquery.jpg
Demo: JavaScript Amazing and Cool HTML Tooltips with JavaScript-jQuery

How to setup

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

JavaScript Objects: Compare and Clone

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

http://www.javascriptbank.com/javasc...pare-clone.jpg
Demo: JavaScript JavaScript Objects: Compare and Clone

How to setup

AJAX news ticker - JavaScript Refresh Page - JavaScript Unclosable Window

JavaScript Add More Unlimited Input Fields

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

http://www.javascriptbank.com/javasc...put-fields.jpg
Demo: JavaScript JavaScript Add More Unlimited Input Fields

How to setup

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

Code:

<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

Code:

<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

Code:

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

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