|
|
 |
|
06-17-2010, 10:04 AM
|
|
Senior Member
GB Guru
|
|
Join Date: Sep 2009
Posts: 180
|
|
Currency Format script
This JavaScript accepts a number or string and formats it like U.S. currency. Adds the dollar sign, rounds to two places past the decimal, adds place holding zeros, and comm... 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">
// Cyanide_7 (leo7278@hotmail.com) | http://www7.ewebcity.com/cyanide7
<!-- Begin
function formatCurrency(num) {
num = num.toString().replace(/\$|\,/g,'');
if(isNaN(num))
num = "0";
sign = (num == (num = Math.abs(num)));
num = Math.floor(num*100+0.50000000001);
cents = num%100;
num = Math.floor(num/100).toString();
if(cents<10)
cents = "0" + cents;
for (var i = 0; i < Math.floor((num.length-(1+i))/3); i++)
num = num.substring(0,num.length-(4*i+3))+','+
num.substring(num.length-(4*i+3));
return (((sign)?'':'-') + '$' + num + '.' + cents);
}
// End -->
</script>
<!--
This script downloaded from www.JavaScriptBank.com
Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
-->
Step 2: Place HTML below in your BODY section
HTML
Code:
<form name=currencyform>
Enter a number then click the button: <input type=text name=input size=10 value="1000434.23">
<input type=button value="Convert" onclick="this.form.input.value=formatCurrency(this.form.input.value);">
<br><br>
or enter a number and click another field: <input type=text name=input2 size=10 value="1000434.23" onBlur="this.value=formatCurrency(this.value);">
</form>
<!--
This script downloaded from www.JavaScriptBank.com
Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
-->
|
06-18-2010, 08:26 PM
|
|
Senior Member
GB Guru
|
|
Join Date: Sep 2009
Posts: 180
|
|
Rich Content JavaScript DOMTooltips
Are you looking for a JavaScript tooltip which can make your additional content become more beautiful when the mouse is over it, for your anchors? Then this is a JavaScript you should try, <b>DOMToolt... detail at JavaScriptBank.com - 2.000+ free JavaScript codes
How to setup
Step 1: Place HTML below in your BODY section
HTML
Code:
<link rel="stylesheet" href="domtooltips.css" type="text/css" />
<script src="domtooltips.js" type="text/javascript"></script>
<p>Domtooltips is created by <a href="http://rubensargsyan.com/" target="_blank"><span class="domtooltips" title="Ruben Sargsyan is a web developer from Yerevan, Armenia.">Ruben Sargsyan</span></a>.</p>
<p><span class="domtooltips" title="This is the logo of Ruben Sargsyan's personal website."><img src="logo.jpg" width="190" height="160" alt="Logo"></span></p>
<script type="text/javascript"> load_domtooltips(); </script>
Step 2: downloads
Files
domtooltips.css
domtooltips.js
|
06-20-2010, 09:54 PM
|
|
Senior Member
GB Guru
|
|
Join Date: Sep 2009
Posts: 180
|
|
10 Tiptop Animations with JavaScript Framework
The JavaScript-based movement effects, animations, in your Web applications, will become more eye-catching, smoothing and beautiful when they use the powerful JavaScript frameworks to manage and proce... detail at JavaScriptBank.com - 2.000+ free JavaScript codes
How to setup
|
06-25-2010, 07:06 AM
|
|
Senior Member
GB Guru
|
|
Join Date: Sep 2009
Posts: 180
|
|
Make a JavaScript Countdown Timer in OOP
JavaScript Countdown Timer is the type of JavaScript code presented on JavaScriptBank.com; and you can find many good scripts as you want; but this JavaScript countdown timer is new on... detail at JavaScriptBank.com - 2.000+ free JavaScript codes
How to setup
|
06-28-2010, 09:49 PM
|
|
Senior Member
GB Guru
|
|
Join Date: Sep 2009
Posts: 180
|
|
Countdown Timer 2
This countdown script prints directly to the page, displaying the time left in minutes and seconds. The time duration can be set in the ... 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>
.timeClass {
font-family:arial,verdana,helvetica,sans-serif;
font-weight:normal;
font-size:10pt;
}
</style>
<!--
This script downloaded from www.JavaScriptBank.com
Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
-->
Step 2: Use JavaScript code below to setup the script
JavaScript
Code:
<script>
/*
Created by: Sandeep Gangadharan
Web Site: http://www.sivamdesign.com/
*/
var sec = 30; // set the seconds
var min = 02; // set the minutes
function countDown() {
sec--;
if (sec == -01) {
sec = 59;
min = min - 1;
} else {
min = min;
}
if (sec<=9) { sec = "0" + sec; }
time = (min<=9 ? "0" + min : min) + " min and " + sec + " sec ";
if (document.getElementById) { theTime.innerHTML = time; }
SD=window.setTimeout("countDown();", 1000);
if (min == '00' && sec == '00') { sec = "00"; window.clearTimeout(SD); }
}
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() {
countDown();
});
</script>
<!--
This script downloaded from www.JavaScriptBank.com
Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
-->
Step 3: Place HTML below in your BODY section
HTML
Code:
<span id="theTime" class="timeClass"></span>
<!--
This script downloaded from www.JavaScriptBank.com
Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
-->
|
07-01-2010, 09:37 PM
|
|
Senior Member
GB Guru
|
|
Join Date: Sep 2009
Posts: 180
|
|
JavaScript Word Clock: Spell the Time
This is most excellent JavaScript clock on the web page I ever see, although this is 5 minutes interval JavaScript clock but it has a very nice design and very unique performance: writing the time in ... 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>
body {
background-color: #111;
}
div#clock {
font-size: 50px;
font-family: monospace;
color: #222;
text-align: center;
}
.lightup {
color: #EEE;
}
.seclightup {
color: #EEE;
}
.gumuz {
color: #333;
}
</style>
Step 2: Copy & Paste JavaScript code below in your HEAD section
JavaScript
Code:
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2");
google.setOnLoadCallback(function() {
function render_time(classes) {
// reset
$('span').removeClass('lightup');
//toggle_sec();
for (var i in classes) {
$(classes[i]).addClass('lightup');
}
}
function toggle_sec() {
if ($('.sec').hasClass('seclightup')) {
$('.sec').removeClass('seclightup')
} else {
$('.sec').addClass('seclightup')
}
}
function check_time() {
var classes = ['.it_is']
toggle_sec();
var date = new Date();
var hours = date.getHours()%12;
if (hours==0) hours = 12;
var minutes = date.getMinutes()-(date.getMinutes()%5);
if (date.getMinutes()%5 > 2) minutes = minutes + 5;
if (minutes == 60) { minutes = 0; hours = hours+1;}
// stupid switch logic...
if (minutes == 0) {
// o'clock!
classes.push('.'+hours);
classes.push('.oclock');
} else if (minutes == 30) {
// half past
classes.push('.'+hours);
classes.push('.half');
classes.push('.past');
} else if (minutes == 15) {
// quarter past
classes.push('.'+hours);
classes.push('.past');
classes.push('.quarter');
} else if (minutes == 45) {
// quarter to
if (hours==12) hours = 0;
classes.push('.'+(hours+1));
classes.push('.quarter');
classes.push('.to');
} else if (minutes < 30) {
// X past
classes.push('.'+hours);
classes.push('.'+minutes+'to');
classes.push('.past');
classes.push('.minutes');
} else if (minutes > 30) {
// X to
if (hours==12) hours = 0;
classes.push('.'+(hours+1));
classes.push('.'+(60-minutes)+'to');
classes.push('.to');
classes.push('.minutes');
}
render_time(classes);
}
setInterval(check_time, 1000);
});
</script>
Step 3: Copy & Paste HTML code below in your BODY section
HTML
Code:
<div id="clock">
<span class="it_is lightup">it</span>r<span class="it_is lightup">is</span>u<span class="half">half</span><span class="10to 10past">ten</span><br>
<span class="quarter">quarter</span><span class="20to 25to lightup">twenty</span><br>
<span class="25to 5to">five</span>q<span class="minutes lightup">minutes</span>t<br>
<span class="past lightup">past</span>gumuz<span class="to">to</span>ne<br>
<span class="1">one</span>n<span class="2">two</span>z<span class="3">three</span><br>
<span class="4">four</span><span class="5">five</span><span class="7">seven</span><br>
<span class="6">six</span><span class="8 lightup">eight</span>y<span class="9">nine</span><br>
<span class="10">ten</span><span class="11">eleven</span><span class="sec">♥</span>sec<br>
<span class="12">twelve</span><span class="oclock">o'clock</span><br>
</div>
|
07-06-2010, 08:29 PM
|
|
Senior Member
GB Guru
|
|
Join Date: Sep 2009
Posts: 180
|
|
5 Good and Small JavaScript Tips and Tricks
If you are a professional programmer or senior coder to one or many programming languages, certainly we will always have some little tips and tricks to solve the some problems better, and the web Java... detail at JavaScriptBank.com - 2.000+ free JavaScript codes
How to setup
|
07-12-2010, 12:26 AM
|
|
Senior Member
GB Guru
|
|
Join Date: Sep 2009
Posts: 180
|
|
30+ Super High Cool Sites with Amazing JavaScript effects
This JavaScript article shows you a list of 30 super high cool websites have great amazing JavaScript effects. These websites have an unique layout, along with a clever combination of awesome JavaScri... detail at JavaScriptBank.com - 2.000+ free JavaScript codes
How to setup
|
07-13-2010, 08:36 PM
|
|
Senior Member
GB Guru
|
|
Join Date: Sep 2009
Posts: 180
|
|
JavaScript DHTML Dock Carousel Using Mootools
This is an awesome navigation menu with an unique and eye-catching design, operated by the famous JavaScript framework, ... detail at JavaScriptBank.com - 2.000+ free JavaScript codes
How to setup
Step 1: Place CSS below in your HEAD section
CSS
Code:
<link rel='stylesheet' href='slider.css' type='text/css' />
Step 2: Use JavaScript code below to setup the script
JavaScript
Code:
<script src="mootools-12-core.js" type="text/javascript"></script>
<script src="mootools-12-more.js" type="text/javascript"></script>
<script src="dock.js" type="text/javascript"></script>
Step 3: Copy & Paste HTML code below in your BODY section
HTML
Code:
<div id="stage-container">
<p class="text">
<img src="text.gif" alt="image" width="111" height="24" />
</p> <br clear="all"/>
<a href="#" id="moveleft">Left</a>
<a href="#" id="moveright">Right</a>
<div id="wrapper">
<ul id="items">
<li><a><img class="icon" src="1.png" alt="image" width="32" height="32" /></a></li>
<li><a><img class="icon" src="2.png" alt="image" width="32" height="32" /></a></li>
<li><a><img class="icon" src="3.png" alt="image" width="32" height="32" /></a></li>
<li><a><img class="icon" src="4.png" alt="image" width="32" height="32" /></a></li>
<li><a><img class="icon" src="5.png" alt="image" width="32" height="32" /></a></li>
<li><a><img class="icon" src="10.png" alt="image" width="32" height="32" /></a></li>
<li><a><img class="icon" src="6.png" alt="image" width="32" height="32" /></a></li>
<li><a><img class="icon" src="7.png" alt="image" width="32" height="32" /></a></li>
<li><a><img class="icon" src="8.png" alt="image" width="32" height="32" /></a></li>
<li><a><img class="icon" src="9.png" alt="image" width="32" height="32" /></a></li>
</ul>
</div>
</div>
Step 4: downloads
Files
1.png
10.png
2.png
3.png
4.png
5.png
6.png
7.png
8.png
9.png
dock.js
left.gif
mootools-12-core.js
mootools-12-more.js
right.gif
slider.css
stage2.jpg
text.gif
|
|
|
Posting Rules
|
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
HTML code is Off
|
|
|
|
Linear Mode
