Computer Forums
Page 7 of 14 « First 56 7 89 Last »
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 11-09-2010 07: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 08: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 08: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 08: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 08: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 09: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 09: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-01-2010 11:58 PM
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 12: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 09: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


All times are GMT -5. The time now is 06:48 AM.
Page 7 of 14 « First 56 7 89 Last »
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.