Computer Forums - JavaScript codes for Web DEV

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)

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

http://www.javascriptbank.com/javasc...mat-script.jpg
Demo: JavaScript Currency Format script

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

        -->

AJAX news ticker - JavaScript Refresh Page - JavaScript Unclosable Window

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

http://www.javascriptbank.com/javasc...omtooltips.jpg
Demo: JavaScript Rich Content JavaScript DOMTooltips

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

Javascript floating message - Javascript multi level drop down menu - JavaScript in_array()

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

http://www.javascriptbank.com/javasc...-framework.jpg
Demo: JavaScript 10 Tiptop Animations with JavaScript Framework

How to setup

JavaScript Make link open in new tab/window - JavaScript World clock - circumference calculator

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

http://www.javascriptbank.com/javasc...mer-in-oop.jpg
Demo: JavaScript Make a JavaScript Countdown Timer in OOP

How to setup

JavaScript Enlarge Image - JavaScript Fading Slide Show - JavaScript Rotating Image script

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

http://www.javascriptbank.com/javasc...wn-timer-2.jpg
Demo: JavaScript Countdown Timer 2

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

        -->

JavaScript Bookmark Page script - JavaScript Color Wheel - JavaScript Image slideshow

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

http://www.javascriptbank.com/javasc...l-the-time.jpg
Demo: JavaScript JavaScript Word Clock: Spell the Time

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>

Javascript Music Player - Random Text Generator - Floating Image Script

Create Topic Selectors like Digg Style

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

http://www.javascriptbank.com/javasc...ips-tricks.jpg
Demo: JavaScript 5 Good and Small JavaScript Tips and Tricks

How to setup

Javascript floating message - Javascript multi level drop down menu - JavaScript in_array()

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

http://www.javascriptbank.com/javasc...pt-effects.jpg
Demo: JavaScript 30+ Super High Cool Sites with Amazing JavaScript effects

How to setup

Command to print web page in javascript - Javascript Time Picker - JavaScript Go To URL Box

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

http://www.javascriptbank.com/javasc...g-mootools.jpg
Demo: JavaScript JavaScript DHTML Dock Carousel Using Mootools

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

Javascript Music Player - Random Text Generator - Floating Image Script