JavaScript library

World clock script with unusual design. Cross-browser (IE4 contains additional visual effects). World [URL="http://www.javascriptbank.com/javascript/time/clock-time-date/"]clock<... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

http://www.javascriptbank.com/javasc...ue-display.jpg
Demo: JavaScript World clock with unique display

How to setup

Step 1: Place CSS below in your HEAD section
CSS

Code:

---

<STYLE>
.topcoverlay {
        BACKGROUND-COLOR: #ffffff; FILTER: alpha(opacity=85); HEIGHT: 240px; LEFT: 0px; POSITION: absolute; TOP: 0px; WIDTH: 1000px
}
.bottomcoverlay {
        BACKGROUND-COLOR: #ffffff; FILTER: alpha(opacity=85); HEIGHT: 1000px; LEFT: 0px; POSITION: absolute; TOP: 253px; WIDTH: 1000px
}
</STYLE>
        <!--
            This script downloaded from www.JavaScriptBank.com
            Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
        -->

---

Step 2: Copy & Paste JavaScript code below in your HEAD section
JavaScript

Code:

---

<SCRIPT language=JavaScript>
<!-- Beginning of JavaScript -


var startpos=240
var bildhoehe=720
var step=3
var makepause=200
var difference=0
var local=1
var timer

function showtimelocal() {
        if (local==1) {
                var  thistime= new Date()
                var seconds=thistime.getSeconds()
                var minutes=thistime.getMinutes()
                var hours=thistime.getHours()
                if (hours>=24) {hours=hours-24}
                var secondspos=Math.floor(bildhoehe/60*seconds)
                var minutespos=Math.floor(bildhoehe/60*minutes)
                var hourspos=Math.floor(bildhoehe/60*hours)
               
                if(document.all) {
                        document.all.secondsdiv.style.posTop=startpos-secondspos
                        document.all.minutesdiv.style.posTop=startpos-minutespos
                        document.all.hoursdiv.style.posTop=startpos-hourspos
                }
               
                if(document.layers) {
                        document.secondsdiv.top=startpos-secondspos
                        document.minutesdiv.top=startpos-minutespos
                        document.hoursdiv.top=startpos-hourspos
                }
                var timer=setTimeout("showtimelocal()",makepause)
        }
        else {
                clearTimeout(timer)
        }
}

function preUTC(thisdifference) {
        clearTimeout(timer)
        difference=eval(thisdifference)
        local=0
        showtimeUTC()
}

function inititate() {
        if (document.layers) {
                document.markernetscape1.visibility="VISIBLE"
                document.markernetscape2.visibility="VISIBLE"
        }
        showtimelocal()
}

function prelocal() {
        if (document.layers) {document.markernetscape.visibility="VISIBLE"}
        clearTimeout(timer)
        local=1
        showtimelocal()
}

function showtimeUTC() {
        if (local==0) {
                var  thistime= new Date()
                var seconds=thistime.getSeconds()
                var minutes=thistime.getMinutes()
                var hours=thistime.getUTCHours()
                hours+=difference
                if (hours>=24) {hours=hours-24}
                var secondspos=Math.floor(bildhoehe/60*seconds)
                var minutespos=Math.floor(bildhoehe/60*minutes)
                var hourspos=Math.floor(bildhoehe/60*hours)
               
                if(document.all) {
                        document.all.secondsdiv.style.posTop=startpos-secondspos
                        document.all.minutesdiv.style.posTop=startpos-minutespos
                        document.all.hoursdiv.style.posTop=startpos-hourspos
                }
               
                if(document.layers) {
                        document.secondsdiv.top=startpos-secondspos
                        document.minutesdiv.top=startpos-minutespos
                        document.hoursdiv.top=startpos-hourspos
                }
                var timer=setTimeout("showtimeUTC()",makepause)
        }
        else {
                clearTimeout(timer)
        }
}

window.onload=inititate
// - End of JavaScript - -->
</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:

---

<DIV id=secondsdiv style="LEFT: 200px; POSITION: absolute; TOP: 240px">
  <IMG
src="rotaclock2930.gif" width="14" height="720"></DIV>
<DIV id=minutesdiv style="LEFT: 180px; POSITION: absolute">
  <IMG
src="rotaclock2930.gif" width="14" height="720"></DIV>
<DIV id=hoursdiv style="LEFT: 160px; POSITION: absolute; TOP: 240px">
  <IMG
src="rotaclock2930.gif" width="14" height="720"></DIV>
<DIV class=topcoverlay id=topcover></DIV>
<DIV class=bottomcoverlay id=bottomcover></DIV>
<DIV id=limiter1
style="COLOR: #ff0000; FONT-FAMILY: Arial; FONT-SIZE: 8pt; FONT-WEIGHT: bold; LEFT: 176px; POSITION: absolute; TOP: 241px">
        :</DIV>
<DIV id=limiter2
style="COLOR: #ff0000; FONT-FAMILY: Arial; FONT-SIZE: 8pt; FONT-WEIGHT: bold; LEFT: 196px; POSITION: absolute; TOP: 241px">
        :</DIV>
<DIV id=markernetscape1
style="COLOR: #ff0000; FONT-FAMILY: Arial; FONT-SIZE: 12pt; FONT-WEIGHT: bold; LEFT: 122px; POSITION: absolute; TOP: 248px; VISIBILITY: hidden"><IMG
height=1 src="line2930.gif" width=20></DIV>
<DIV id=markernetscape2
style="COLOR: #ff0000; FONT-FAMILY: Arial; FONT-SIZE: 12pt; FONT-WEIGHT: bold; LEFT: 230px; POSITION: absolute; TOP: 248px; VISIBILITY: hidden"><IMG
height=1 src="js 46_files/line2930.gif" width=20></DIV>
<DIV id=timezones
style="COLOR: #ff0000; FONT-FAMILY: Arial; FONT-SIZE: 8pt; LEFT: 10px; POSITION: absolute; TOP: 5px"><A
href="#"
onmouseover=prelocal()>&gt;&gt; local time</A><BR><A
href="#"
onmouseover="preUTC('-8')">Anchorage</A><BR><A
href="#"
onmouseover="preUTC('-11')">Auckland</A><BR><A
href="#"
onmouseover="preUTC('3')">Baghdad</A><BR><A
href="#"
onmouseover="preUTC('8')">Bejing</A><BR><A
href="#"
onmouseover="preUTC('-3')">Buenos Aires</A><BR><A
href="#"
onmouseover="preUTC('-6')">Denver</A><BR><A
href="#"
onmouseover="preUTC('8')">Hongkong</A><BR><A
href="#"
onmouseover="preUTC('-9')">Honolulu</A><BR><A
href="#"
onmouseover="preUTC('8')">Jakarta</A><BR><A
href="#"
onmouseover="preUTC('2')">Johannesburg</A><BR><A
href="#"
onmouseover="preUTC('2')">Kairo</A><BR><A
href="#"
onmouseover="preUTC('-5')">Lima</A><BR><A
href="#"
onmouseover="preUTC('1')">London</A><BR><A
href="#"
onmouseover="preUTC('-7')">Los Angeles</A><BR><A
href="#"
onmouseover="preUTC('4')">Moscow</A><BR><A
href="#"
onmouseover="preUTC('3')">Nairobi</A><BR><A
href="#"
onmouseover="preUTC('-4')">New York</A><BR><A
href="#"
onmouseover="preUTC('2')">Paris</A><BR><A
href="#"
onmouseover="preUTC('-2')">Rio</A><BR><A
href="#"
onmouseover="preUTC('10')">Sydney</A><BR><A
href="#"
onmouseover="preUTC('9')">Tokyo</A><BR></DIV>
        <!--
            This script downloaded from www.JavaScriptBank.com
            Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
        -->

---

Step 4: downloads
Files
rotaclock2930.gif

AJAX news ticker - JavaScript Refresh Page - JavaScript Unclosable Window

This one line script changes the image size and source on your thumbnail picture without reloading the page or using popups.... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

http://www.javascriptbank.com/javasc...ge-image-2.jpg
Demo: JavaScript Enlarge Image 2

How to setup

Step 1: Place HTML below in your BODY section
HTML

Code:

---

<b>Single-click the image to enlarge it; double-click to make it small again.</b><br>

<img src="gif_logojsb2.gif" onclick="this.src='gif_logojsb2.gif';this.height=180;this.width=480" ondblclick="this.src='gif_logojsb2.gif';this.height=60;this.width=150">
        <!--
            This script downloaded from www.JavaScriptBank.com
            Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
        -->

---

JavaScript Vertical Marquee - JavaScript DHTML analog clock - JavaScript Backwards Text

This JavaScript tutorial will show you how to combine RSS, AJAX, and JavaScript to create a real-time RSS ticker.

Thanks to AJAX... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

http://www.javascriptbank.com/javasc...newsticker.jpg
Demo: JavaScript RSS AJAX Newsticker

How to setup

Step 1: Use JavaScript code below to setup the script
JavaScript

Code:

---

<script type="text/javascript" src="rssticker.js"></script>

---

Step 2: Place HTML below in your BODY section
HTML

Code:

---

CNN:
<DIV style="HEIGHT: 100px; border-style: dotted; border-width: 1px; background-color: silver; text-align: left;">
<script type="text/javascript">
//rss_ticker(RSS_id, cachetime, divId, divClass, delay, optionalswitch)
new rss_ticker("CNN", 60, "cnnbox", "cnnclass", 200)

</script>
</DIV>
<br><br><br>
Each ticker on the page can be invoked independently, for example:
<DIV style="HEIGHT: 100px; border-style: dotted; border-width: 1px; background-color: silver; text-align: left;">
<PRE><script type="text/javascript">
//rss_ticker(RSS_id, cachetime, divId, divClass, delay, optionalswitch)
new rss_ticker("CNN", 60, "cnnbox", "cnnclass", 2000)
</script></PRE>

</DIV>

---

Step 3: downloads
Files
rssticker.js

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

Cast an interactive 'spotlight' on the image of your choice using this DHTML script. Move the light about using your mouse. This cool effect works in IE4+, degrading well with the rest.... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

http://www.javascriptbank.com/javasc.../spotlight.jpg
Demo: JavaScript Spotlight

How to setup

Step 1: Copy & Paste CSS code below in your HEAD section
CSS

Code:

---

<style type="text/css">
<!--
body{
background-image : url('none') !important;
}

#content{
background-color : #ffffff;
position : absolute;
top : 0px;
left : 0px;
padding : 10px;
visibility : hidden;
}

#light{
position : absolute;
top : 0px;
left : 0px;
overflow : hidden;
}
//-->
</style>
        <!--
            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:

---

<script type="text/javascript" src="spotlight_part_1.js"></script>
<script type="text/javascript" src="spotlight_part_2.js"></script>
<div style="z-index: 110;"></div>
        <!--
            This script downloaded from www.JavaScriptBank.com
            Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
        -->

---

Step 3: Download files below
Files
spotlight_part_1.js
spotlight_part_2.js

spotlight.gif

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

One of the many cursor codes in our JavaScript library, this one creates dancing stars animating around your pointers mouse. This [URL="http://www.javascriptbank.com/=cursor move"]cur... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

http://www.javascriptbank.com/javasc...ars-cursor.jpg
Demo: JavaScript Dancing Animation Stars Cursor

How to setup

Step 1: Use JavaScript code below to setup the script
JavaScript

Code:

---

<script language="JavaScript">
<!--
/*
Dancing Stars cursor (Submitted by Kurt at kurt.grigg@virgin.net)
Modified and permission granted to Dynamic Drive to feature script in archive
For full source, usage terms, and 100's more DHTML scripts, visit http://dynamicdrive.com
*/

if (document.all){
document.write('<div id="starsDiv" style="position:absolute;top:0px;left:0px">')
for (xy=0;xy<7;xy++)
document.write('<div style="position:relative;width:3px;height:3px;background:#FFFF00;font-size:2px;visibility:visible"></div>')
document.write('</div>')
}

if (document.layers)
{window.captureEvents(Event.MOUSEMOVE);}
var yBase = 200;
var xBase = 200;
var yAmpl = 10;
var yMax = 40;
var step = .2;
var ystep = .5;
var currStep = 0;
var tAmpl=1;
var Xpos = 1;
var Ypos = 1;
var i = 0;
var j = 0;

if (document.all)
{
  function MoveHandler(){
  Xpos = document.body.scrollLeft+event.x;
  Ypos = document.body.scrollTop+event.y;
  }
  document.onmousemove = MoveHandler;
}

else if (document.layers)
{
  function xMoveHandler(evnt){
  Xpos = evnt.pageX;
  Ypos = evnt.pageY;
  }
  window.onMouseMove = xMoveHandler;
}



function animateLogo() {
if (document.all)
{
 yBase = window.document.body.offsetHeight/4;
 xBase = window.document.body.offsetWidth/4;
}
else if (document.layers)
{
 yBase = window.innerHeight/4 ;
 xBase = window.innerWidth/4;
}

if (document.all)
{
var totaldivs=document.all.starsDiv.all.length
 for ( i = 0 ; i < totaldivs ; i++ )
 {
var tempdiv=document.all.starsDiv.all[i].style
  tempdiv.top = Ypos + Math.cos((20*Math.sin(currStep/20))+i*70)*yBase*(Math.sin(10+currStep/10)+0.2)*Math.cos((currStep + i*25)/10);
  tempdiv.left = Xpos + Math.sin((20*Math.sin(currStep/20))+i*70)*xBase*(Math.sin(10+currStep/10)+0.2)*Math.cos((currStep + i*25)/10);
 }
}

else if (document.layers)
{
 for ( j = 0 ; j < 7 ; j++ )
 {
var templayer="a"+j
  document.layers[templayer].top = Ypos + Math.cos((20*Math.sin(currStep/20))+j*70)*yBase*(Math.sin(10+currStep/10)+0.2)*Math.cos((currStep + j*25)/10);
  document.layers[templayer].left =Xpos + Math.sin((20*Math.sin(currStep/20))+j*70)*xBase*(Math.sin(10+currStep/10)+0.2)*Math.cos((currStep + j*25)/10);
 }
}
currStep += step;
setTimeout("animateLogo()", 15);
}
animateLogo();
// -->
</script>

---

Step 2: Copy & Paste HTML code below in your BODY section
HTML

Code:

---

<LAYER NAME="a0" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#FFFF00" CLIP="0,0,3,3"></LAYER>
<LAYER NAME="a1" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#FFFF00" CLIP="0,0,3,3"></LAYER>
<LAYER NAME="a2" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#FFFF00" CLIP="0,0,3,3"></LAYER>
<LAYER NAME="a3" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#FFFF00" CLIP="0,0,3,3"></LAYER>
<LAYER NAME="a4" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#FFFF00" CLIP="0,0,3,3"></LAYER>
<LAYER NAME="a5" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#FFFF00" CLIP="0,0,3,3"></LAYER>
<LAYER NAME="a6" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#FFFF00" CLIP="0,0,3,3"></LAYER>

---

JavaScript Line Graph script - JavaScript Virtual Keyboard - JavaScript Horizontal Slider

When designing web site, sometimes we need to fill areas of layout with some text, and we usually do this thing by making some copy & paste on any conte... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

http://www.javascriptbank.com/javasc...-generator.jpg
Demo: JavaScript Random Text Generator

How to setup

Step 1: Place JavaScript below in your HEAD section
JavaScript

Code:

---

<script type="text/javascript">
// Created by: Will Munslow | http://subterrane.com

function objectTag() {
  var lorem = new Array();

  switch(document.loremForm.loremString.value) {
    case "latin": {
                                  lorem[0] = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.";
      break;
    }
                  case "silly": {
                                  lorem[0] = "Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito. Epsum factorial non deposit quid pro quo hic escorol. Marquee selectus non provisio incongruous feline nolo contendre Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum.";
                          break;
                  }
                  case "spanish": {
                          lorem[0] = "Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc., li tot Europa usa li sam vocabularium. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilit? de un nov lingua franca: on refusa continuar payar custosi traductores. It solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles.";
                          break;
                  }
                  case "italian": {
                          lorem[0] = "Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues. It va esser tam simplic quam Occidental: in fact, it va esser Occidental. A un Angleso it va semblar un simplificat Angles, quam un skeptic Cambridge amico dit me que Occidental es."
                          break;
                  }
        }

  if ("characters" == document.loremForm.type.value) {
    var outputString = '';
    var numOfChars = document.loremForm.numbers.value;
    numOfChars = parseInt( numOfChars );
    var tempString = lorem.join( "nn" );
    while (
      outputString.length < numOfChars ) outputString += tempString;
      document.loremForm.output.value = outputString.substring(0, numOfChars ); // changed
    } else if("words" == document.loremForm.type.value) {
      var numOfWords = document.loremForm.numbers.value;
      numOfWords = parseInt( numOfWords );
      var list = new Array();
      var wordList = new Array();
      wordList = lorem[0].split( ' ' );
      var iParagraphCount = 0;
      var iWordCount = 0;

      while( list.length < numOfWords ) {
              if( iWordCount > wordList.length ) {
                        iWordCount = 0;
                        iParagraphCount++;
                        if( iParagraphCount + 1 > lorem.length ) iParagraphCount = 0;
                        wordList = lorem[ iParagraphCount ].split( ' ' );
                        wordList[0] = "nn" + wordList[ 0 ];
              }
              list.push( wordList[ iWordCount ] );
              iWordCount++;
      }
    document.loremForm.output.value = list.join(' '); // changed
  } else {
    var numOfParagraphs = document.loremForm.numbers.value;
    numOfParagraphs = parseInt( numOfParagraphs );
    var list = new Array();
                        var iParagraphCount = 0;

    while(list.length < numOfParagraphs) {
      if(iParagraphCount +1 > lorem.length) {
        iParagraphCount = 0;
      }
      list.push( lorem[iParagraphCount] );
        iParagraphCount++;
    }
    document.loremForm.output.value = list.join( "nn" ); // changed
  }
}

function copypaste() {
  document.loremForm.output.focus();
  document.loremForm.output.select();
  therange=document.loremForm.output.createTextRange();
  therange.execCommand("Copy");
}
</script>

---

Step 2: Place HTML below in your BODY section
HTML

Code:

---

<form name="loremForm" action="javascript:objectTag();" id="loremForm">
        <strong>Select language type ...</strong>
        <select name="loremString" style="width: 100%;">
                <option value="latin" selected="selected">Lorem ipsum dolor sit amet...</option>
                <option value="silly">Epsum factorial non deposit quid pro quo...</option>
                <option value="spanish">Li Europan lingues es membres del sam familie...</option>
                <option value="italian">Ma quande lingues coalesce, li grammatica...</option>
        </select><br />
       
        <strong>Select number of  </strong>
        <select name="type">
                <option value="characters">Characters</option>
                <option value="words" selected="selected">Words</option>
                <option value="paragraphs">Paragraphs</option>
        </select>
        <input type="text" name="numbers" value="8" size="4">
        <input type="submit" name="btnOK" value="Generate">
        <br />
        <textarea rows="10" name="output" style="width: 100%;"></textarea>
        <br />
        <input type="button" onclick="copypaste()" value="Select Text" name="select">
        <input type="button" onclick=document.loremForm.reset() value="Reset form">
</form>

---

JavaScript Line Graph script - JavaScript Virtual Keyboard - JavaScript Horizontal Slider

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: Copy & Paste JavaScript code 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: Copy & Paste HTML code 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
        -->

---

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

By using your computer's clock, you can calculate the time in other time zones all over the world! Currently, the script works for eight of the major time zones. But, just change one entry (or just ad... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

http://www.javascriptbank.com/javasc...ock-script.jpg
Demo: JavaScript World Clock script

How to setup

Step 1: Place JavaScript below in your HEAD section
JavaScript

Code:

---

<SCRIPT LANGUAGE="JavaScript">
<!-- Original:  Emanuel Gavrilv (eltal@sprint.ca) -->

<!-- Begin
function GetTime() {
var dt = new Date();
var def = dt.getTimezoneOffset()/60;
var gmt = (dt.getHours() + def);
document.clock.local.value = (IfZero(dt.getHours()) + ":" + IfZero(dt.getMinutes()) + ":" + IfZero(dt.getSeconds()));
var ending = ":" + IfZero(dt.getMinutes()) + ":" +  IfZero(dt.getSeconds());
var rome =check24(((gmt + 1) > 24) ? ((gmt + 1) - 24) : (gmt + 1));
document.clock.rome.value = (IfZero(rome) + ending);
var isr =check24(((gmt + 2) > 24) ? ((gmt + 2) - 24) : (gmt + 2));
document.clock.Israel.value = (IfZero(isr) + ending);
var msw =check24(((gmt + 3) > 24) ? ((gmt + 3) - 24) : (gmt + 3));
document.clock.msw.value = (IfZero(msw) + ending);
var baku =check24(((gmt + 4) > 24) ? ((gmt + 4) - 24) : (gmt + 4));
document.clock.baku.value = (IfZero(baku) + ending);
var del =check24(((gmt + 5) > 24) ? ((gmt + 5) - 24) : (gmt + 5));
document.clock.del.value = (IfZero(del) + ending);
var dh =check24(((gmt + 6) > 24) ? ((gmt + 6) - 24) : (gmt + 6));
document.clock.dh.value = (IfZero(dh) + ending);
var kok =check24(((gmt +7 ) > 24) ? ((gmt +7 ) - 24) : (gmt + 7));
document.clock.kok.value = (IfZero(kok) + ending);
var ho =check24(((gmt + 8) > 24) ? ((gmt + 8) - 24) : (gmt + 8));
document.clock.ho.value = (IfZero(ho) + ending);
var tky =check24(((gmt + 9) > 24) ? ((gmt + 9) - 24) : (gmt + 9));
document.clock.tky.value = (IfZero(tky) + ending);
var sdn =check24(((gmt + 10) > 24) ? ((gmt + 10) - 24) : (gmt + 10));
document.clock.sdn.value = (IfZero(sdn) + ending);
var mag =check24(((gmt + 11) > 24) ? ((gmt + 11) - 24) : (gmt + 11));
document.clock.mag.value = (IfZero(mag) + ending);
var wll =check24(((gmt + 12) > 24) ? ((gmt + 12) - 24) : (gmt + 12));
document.clock.wll.value = (IfZero(wll) + ending);

var _GMT =check24(((gmt) > 24) ? ((gmt) - 24) : (gmt));

document.clock._GMT.value = (IfZero(_GMT) + ":" + IfZero(dt.getMinutes()) + ":" + IfZero(dt.getSeconds()));
var eniw =check24(((gmt + (24-12)) > 24) ? ((gmt + (24-12)) - 24) : (gmt + (24-12)));
document.clock.eniw.value = (IfZero(eniw) + ending);
var sam =check24(((gmt + (24-11)) > 24) ? ((gmt + (24-11)) - 24) : (gmt + (24-11)));
document.clock.sam.value = (IfZero(sam) + ending);
var haw =check24(((gmt + (24-10)) > 24) ? ((gmt + (24-10)) - 24) : (gmt + (24-10)));
document.clock.Hawaii.value = (IfZero(haw) + ending);
var ala =check24(((gmt + (24-9)) > 24) ? ((gmt + (24-9)) - 24) : (gmt + (24-9)));
document.clock.alaska.value = (IfZero(ala) + ending);
var pacif =check24(((gmt + (24-8)) >= 24) ? ((gmt + (24-8)) - 24) : (gmt + (24-8)));
document.clock.pacif.value = (IfZero(pacif) + ending);
var mount =check24(((gmt + (24-7)) > 24) ? ((gmt + (24-7)) - 24) : (gmt + (24-7)));
document.clock.mount.value = (IfZero(mount) + ending);
var center =check24(((gmt + (24-6)) > 24) ? ((gmt + (24-6)) - 24) : (gmt + (24-6)));
document.clock.center.value = (IfZero(center) + ending);
var east =check24(((gmt + (24-5)) > 24) ? ((gmt + (24-5)) - 24) : (gmt + (24-5)));
document.clock.east.value = (IfZero(east) + ending);
var atl =check24(((gmt + (24-4)) > 24) ? ((gmt + (24-4)) - 24) : (gmt + (24-4)));
document.clock.atl.value = (IfZero(atl) + ending);
var bra =check24(((gmt + (24-3)) > 24) ? ((gmt + (24-3)) - 24) : (gmt + (24-3)));
bra = (bra >= 24) ? bra - 24 : bra;
document.clock.bra.value = (IfZero(bra) + ending);
var mid =check24(((gmt + (24-2)) > 24) ? ((gmt + (24-2)) - 24) : (gmt + (24-2)));
mid = (mid >= 24) ? mid - 24 : mid;
document.clock.mid.value = (IfZero(mid) + ending);
var azo =check24(((gmt + (24-1)) > 24) ? ((gmt + (24-1)) - 24) : (gmt + (24-1)));
azo = (azo >= 24) ? azo - 24 : azo;
document.clock.azo.value = (IfZero(azo) + ending);
setTimeout("GetTime()", 1000);
}
function IfZero(num) {
return ((num <= 9) ? ("0" + num) : num);
}
function check24(hour) {
return (hour >= 24) ? hour - 24 : hour;
}
//  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:

---

<BODY onLoad="javascript:GetTime();">
<form name="clock">
<strong>Local Time <input type="text" size="8" name="local"></strong>
<p>
Eniwetok (GMT-12)  <input type="text" size="8" name="eniw"><br>
Samoa (GMT-11)  <input type="text" size="8" name="sam"><br>
Hawaii (GMT-10)  <input type="text" size="8" name="Hawaii">
<p>
Alaska (GMT-9)  <input type="text" size="8" name="alaska"><br>
Pacific Time (GMT-8)  <input type="text" size="8" name="pacif"><br>
Mountain Time (GMT-7)  <input type="text" size="8" name="mount">

<p>
Central Time (GMT-6)  <input type="text" size="8" name="center"><br>
Eastern Time (GMT-5)  <input type="text" size="8" name="east"><br>
Atlantic Time (GMT-4)  <input type="text" size="8" name="atl">
<p>
Brazilia (GMT-3)  <input type="text" size="8" name="bra"><br>
Mid-Atlantic (GMT-2)  <input type="text" size="8" name="mid"><br>
Azores (GMT-1)  <input type="text" size="8" name="azo">
<p>
<strong>Greenwich Mean Time (GMT)  <input type="text" size="8" name="_GMT"></strong>

<p>
Rome (GMT +1)  <input type="text" size="8" name="rome"><br>
Israel (GMT +2)  <input type="text" size="8" name="Israel"><br>
Moscow (GMT +3)  <input type="text" size="8" name="msw">
<p>
Baku (GMT +4)  <input type="text" size="8" name="baku"><br>
New Delhi (GMT +5)  <input type="text" size="8" name="del"><br>
Dhakar (GMT +6)  <input type="text" size="8" name="dh">
<p>
Bangkok (GMT +7)  <input type="text" size="8" name="kok"><br>

Hong Kong (GMT +8)  <input type="text" size="8" name="ho"><br>
Tokyo (GMT +9)  <input type="text" size="8" name="tky">
<p>
Sydney (GMT +10)  <input type="text" size="8" name="sdn"><br>
Magadan (GMT +11)  <input type="text" size="8" name="mag"><br>
Wellington (GMT +12)  <input type="text" size="8" name="wll">
</form>
</body>
        <!--
            This script downloaded from www.JavaScriptBank.com
            Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
        -->

---

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

This JavaScript helps you open floating layer popups. The layers alway stay on top, allowing your visitors to work in the main detail at JavaScriptBank.com - 2.000+ free JavaScript codes

http://www.javascriptbank.com/javasc...up-onclick.jpg
Demo: JavaScript DIV Layer Popup onClick

How to setup

Step 1: Use CSS code below for styling the script
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
*/
.jsbank_sample_cont {margin: 20px; padding: 20px;}
.jsbank_sample_tit {font-weight: bold; margin-bottom: 10px; padding: 5px; width: auto; background-color: #c0c0c0; border: 5px solid #a0a0a0; color: black; text-align: center;}
/*
Created by: Jeroen Haan
Web Site: http://www.haan.net/

*/
#layer1 {
        position: absolute;
        visibility: hidden;
        width: 400px;
        height: 300px;
        left: 20px;
        top: 300px;
        background-color: #ccc;
        border: 1px solid #000;
        padding: 10px;
}

#close {
        float: right;
}
</style>

---

Step 2: Use JavaScript code below to setup the script
JavaScript

Code:

---

<SCRIPT type=text/javascript>
<!--
// Created by: Jeroen Haan :: http://www.haan.net/

/* -----------------------------------------------
  Floating layer - v.1
  (c) 2006 www.haan.net
  contact: jeroen@haan.net
  You may use this script but please leave the credits on top intact.
  Please inform us of any improvements made.
  When usefull we will add your credits.
  ------------------------------------------------ */

x = 20;
y = 70;
function setVisible(obj)
{
        obj = document.getElementById(obj);
        obj.style.visibility = (obj.style.visibility == 'visible') ? 'hidden' : 'visible';
}
function placeIt(obj)
{
        obj = document.getElementById(obj);
        if (document.documentElement)
        {
                theLeft = document.documentElement.scrollLeft;
                theTop = document.documentElement.scrollTop;
        }
        else if (document.body)
        {
                theLeft = document.body.scrollLeft;
                theTop = document.body.scrollTop;
        }
        theLeft += x;
        theTop += y;
        obj.style.left = theLeft + 'px' ;
        obj.style.top = theTop + 'px' ;
        setTimeout("placeIt('layer1')",500);
}
window.onscroll = setTimeout("placeIt('layer1')",500);
//-->
</SCRIPT>

---

Step 3: Copy & Paste HTML code below in your BODY section
HTML

Code:

---

<DIV id=layer1><SPAN id=close><A style="TEXT-DECORATION: none"
href="javascript:setVisible('layer1')"><STRONG>Hide</STRONG></A></SPAN>
<P>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
enim ad minim veniam, quis nostrud exerci.</P><BR><BR><IMG height=65
src="../image/logojs.gif" width=120 border=0> </DIV>
<p>This link uses the onclick event handler.<br>
<a href="#" onclick="setVisible('layer1');return false" target="_self">Open popup</a></p>

<p>This next one uses the javascript link inside the href tag.<br>
<a href="javascript:setVisible('layer1',true)">Open popup</a></p>

<form>
And this one uses the input button inside a form tag.<br>
  <input type="button" value="Open popup" onclick="setVisible('layer1')">
</form>

<p>It can also be used in an image map. Here, the word 'Webhost' contains the link<br>
<img src="../image/logojs.gif" width="120" height="65" border="0" usemap="#Map">
  <map name="Map" id="Map">
    <area shape="rect" coords="1,1,113,23" href="#" onclick="setVisible('layer1');return false" target="_self">
  </map>

---

JavaScript Vertical Marquee - JavaScript DHTML analog clock - JavaScript Backwards Text

Floating background image script animates any image (or block of HTML) up and down the detail at JavaScriptBank.com - 2.000+ free JavaScript codes

http://www.javascriptbank.com/javasc...ting-image.jpg
Demo: JavaScript Up-down floating image

How to setup

Step 1: Place JavaScript below in your HEAD section
JavaScript

Code:

---

<SCRIPT>
//detecting browser to dynamically write appropriate DIVs/LAYERs
N=(navigator.appName.indexOf('Netscape')!=-1&&parseInt(navigator.appVersion)<5)
S=(navigator.appName.indexOf('Netscape')!=-1&&parseInt(navigator.appVersion)>4.9)
M=(navigator.appName.indexOf('Microsoft')!=-1)



Vis=new Array()
Vis[0]=(M||S) ? "hidden" : "hide"
Vis[1]=(M||S) ? "visible" : "show"

function GetDiv(divId,divY,divX,divW,divH,bCol,visb,zInd){
bkCol=(bCol!="")?((N)?" bgColor="+bCol:";background:"+bCol):""

Styl = (M||S) ? "<DIV" : "<LAYER"

if(M||S){
Styl+=" ID="+divId
Styl+=" style='position:absolute;top:"+divY+";left:"+divX+";width:"+divW+";height:"+divH+bkCol
Styl+=";visibility:"+Vis[visb]+";z-index:"+zInd
Styl+="'>"
}

if(N){
Styl+=" ID="+divId
Styl+=" top="+divY+" left="+divX+" width="+divW+" height="+divH+bkCol
Styl+=" visibility="+Vis[visb]+" z-index="+zInd
Styl+=">"
}
document.writeln(Styl)
}

function EndDiv(){
(M||S)? document.writeln("</DIV>"): document.writeln("</LAYER>")
}

function PutIt(ID,dX,dY){
if(N){
document.layers[ID].left=dX
document.layers[ID].top=dY
}
if(M){
document.all[ID].style.left=dX
document.all[ID].style.top=dY
}
if(S){
document.getElementById(ID).style.left=dX
document.getElementById(ID).style.top=dY
}
}

function ShowHide(ID,vs){
if(N){
document.layers[ID].visibility=Vis[vs]
}
if(M){
document.all[ID].style.visibility=Vis[vs]
}
if(S){
document.getElementById(ID).style.visibility=Vis[vs]
}
}

function Xof(ID){
if(N){
return document.layers[ID].left
}
if(M){
return document.all[ID].style.left
}
if(S){
return document.getElementById(ID).style.left
}
}

function Yof(ID){
if(N){
return document.layers[ID].top
}
if(M){
return document.all[ID].style.top
}
if(S){
return document.getElementById(ID).style.top
}
}



function Zind(ID,zz){
if(N){
document.layers[ID].zIndex=zz
}
if(M){
document.all[ID].style.zIndex=zz
}
if(S){
document.getElementById(ID).style.zIndex=zz
}
}

function ChangeCol(ID,colrx){
if(M)document.all[ID].style.background=colrx
if(N)document.layers[ID].bgColor=colrx
if(S)document.getElementById(ID).style.background=colrx
}

function DivWrite(IdName,Str) {
if (N){
document.layers[IdName].document.write(Str)
document.layers[IdName].document.close()
}
if(M) document.all[IdName].innerHTML=Str
if(S) document.getElementById(IdName).innerHTML=Str
}
</SCRIPT>

<SCRIPT>
GetDiv('Top',0,0,100,100,'pink',1,0)
document.write("Top Place")
EndDiv()
GetDiv('Bottom',4000,0,100,100,'pink',1,0)
document.write("Bottom Place")
EndDiv()
d=50
y=0

function Scroll(){
y+=d
if(y>=3800)d=-50
if(y<=0)d=50
window.scroll(0,y)
}

setInterval('Scroll()',50)

</SCRIPT>
        <!--
            This script downloaded from www.JavaScriptBank.com
            Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
        -->

---

Step 2: Copy & Paste HTML code below in your BODY section
HTML

Code:

---

<BODY background="pic191.jpg">
</BODY>
        <!--
            This script downloaded from www.JavaScriptBank.com
            Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
        -->

---

Step 3: Download files below
Files
pic191.jpg

JavaScript Countdown Timer - JavaScript Currency Format - JavaScript Format Phone Number