JavaScript library

WordPress - an open source powerful PHP platform to develop personal web blogs, WordPress is the most used blog system at present, and I also opened a personal blog base ... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

http://www.javascriptbank.com/javasc...ess-master.jpg
Demo: JavaScript How to load JavaScript like a WordPress Master

How to setup

AJAX news ticker - JavaScript Refresh Page - JavaScript Unclosable Window

JavaScript bounce effect is the type of script presented on jsB@nk.com through many plained-JavaScript example codes, such as:

- [URL="http://www.javascriptbank.com/elastic-trail-script.html"]J... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

http://www.javascriptbank.com/javasc...-framework.jpg
Demo: JavaScript Amazing Bounce Effect using jQuery framework

How to setup

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

Code:

---

<STYLE type="text/css">
body, input{
        font-family: Calibri, Arial;
}
div {
        padding:5px;
        width:150px;
        height:100px;
        text-align:center;
}
#bouncy1 {
        background-color:#FFEE88;
}
#bouncy2 {
        background-color:#EE88FF;
}
#bouncy3 {
        background-color:#EE8888;
}
#bouncy4 {
        background-color:#88EEFF;
}
</STYLE>

---

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

Code:

---

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<SCRIPT>
$(function(){

        //Add bounce effect on Click of the DIV
        $('#bouncy1').click(function () {
                  $(this).effect("bounce", { times:5 }, 300);
        });

        $('#bouncy2').click(function () {
                  $(this).effect("bounce", { direction:'left', times:5 }, 300);
        });

        $('#bouncy3').click(function () {
                  $(this).effect("bounce", { direction:'right', times:5 }, 300);
        });

        $('#bouncy4').click(function () {
                  $(this).effect("bounce", { direction:'down', times:5 }, 300);
        });

        //Bounce all DIVs on click of button
        $("#bounceAll").click(function(){
                $("div").click();
        });
});
</SCRIPT>

---

Step 3: Place HTML below in your BODY section
HTML

Code:

---

<table>
<tr>
        <td><div id="bouncy1">Click here to bounce. Direction: Up</div></td>
        <td><div id="bouncy2">Click here to bounce. Direction: Left</div></td>
</tr>
<tr>
        <td><div id="bouncy3">Click here to bounce. Direction: Right</div></td>
        <td><div id="bouncy4">Click here to bounce. Direction: Down</div></td>

</tr>
</table>

<br/>
<input id="bounceAll" type="button" value="Click to Bounce All!"/>

---

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

Encapsulation is a very useful technique in Object-Oriented programming which allows you to separate an abstraction's implementation from its interface class, thus enabling future changes to the imple... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

http://www.javascriptbank.com/javasc...javascript.jpg
Demo: JavaScript Encapsulation in OOP JavaScript

How to setup

AJAX news ticker - JavaScript Refresh Page - JavaScript Unclosable Window

Yes, this free HTML JavaScript tutorial is another round-up of very great and helpful JavaScript/jQuery techniques, tools and resources. In this selection we presen... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

http://www.javascriptbank.com/javasc...ques-tools.jpg
Demo: JavaScript 45 Great Helpful JavaScript and jQuery Techniques and Tools

How to setup

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

This free HTML JavaScript tutorial provides some basic JavaScript concepts for programming newbies. In this post, you will train some categories of JavaScript sta... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

http://www.javascriptbank.com/javasc...statements.jpg
Demo: JavaScript Training Lexical Structure and Statements

How to setup

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

JavaScript photo gallery, JavaScript image gallery and web photo gallery ar... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

http://www.javascriptbank.com/javasc...-solutions.jpg
Demo: JavaScript 65 Free JavaScript Photo Gallery Solutions

How to setup

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

Similar to the free JavaScript game Whack the Gopher, this JavaScript game is simpler by change the picture of gophers into the ... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

http://www.javascriptbank.com/javasc...smiley-1-2.jpg
Demo: JavaScript Smash a Smiley 1.2

How to setup

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

Code:

---

<script language="Javascript">
/*
    This script downloaded from www.JavaScriptBank.com
    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
*/
<!--
/*                     
SMASH a SMILEY 1.2
---------------------------------------------------------------------                   
Copyright 1997 Tomas Lilje
http://home3.swipnet.se/~w-39426 || e.lilje@swipnet.se         
Use this script if you want but don´t put           
away this clip, and please drop me                 
a note. Email comments etc. too             
*/

function eraone () {
        document.play.first.value="";
}

function eratwo () {
        document.play.second.value="";
}

function erathree () {
        document.play.third.value="";
}

function erafour () {
        document.play.fourth.value="";
}

function erafive () {
        document.play.fifth.value="";
}

function erasix () {
        document.play.sixth.value="";
}

function eraseven () {
        document.play.seventh.value="";
}

function eraeight () {
        document.play.eighth.value="";
}

function eranine () {
        document.play.ninth.value="";
}

function start () {
        document.play.fourth.value=" :-)";
        document.play.third.value=" ;-o";
        setTimeout("nextone ()",500);
}

function nextone () {
        document.play.fourth.value="";
        document.play.fifth.value="d:-D";
        setTimeout("nexttwo ()",400);
}

function nexttwo () {
        document.play.third.value="";
        setTimeout("nextthree()",400);
}

function nextthree () {
        document.play.seventh.value=":-(";
        document.play.first.value=">:-)";
        document.play.sixth.value="B-)";
        setTimeout("nextfour ()",700);
}

function nextfour () {
        document.play.first.value="";
        document.play.sixth.value="";
        document.play.second.value="=)";
        setTimeout("nextfive ()",700);
}

function nextfive () {
        document.play.seventh.value="";
        document.play.second.value="";
        document.play.fourth.value="[:o]";
        setTimeout("nextsix ()",800);
}

function nextsix () {
        document.play.eighth.value="d:-(";
        document.play.second.value=">:-D";
        setTimeout("nextseven ()",700);
}

function nextseven () {
        document.play.eighth.value="";
        document.play.fifth.value=":-)";
        setTimeout("nexteight ()",400);
}

function nexteight () {
        document.play.ninth.value=";-)"
        document.play.fourth.value=":<0";
        setTimeout("nextnine ()",500);
}

function nextnine () {
        document.play.fifth.value="";
        document.play.fourth.value="";
        document.play.first.value=":-v";
        setTimeout("nextten ()",200);
}

function nextten () {
        document.play.third.value="B-)";
        document.play.sixth.value=":-(";
        setTimeout("nexteleven ()",600);
}

function nexteleven () {
        document.play.first.value="";
        document.play.seventh.value=";-(";
        setTimeout("nexttwelve ()",500);
}

function nexttwelve () {
        document.play.second.value="B-o";
        document.play.ninth.value=";-(";
        setTimeout("nextthirteen ()",700);
}

function nextthirteen () {
        document.play.first.value=":-)";
        document.play.ninth.value="";
        document.play.seventh.value="";
        setTimeout("start ()",600);
}

function stop () {
        document.play.first.value="";
        document.play.second.value="";
        document.play.third.value="";
        document.play.fourth.value="";
        document.play.fifth.value="";
        document.play.sixth.value="";
        document.play.seventh.value="";
        document.play.eighth.value="";
        document.play.ninth.value="";
}

function about() {     
        alert("Smash a Smiley 1.2 is written by Tomas Lilje. You can use this game if you want, but don´t modify it, and please drop me a note. For further versions, please visit TNeT. Email-> e.lilje@swipnet.se  TNeT-> http://home3.swipnet.se/~w-39426"); 
}

function help() {     
        alert("How to play: Your mission is to hit the smileys, when they show up. "); 
}
//-->

</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
*/
-->
<table border=8 bgcolor="midnightblue" cellpadding=0 cellspacing=0>
<tr>
<td>
<form name="play">
<center> 
<font face="Arial" color="FANTASY" size="4">
<b>Smash a Smiley 1.2
<hr> 
<INPUT TYPE="button" NAME="first" OnClick="eraone ()" value="      "> 

<INPUT TYPE="button" NAME="second" OnClick="eratwo ()" value="      "> 
<INPUT TYPE="button" NAME="third" OnClick="erathree ()" value="      ">
<br> 
<INPUT TYPE="button" NAME="fourth" OnClick="erafour ()" value="      "> 
<INPUT TYPE="button" NAME="fifth" OnClick="erafive ()" value="      "> 
<INPUT TYPE="button" NAME="sixth" OnClick="erasix ()" value="      ">
<br> 
<INPUT TYPE="button" NAME="seventh" OnClick="eraseven ()" value="      "> 
<INPUT TYPE="button" NAME="eighth" OnClick="eraeight ()" value="      "> 
<INPUT TYPE="button" NAME="ninth" OnClick="eranine ()" value="      ">
<br> 
<hr> 
<INPUT TYPE="button" NAME="startitup" OnClick="start ()" value=" Start "> 
<input type="button" name="hbutton" value=" Help" onclick="help()">
<input type="button" name="abutton" value=" About" onclick="about()">
<br>
<hr>

<font size="2">Copyright 1997 Tomas Lilje
</form>
</td>
</tr>
</table>

---

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

In this HTML JavaScript tutorial, <i>Brijesh Shah</i> guides you create some simple codes in Rails, JavaScript and PHP to strip HTML tags, detail at JavaScriptBank.com - 2.000+ free JavaScript codes

http://www.javascriptbank.com/javasc...script-php.jpg
Demo: JavaScript Strip HTML tags in Rails, JavaScript and PHP

How to setup

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

This free AJAX JavaScript tutorial guides you how to build a simple AJAX application using PHP and JavaScript. This free HTMl JavaScript tutorial provides y... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

http://www.javascriptbank.com/javasc...javascript.jpg
Demo: JavaScript A Basic AJAX Demo Application Using PHP And JavaScript

How to setup

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

One more wonderful JavaScript web application created by JavaScript developers, web developers. That is [URL="http://www.javascriptbank.com/tag=sheet music notation"]sheet music no... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

http://www.javascriptbank.com/javasc...javascript.jpg
Demo: JavaScript Marking your Sheet Music Notation with JavaScript

How to setup

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

Code:

---

<style type="text/css">
                        canvas{
                                display:block;
                                border:1px solid #000;
                                width:100%;
                                height:300px;
                        }
                </style>

---

Step 2: Place JavaScript below in your HEAD section
JavaScript

Code:

---

<script src="canvastext.js"></script>
                <script src="ellipse.js"></script>
                <script src="notation-viewer.js"></script>
                <script src="/javascript/jquery.js"></script>
                <script src="js.js"></script>

---

Step 3: Place HTML below in your BODY section
HTML

Code:

---

<form method="post"><select id="file_chooser" name="file"><option>0001 - john w schaum - at sea level</option><option selected="selected">0002 - john w schaum - seize the cs</option></select><select id="zoom"><option value="2">200%</option><option value="1.5">150%</option><option value="1" selected="selected">100%</option><option value=".8">80%</option><option value=".5">50%</option></select></form><canvas id="canvas"></canvas><script>var music={sp:{"work":"","part-list":{"score-part":{_a:{"id":"P1"},"part-name":"Staff 1","score-instrument":{_a:{"id":"P1-I1"},"instrument-name":"Piano 1"},"midi-instrument":{_a:{"id":"P1-I1"},"midi-channel":"1","midi-program":"1"}}},pa:{_a:{"id":"P1"},me:[{_a:{nu:1},at:{di:"1","key":{"fifths":"0"},ti:"4/4",cl:"F/4"},no:[{pi:{s:0,o:4},d:1,v:1,t:4,"stem":"down"},{pi:{s:0,o:4},d:1,v:1,t:4,"stem":"down"},{pi:{s:0,o:4},d:2,v:1,t:2,"stem":"down"}]},{_a:{nu:2},no:[{pi:{s:0,o:4},d:1,v:1,t:4,"stem":"down"},{pi:{s:0,o:4},d:1,v:1,t:4,"stem":"down"},{pi:{s:0,o:4},d:2,v:1,t:2,"stem":"down"}]},{_a:{nu:3},no:[{pi:{s:0,o:4},d:1,v:1,t:4,"stem":"down"},{pi:{s:6,o:3},d:1,v:1,t:4,"stem":"down"},{pi:{s:0,o:4},d:1,v:1,t:4,"stem":"down"},{pi:{s:6,o:3},d:1,v:1,t:4,"stem":"down"}]},{_a:{nu:4},no:[{pi:{s:5,o:3},d:1,v:1,t:4,"stem":"down"},{pi:{s:6,o:3},d:1,v:1,t:4,"stem":"down"},{pi:{s:0,o:4},d:2,v:1,t:2,"stem":"down"}]},{_a:{nu:5},no:[{pi:{s:0,o:4},d:1,v:1,t:4,"stem":"down"},{pi:{s:0,o:4},d:1,v:1,t:4,"stem":"down"},{pi:{s:0,o:4},d:2,v:1,t:2,"stem":"down"}]},{_a:{nu:6},no:[{pi:{s:0,o:4},d:1,v:1,t:4,"stem":"down"},{pi:{s:0,o:4},d:1,v:1,t:4,"stem":"down"},{pi:{s:0,o:4},d:2,v:1,t:2,"stem":"down"}]},{_a:{nu:7},no:[{pi:{s:0,o:4},d:1,v:1,t:4,"stem":"down"},{pi:{s:6,o:3},d:1,v:1,t:4,"stem":"down"},{pi:{s:5,o:3},d:1,v:1,t:4,"stem":"down"},{pi:{s:6,o:3},d:1,v:1,t:4,"stem":"down"}]},{_a:{nu:8},no:[{pi:{s:0,o:4},d:1,v:1,t:4,"stem":"down"},{pi:{s:6,o:3},d:1,v:1,t:4,"stem":"down"},{pi:{s:0,o:4},d:2,v:1,t:2,"stem":"down"}],"barline":{_a:{"location":"right"},"bar-style":"light-heavy"}}]}}};</script>

---

Step 4: downloads
Files
canvastext.js
ellipse.js
jquery.js
js.js
notation-viewer.js

AJAX news ticker - JavaScript Refresh Page - JavaScript Unclosable Window