Computer Forums
Page 2 of 4 1 2 34
Show 40 post(s) from this thread on one page

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)

JavaScriptBank 09-15-2010 03:26 AM
Simply Button v2: Super Cool-Sexy Button for Your Website
 
Let's use this simple JavaScript example code, CSS button code to replace the boring default button of browsers by <i>Simp... detail at JavaScriptBank.com - 2.000+ free JavaScript codes


How to setup

Step 1: Download files below
Files
Simply_Button_v2.javascriptbank.com.zip

JavaScriptBank 09-16-2010 11:37 AM
Top 50 Most Addictive and Popuplar Facebook mini games
 
At this time of post, I'm sure that almost people in this world know what's Facebook. And I believe that every one of us ever once enters Facebook to see its content, to know why it becomes popuplar l... detail at JavaScriptBank.com - 2.000+ free JavaScript codes


How to setup

JavaScriptBank 09-21-2010 12:17 PM
Best of Free Contact Form Services and Generators for Easiest usages
 
If you have a website whether fashion, educational business or entertainment related, then you must have an email contact form page which is a customary on every web... detail at JavaScriptBank.com - 2.000+ free JavaScript codes


How to setup

JavaScriptBank 09-23-2010 01:51 PM
Top 10 Excellent & Free Online Poll Makers
 
With a little of programming skills, we can easy make an online poll creator quickly. However, it takes a lot of time if we like to make our own polls become more a... detail at JavaScriptBank.com - 2.000+ free JavaScript codes


How to setup

JavaScriptBank 09-26-2010 08:38 PM
Mega Collection of Cheat Sheets with HTML, CSS, PHP, Javascript
 
Cheat sheets are really helpful in revising your application codes as there are so many functions, constants, classes ... which we cannot remember always but good cheat sheets are of great help in kee... detail at JavaScriptBank.com - 2.000+ free JavaScript codes


How to setup

JavaScriptBank 09-27-2010 08:32 PM
More 100 Super Helpful Cheatsheets for Web Designers Web Developers
 
In the previous HTML JavaScript tutorial, you recently read Mega Collection of Cheat Sheets with HTML, CSS, PHP, Javascript; no... detail at JavaScriptBank.com - 2.000+ free JavaScript codes


How to setup

JavaScriptBank 10-05-2010 06:24 AM
10 Great JavaScript Plugins and Resources for CSS TreeView and Sitemap
 
HTML JavaScript TreeView and JavaScript Sitemap are good tools to display the structure of your website, are better solutions to organize your huge indexes.... detail at JavaScriptBank.com - 2.000+ free JavaScript codes


How to setup

JavaScriptBank 10-05-2010 07:02 AM
Some Basic JavaScript Guidelines for Accessibility
 
Do not let everyone receive JavaScript in the way intended, that is the basic nature of the Internet. Therefore, we should have JavaScript applied in a way that enhances your page performance, rather ... detail at JavaScriptBank.com - 2.000+ free JavaScript codes


How to setup

JavaScriptBank 10-05-2010 07:41 AM
Selecting JavaScript HTML Elements Faster with jQuery
 
There are some simple JavaScript example codes in this free HTML JavaScript tutorial that guide you select the JavaScript HTML elements, detail at JavaScriptBank.com - 2.000+ free JavaScript codes


How to setup

JavaScriptBank 10-11-2010 09:42 PM
Efficient and Helpful JavaScript/jQuery Tips and Tricks
 
This free HTML JavaScript tutorial provides 45+ JavaScript/jQuery tips and tricks that help you work in JavaScript tasks better, through live HTML JavaScript example codes. List of some detail at JavaScriptBank.com - 2.000+ free JavaScript codes


How to setup

JavaScriptBank 10-11-2010 10:22 PM
JavaScript Error Codes in Internet Explorer 8
 
This free JavaScript tutorial lists all JavaScript Error Codes. By understanding the JavaScript Error Codes, you can pinpoint what's wrong with your web page or your JavaScript application. Then you h... detail at JavaScriptBank.com - 2.000+ free JavaScript codes


How to setup

JavaScriptBank 10-21-2010 12:05 AM
JavaScript OOP Tutorial for Dummies
 
In this free HTML JavaScript tutorial, the dummies will have some simple, short concepts about JavaScript OOP programming, OOP in JavaScript such as: how to define a [URL="http://www.javascriptbank.com/tag=JavaScript class"]Ja... detail at JavaScriptBank.com - 2.000+ free JavaScript codes


How to setup

JavaScriptBank 10-21-2010 12:51 AM
Passing Result from PHP to JavaScript with AJAX & jQuery
 
This free HTML JavaScript tutorial guides you how to use AJAX and the JavaScript framework jQuery to pass the return data from detail at JavaScriptBank.com - 2.000+ free JavaScript codes


How to setup

JavaScriptBank 10-21-2010 12:02 PM
Popular Built-in JavaScript Functions
 
In this free HTMl JavaScript tutorial, I'll list all of the built-in JavaScript functions available to you. While not everything will be covered, I will cover [URL="http://www.javascriptbank.com/tag=function in JavaScript"]fun... detail at JavaScriptBank.com - 2.000+ free JavaScript codes


How to setup

JavaScriptBank 10-26-2010 10:03 PM
Collection of Amazing Sorting Table JavaScript using Prototype
 
With the support of the powerful JavaScript framework - Prototype; JavaScript developers/coders created many sorting table JavaScript example codes, usin... detail at JavaScriptBank.com - 2.000+ free JavaScript codes


How to setup

JavaScriptBank 10-26-2010 10:47 PM
Web CSS Content Switcher Without JavaScript
 
Without JavaScript, we can still switch web content with CSS. It's so incredible but it's so true, just click into this free HTML example code, for testing it by yourself, to find how to make <a href=... detail at JavaScriptBank.com - 2.000+ free JavaScript codes


How to setup

Step 1: Copy & Paste CSS code below in your HEAD section
CSS
Code:
<style type="text/css">
* {
        margin: 0;
        padding: 0;
}

img {
        border: none;
}

h1 {
        line-height: 1em;
        font-family: "Times New Roman", Times, serif;
        color: #666;
        font-style: italic;
        text-align: center;
        padding: 30px 0 0 0;
}

h2 {
        font-family: Arial, Helvetica, sans-serif;
        margin: 0 0 8px 0;
}

h3 {
        font-family: Arial, Helvetica, sans-serif;
        margin: 0;
        padding: 0;
}

p {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 20px;
        line-height: 1.5em;
        margin: 0 0 14px 0;
        padding: 30px 0 0 0;
        clear: both;
        text-align: center;
        color: #666;
}

#content-slider {
        width: 650px;
        overflow: hidden;
        height: 300px;
        margin: 30px 0 0 0;
        border: solid 1px #666;
}

#content-slider-inside {
        list-style: none;
        height: 320px;
        overflow: scroll;
        overflow-y: hidden;
}

        #content-slider-inside li {
                width: 650px;
                background: #ccc;
                height: 300px;
                color: #666;
                font-size: 200px;
                font-family: "Times New Roman", Times, serif;
                font-style: italic;
                text-align: center;
                line-height: 300px;
        }
       
#navigation {
        list-style: none;
        margin: 20px 0 0 0;
        float: right;
}

#navigation li {
        float: left;
        width: 30px;
        height: 30px;
        text-align: center;
        margin: 0;
        border: solid 1px #ccc;
        line-height: 30px;
        font-family: Arial, Helvetica, sans-serif;
        margin: 0 0 0 5px;
}

#navigation li a, #navigation li a:link, #navigation li a:visited {
        text-decoration: none;
        display: block;
        height: 30px;
        color: #666;
}

#navigation li a.selected, #navigation li a.selected:link, #navigation li a.selected:visited {
        background: #666;
        color: #fff;
}

#navigation li a:hover, #navigation li a:focus, #navigation li a:active {
        background: #666;
        color: #fff;
}
</style>
Step 2: Place HTML below in your BODY section
HTML
Code:
<div style="margin: 0pt auto; width: 650px;">

<h1>A JavaScript Content Switcher That Works Without JavaScript</h1>

        <div id="content-slider">
                <ul id="content-slider-inside">
                        <li id="one">1</li>
                        <li id="two">2</li>
                        <li id="three">3</li>

                        <li id="four">4</li>
                        <li id="five">5</li>
                </ul>
        </div>
       
        <ul id="navigation">
                <li><a href="#one">1</a></li>
                <li><a href="#two">2</a></li>

                <li><a href="#three">3</a></li>
                <li><a href="#four">4</a></li>
                <li><a href="#five">5</a></li>
        </ul>

<p>This page has no JavaScript, but the content switcher above is fully functional, and even allows deep linking.</p>

<p>JavaScript can now be added as an enhancement to make the content slide, fade, or animate.</p>

<p><a href="http://www.javascriptbank.com/how-create-web-css-content-switcher-without-javascript.html">View the same page with JavaScript/jQuery enhancing it.</a></p>

<p><a href="http://www.javascriptbank.com/how-create-web-css-content-switcher-without-javascript.html">&lt; Go back to the tutorial</a></p>

</div>

JavaScriptBank 11-01-2010 11:37 PM
dygraphs: Open Source JavaScript Graph Visualization Library
 
dygraphs is an open source JavaScript library that produces produces interactive, zoomable charts of time series. It is designed to display dense data sets ... detail at JavaScriptBank.com - 2.000+ free JavaScript codes


How to setup

JavaScriptBank 11-02-2010 12:53 AM
More 10 jQuery and JavaScript Tips and Tricks to Improve Your Code
 
Keep going on Efficient and Helpful JavaScript/jQuery Tips and Tricks, this free [URL="http://www.javascriptbank.com/tag=HTML JavaScript tutorial"]HTML JavaSc... detail at JavaScriptBank.com - 2.000+ free JavaScript codes


How to setup

JavaScriptBank 11-02-2010 01:34 AM
3 Simple Ways to Define a JavaScript class
 
This free HTML JavaScript tutorial guides you how to setup, define a JavaScript class through 3 simple ways. Please try them in the detailed post, or read more HTML JavaScript tutorial about OOP JavaS... detail at JavaScriptBank.com - 2.000+ free JavaScript codes


How to setup

JavaScriptBank 11-09-2010 08:06 PM
How to load JavaScript like a WordPress Master
 
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


How to setup

JavaScriptBank 11-09-2010 08:40 PM
Amazing Bounce Effect using jQuery framework
 
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


How to setup

Step 1: Place CSS 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: Copy & Paste HTML code 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!"/>

JavaScriptBank 11-09-2010 09:12 PM
Encapsulation in OOP JavaScript
 
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


How to setup

JavaScriptBank 11-09-2010 09:48 PM
45 Great Helpful JavaScript and jQuery Techniques and Tools
 
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


How to setup

JavaScriptBank 11-17-2010 09:15 PM
Training Lexical Structure and Statements
 
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


How to setup

JavaScriptBank 11-17-2010 09:47 PM
65 Free JavaScript Photo Gallery Solutions
 
JavaScript photo gallery, JavaScript image gallery and web photo gallery ar... detail at JavaScriptBank.com - 2.000+ free JavaScript codes


How to setup

JavaScriptBank 11-17-2010 10:20 PM
Smash a Smiley 1.2
 
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


How to setup

Step 1: Place JavaScript below in your HEAD section
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>

JavaScriptBank 11-17-2010 10:56 PM
Strip HTML tags in Rails, JavaScript and PHP
 
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


How to setup

JavaScriptBank 12-02-2010 12:58 AM
A Basic AJAX Demo Application Using PHP And JavaScript
 
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


How to setup

JavaScriptBank 12-02-2010 01:32 AM
Marking your Sheet Music Notation with JavaScript
 
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


How to setup

Step 1: CSS below for styling thescript, place it into HEAD section
CSS
Code:
<style type="text/css">
                        canvas{
                                display:block;
                                border:1px solid #000;
                                width:100%;
                                height:300px;
                        }
                </style>
Step 2: Copy & Paste JavaScript code 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

JavaScriptBank 12-16-2010 10:24 PM
Automating Tasks with Windows Script Host and JScript JavaScript
 
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


How to setup

JavaScriptBank 12-31-2010 12:24 AM
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


How to setup

JavaScriptBank 01-06-2011 09:15 PM
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


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>

JavaScriptBank 01-13-2011 08:24 AM
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


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>

JavaScriptBank 01-13-2011 09:04 AM
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


How to setup

JavaScriptBank 01-13-2011 09:33 AM
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


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>

JavaScriptBank 01-19-2011 11:46 PM
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


How to setup

JavaScriptBank 01-20-2011 12:28 AM
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


How to setup

JavaScriptBank 01-20-2011 10:29 AM
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


How to setup

JavaScriptBank 01-20-2011 11:22 AM
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


How to setup

JavaScriptBank 01-28-2011 10:41 AM
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


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>


All times are GMT -5. The time now is 02:13 PM.
Page 2 of 4 1 2 34
Show 40 post(s) from this thread on one page

Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2025, Jelsoft Enterprises Ltd.
HTML Help provided by HTML Help Central.