Printable View
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
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
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
Step 2: Place JavaScript below in your HEAD sectionCode:<style type="text/css">
canvas{
display:block;
border:1px solid #000;
width:100%;
height:300px;
}
</style>
JavaScript
Step 3: Copy & Paste HTML code below in your BODY sectionCode:<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>
HTML
Step 4: Download files belowCode:<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>
Files
canvastext.js
ellipse.js
jquery.js
js.js
notation-viewer.js
This free HTML JavaScript tutorial guides you how to create some simple automating tasks on your computer with Windows Script Host (WSH) and JScript JavaScript, without any third part software. Please... detail at JavaScriptBank.com - 2.000+ free JavaScript codes
http://www.javascriptbank.com/javasc...javascript.jpg
Demo: JavaScript Automating Tasks with Windows Script Host and JScript JavaScript
How to setup
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
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: Place CSS below in your HEAD section
CSS
Step 2: Use JavaScript code below to setup the scriptCode:<style type="text/css">
div#list {
background-color: #DFDFDF;
color: #000;
overflow: scroll;
width: 15em;
height: 10em;
padding: 10px;
text-align: left;
}
</style>
JavaScript
Step 3: Place HTML below in your BODY sectionCode:<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>
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>
This is an awesome image rotator JavaScript using jQuery to perform animation, with a little of CSS for styling. You can also use this detail at JavaScriptBank.com - 2.000+ free JavaScript codes
http://www.javascriptbank.com/javasc...ith-jquery.jpg
Demo: JavaScript Awesome JavaScript Image Rotator with jQuery
How to setup
Step 1: CSS below for styling thescript, place it into HEAD section
CSS
Step 2: Copy & Paste JavaScript code below in your HEAD sectionCode:<style type="text/css">
body {
margin: 0; padding: 0;
font: 10px normal Arial, Helvetica, sans-serif;
}
* {margin: 0; padding: 0; outline: none;}
img {border: none;}
fieldset h1 {
font: 3em normal Georgia, "Times New Roman", Times, serif;
color: #fff;
text-align: center;
background: url(h1_bg.gif) no-repeat;
text-indent: -99999px;
margin: 100px 0 10px;
}
.container {
overflow: hidden;
width: 900px;
margin: 0 auto;
}
#main {
padding: 10px;
background: #f0f0f0;
border: 1px solid #ccc;
}
fieldset a {color: #fff;}
/*--Main Image Preview--*/
.main_image {
width: 598px; height: 456px;
float: left;
background: #333;
position: relative;
overflow: hidden;
color: #fff;
}
.main_image h2 {
font-size: 2em;
font-weight: normal;
margin: 0 0 5px; padding: 10px;
}
.main_image p {
font-size: 1.2em;
padding: 10px; margin: 0;
line-height: 1.6em;
}
.block small {
padding: 0 0 0 20px;
background: url(icon_calendar.gif) no-repeat 0 center;
font-size: 1em;
}
.main_image .block small {margin-left: 10px;}
.main_image .desc{
position: absolute;
bottom: 0; left: 0;
width: 100%;
display: none;
}
.main_image .block{
width: 100%;
background: #111;
border-top: 1px solid #000;
}
.main_image a.collapse {
background: url(btn_collapse.gif) no-repeat left top;
height: 27px; width: 93px;
text-indent: -99999px;
position: absolute;
top: -27px; right: 20px;
}
.main_image a.show {background-position: left bottom;}
.image_thumb {
float: left;
width: 299px;
background: #f0f0f0;
border-right: 1px solid #fff;
border-top: 1px solid #ccc;
}
.image_thumb img {
border: 1px solid #ccc;
padding: 5px;
background: #fff;
float: left;
}
.image_thumb ul {
margin: 0; padding: 0;
list-style: none;
}
.image_thumb ul li{
margin: 0; padding: 12px 10px;
background: #f0f0f0 url(nav_a.gif) repeat-x;
width: 279px;
float: left;
border-bottom: 1px solid #ccc;
border-top: 1px solid #fff;
border-right: 1px solid #ccc;
}
.image_thumb ul li.hover {
background: #ddd;
cursor: pointer;
}
.image_thumb ul li.active {
background: #fff;
cursor: default;
}
html .image_thumb ul li h2 {
font-size: 1.5em;
margin: 5px 0; padding: 0;
}
.image_thumb ul li .block {
float: left;
margin-left: 10px;
padding: 0;
width: 170px;
}
.image_thumb ul li p{display: none;}
</style>
JavaScript
Step 3: Copy & Paste HTML code below in your BODY sectionCode:<script type="text/javascript" src="/javascript/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//Show Banner
$(".main_image .desc").show(); //Show Banner
$(".main_image .block").animate({ opacity: 0.85 }, 1 ); //Set Opacity
//Click and Hover events for thumbnail list
$(".image_thumb ul li:first").addClass('active');
$(".image_thumb ul li").click(function(){
//Set Variables
var imgAlt = $(this).find('img').attr("alt"); //Get Alt Tag of Image
var imgTitle = $(this).find('a').attr("href"); //Get Main Image URL
var imgDesc = $(this).find('.block').html(); //Get HTML of block
var imgDescHeight = $(".main_image").find('.block').height(); //Calculate height of block
if ($(this).is(".active")) { //If it's already active, then...
return false; // Don't click through
} else {
//Animate the Teaser
$(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() {
$(".main_image .block").html(imgDesc).animate({ opacity: 0.85, marginBottom: "0" }, 250 );
$(".main_image img").attr({ src: imgTitle , alt: imgAlt});
});
}
$(".image_thumb ul li").removeClass('active'); //Remove class of 'active' on all lists
$(this).addClass('active'); //add class of 'active' on this list only
return false;
}) .hover(function(){
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
//Toggle Teaser
$("a.collapse").click(function(){
$(".main_image .block").slideToggle();
$("a.collapse").toggleClass("show");
});
});//Close Function
</script>
HTML
Code:<div id="main" class="container">
<div class="main_image">
<img src="banner5.jpg" alt="Puzzled Putter">
<div style="display: block;" class="desc">
<a href="#" class="collapse">Close Me!</a>
<div style="opacity: 0.85; margin-bottom: 0px; display: block;" class="block">
<h2>Puzzled Putter</h2>
<small>04/14/09</small>
<p>Autem
conventio nimis quis ad, nisl secundum sed, facilisi, vicis augue
regula, ratis, autem. Neo nostrud letatio aliquam validus eum quadrum,
volutpat et. <br><a href="http://store.glennz.com/puzzledputter.html" target="_blank">Artwork By Glenn Jones</a></p>
</div>
</div>
</div>
<div class="image_thumb">
<ul>
<li class="">
<a href="http://www.sohtanaka.com/web-design/examples/image-rotator/banner1.jpg"><img src="banner1_thumb.jpg" alt="Slowing Dow"></a>
<div class="block">
<h2>Slowing Down</h2>
<small>04/10/09</small>
<p>Autem
conventio nimis quis ad, nisl secundum sed, facilisi, vicis augue
regula, ratis, autem. Neo nostrud letatio aliquam validus eum quadrum,
volutpat et.<br><a href="http://store.glennz.com/slowingdown.html" target="_blank">Artwork By Glenn Jones</a> </p>
</div>
</li>
<li class="">
<a href="http://www.sohtanaka.com/web-design/examples/image-rotator/banner2.jpg"><img src="banner2_thumb.jpg" alt="Organized Food Fight"></a>
<div class="block">
<h2>Organized Food Fight</h2>
<small>04/11/09</small>
<p>Autem
conventio nimis quis ad, nisl secundum sed, facilisi, vicis augue
regula, ratis, autem. Neo nostrud letatio aliquam validus eum quadrum,
volutpat et. Autem conventio nimis quis ad, nisl secundum sed,
facilisi, vicis augue regula, ratis, autem. Neo nostrud letatio aliquam
validus eum quadrum, volutpat et.</p>
<p>Autem conventio nimis
quis ad, nisl secundum sed, facilisi, vicis augue regula, ratis, autem.
Neo nostrud letatio aliquam validus eum quadrum, volutpat et.<br><a href="http://store.glennz.com/orfofi.html" target="_blank">Artwork By Glenn Jones</a></p>
</div>
</li>
<li class="">
<a href="http://www.sohtanaka.com/web-design/examples/image-rotator/banner3.jpg"><img src="banner3_thumb.jpg" alt="Endangered Species"></a>
<div class="block">
<h2>Endangered Species</h2>
<small>04/12/09</small>
<p>Autem
conventio nimis quis ad, nisl secundum sed, facilisi, vicis augue
regula, ratis, autem. Neo nostrud letatio aliquam validus eum quadrum,
volutpat et.<br><a href="http://store.glennz.com/ensp.html" target="_blank">Artwork By Glenn Jones</a></p>
</div>
</li>
<li class="">
<a href="http://www.sohtanaka.com/web-design/examples/image-rotator/banner4.jpg"><img src="banner4_thumb.jpg" alt="Evolution"></a>
<div class="block">
<h2>Evolution</h2>
<small>04/13/09</small>
<p>Autem
conventio nimis quis ad, nisl secundum sed, facilisi, vicis augue
regula, ratis, autem. Neo nostrud letatio aliquam validus eum quadrum,
volutpat et. Autem conventio nimis quis ad, nisl secundum sed,
facilisi, vicis augue regula, ratis, autem. Neo nostrud letatio aliquam
validus eum quadrum, volutpat et.<br><a href="http://store.glennz.com/evolution.html" target="_blank">Artwork By Glenn Jones</a></p>
</div>
</li>
<li class="active hover">
<a href="http://www.sohtanaka.com/web-design/examples/image-rotator/banner5.jpg"><img src="banner5_thumb.jpg" alt="Puzzled Putter"></a>
<div class="block">
<h2>Puzzled Putter</h2>
<small>04/14/09</small>
<p>Autem
conventio nimis quis ad, nisl secundum sed, facilisi, vicis augue
regula, ratis, autem. Neo nostrud letatio aliquam validus eum quadrum,
volutpat et. <br><a href="http://store.glennz.com/puzzledputter.html" target="_blank">Artwork By Glenn Jones</a></p>
</div>
</li>
<li class="">
<a href="http://www.sohtanaka.com/web-design/examples/image-rotator/banner6.jpg"><img src="banner6_thumb.jpg" alt="Secret Habit"></a>
<div class="block">
<h2>Secret Habit</h2>
<small>04/15/09</small>
<p>Autem conventio nimis quis ad, nisl secundum sed, facilisi, vicis augue regula, ratis, autem.<br><a href="http://store.glennz.com/secrethabit1.html" target="_blank">Artwork By Glenn Jones</a></p>
</div>
</li>
</ul>
</div>
</div>
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
Step 2: Place HTML below in your BODY sectionCode:<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>
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>
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
How to setup
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: Copy & Paste JavaScript code below in your HEAD section
JavaScript
Step 2: Place HTML below in your BODY sectionCode:<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>
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>