Go Back   Themers Club : Computers , Mobiles and Web Development Themes > Webmaster forum > Scripts and Tools

Scripts and Tools Share your free scripts , tools , icons, fontz, screen savers , etc here.

Reply
 
Thread Tools Display Modes
  #121  
Old 11-10-2010, 01:32 AM
JavaScriptBank JavaScriptBank is offline
Senior Member
 
Join Date: Jul 2009
Posts: 207
Rep Power: 18
JavaScriptBank is on a distinguished road
Default Amazing Bounce Effect using jQuery framework

JavaScript bounce effect is the type of script presented on [Only Registered users can see links . Click Here To Register...] through many plained-JavaScript example codes, such as:

- [url="http://www.javascriptbank.com/elastic-trail-script.html"]J... [Only Registered users can see links . Click Here To Register...] at [Only Registered users can see links . Click Here To Register...]


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: Use JavaScript code below to setup the script
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!"/>





Reply With Quote
  #122  
Old 11-10-2010, 02:05 AM
JavaScriptBank JavaScriptBank is offline
Senior Member
 
Join Date: Jul 2009
Posts: 207
Rep Power: 18
JavaScriptBank is on a distinguished road
Default 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... [Only Registered users can see links . Click Here To Register...] at [Only Registered users can see links . Click Here To Register...]


How to setup






Reply With Quote
  #126  
Old 11-18-2010, 03:13 AM
JavaScriptBank JavaScriptBank is offline
Senior Member
 
Join Date: Jul 2009
Posts: 207
Rep Power: 18
JavaScriptBank is on a distinguished road
Default Smash a Smiley 1.2

Similar to the free JavaScript game [Only Registered users can see links . Click Here To Register...], this JavaScript game is simpler by change the picture of gophers into the ... [Only Registered users can see links . Click Here To Register...] at [Only Registered users can see links . Click Here To Register...]


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>





Reply With Quote
  #129  
Old 12-02-2010, 06:24 AM
JavaScriptBank JavaScriptBank is offline
Senior Member
 
Join Date: Jul 2009
Posts: 207
Rep Power: 18
JavaScriptBank is on a distinguished road
Default Marking your Sheet Music Notation with JavaScript

One more wonderful [Only Registered users can see links . Click Here To Register...] created by JavaScript developers, web developers. That is [url="http://www.javascriptbank.com/tag=sheet music notation"]sheet music no... [Only Registered users can see links . Click Here To Register...] at [Only Registered users can see links . Click Here To Register...]


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: Use JavaScript code below to setup the script
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
[Only Registered users can see links . Click Here To Register...]
[Only Registered users can see links . Click Here To Register...]
[Only Registered users can see links . Click Here To Register...]
[Only Registered users can see links . Click Here To Register...]
[Only Registered users can see links . Click Here To Register...]






Reply With Quote
  #130  
Old 12-17-2010, 03:16 AM
JavaScriptBank JavaScriptBank is offline
Senior Member
 
Join Date: Jul 2009
Posts: 207
Rep Power: 18
JavaScriptBank is on a distinguished road
Default 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... [Only Registered users can see links . Click Here To Register...] at [Only Registered users can see links . Click Here To Register...]


How to setup






Reply With Quote
Reply

Bookmarks


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT. The time now is 11:50 AM.


Powered by vBulletin® Version 3.7.6
Copyright ©2000 - 2026, Jelsoft Enterprises Ltd.