Free JavaScript codes

Use this JavaScript to figure out when Sunday will be in a given point of time.... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

http://www.javascriptbank.com/javasc...for-sunday.jpg
Demo: JavaScript Calculator for Sunday

How to setup

Step 1: Place JavaScript below in your HEAD section
JavaScript

Code:

---

<script language="JavaScript">
<!-- Begin
function WeekStart(Month, Year, StartOfWeekDay) {
  _Date = new Date(Year, Month, 1)
  _LastDate = new Date()
  _LastDate = new Date(_Date)
  _LastDate.setMonth(_Date.getMonth() + 1)
  _LastDate.setHours(_LastDate.getHours() - 24)
  _Returns = new Array()
  if (StartOfWeekDay == null) {
    StartOfWeekDay = 0
  }
  var I = 1
  while (I <= _LastDate.getDate()) {
    _Date.setDate(I)
    if (_Date.getDay() == StartOfWeekDay) {
      _Returns[_Returns.length] = new Date(_Date)
      I += 6
    }
    I++
  }
  return(_Returns)
}
//  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>Month <select name="Month"><option value="0">Jan
</option><option value="1">Feb
</option><option value="2">Mar
</option><option value="3">Apr
</option><option value="4">May
</option><option value="5">Jun
</option><option value="6">Jul
</option><option value="7">Aug
</option><option value="8">Sep
</option><option value="9">Oct
</option><option value="10">Nov
</option><option value="11">Dec

</option></select><br>
Year <input type="text" name="Year" size="4" maxlength="4"><br>
<input type="button" value="Get Days" onclick="alert(WeekStart(document.forms[0].Month.value, document.forms[0].Year.value, 0))">
</form>
        <!--
            This script downloaded from www.JavaScriptBank.com
            Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
        -->

---

JavaScript Spotlight - JavaScript Validate E-Mail - AJAX Page Content Loader

Another script to create a auto scrolling message which move depend on scrollbars.... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

http://www.javascriptbank.com/javasc...div-script.jpg
Demo: JavaScript AutoScroll DIV script

How to setup

Step 1: Place JavaScript below in your HEAD section
JavaScript

Code:

---

<script type="text/javascript">
       
        var useWidth = "400px";
        var speed = 250 // greater is slower;

        var message = "Now is the time for all good men to come to the aid of their country. That's one small step for man, one giant leap for mankind. Ask not what your country can do for you, ask what you can do for your country. | ";

        // Remember to include the vertical bar | at the end of the message(s);

        var mContainer = "";
        var circleMsg = "";
        var prevMsg =  "";
        var useFloat = "";
        var xV = 0;
        var xL = 0;
        var msgLength = 0;
       
        function updateMessage(){
               
                if (circleMsg == ""){circleMsg = mContainer.lastChild.data}
                else {circleMsg = prevMsg}
                var separatorIdx = circleMsg.lastIndexOf('|');
                if (separatorIdx == -1){separatorIdx = msgLength}
                circleMsg = circleMsg.substring(1,separatorIdx);
                var spliceStr = message.substring(0,msgLength-separatorIdx-1);
                var dispMsg = circleMsg+spliceStr;
                mContainer.removeChild(mContainer.lastChild);
                mContainer.appendChild(document.createTextNode(dispMsg));
                prevMsg = circleMsg+'|'+spliceStr;
                setTimeout("updateMessage()",speed);
        }

        function startCrawl(){

                mContainer.appendChild(document.createTextNode(message))
                setTimeout("updateMessage()",3000);  // delay before crawl start;
        }

        function stayHome(){

                var nV = 0;
                var nL = 0;
                if(!document.body.scrollTop)
                        {
                        nV = document.documentElement.scrollTop;
                        nL = document.documentElement.scrollLeft;
                        }
                else        {
                        nV = document.body.scrollTop;
                        nL = document.body.scrollLeft;
                        }
                if (nV == 0){window.scrollBy(0,1)}
                useFloat.style.top = nV+xV+"px";
                useFloat.style.left = nL+xL+"px";
                setTimeout("stayHome()",50);
        }

        window.onload=function(){

                mContainer = document.getElementById('crawl');
                document.getElementById('isFloat').style.width = useWidth;
                msgLength = message.length;
                useFloat = document.getElementById('isFloat');
                useFloat.style.left = ((screen.width-30)/2)-(parseInt(useWidth)/2)+"px";
                xV = useFloat.offsetTop;
                xL = useFloat.offsetLeft;
                stayHome();
                startCrawl();
        }

</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:

---

<Div id='isFloat' style='position:absolute;bottom:20px;overflow:hidden;height:28px;border:solid black 1px;font-size:14pt;background-color:lightyellow;color:darkblue'>

<Div id='crawl' style='padding:3px;white-space:nowrap'></Div>

</Div>
        <!--
            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

Need to create a F.A.Q for your Web site? Use this JavaScript to hide/reveal content on a Web page. Keep your long documents short.... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

http://www.javascriptbank.com/javasc...own-script.jpg
Demo: JavaScript FAQ Drop Down script

How to setup

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

Code:

---

<script type="text/javascript">
<!-- Begin
// Created by: Fang :: http://tinyurl.com/7v7l8

function toggle(obj) {
// Moz. or IE
var sibling=(obj.nextSibling.nodeType==3)? obj.nextSibling.nextSibling : obj.nextSibling;
// hide or show
if(sibling.style.display=='' || sibling.style.display=='block') {
        sibling.style.display='none';
    obj.firstChild.firstChild.data='+';
    }
else {
        sibling.style.display='block';
    obj.firstChild.firstChild.data='-';
    }
}
//
function initCollapse() {
var oDT=document.getElementById('content').getElementsByTagName('dt');
for (var i=0; i < oDT.length; i++) {
        oDT[i].onclick=function() {toggle(this)};
    var oSpan=document.createElement('span');
    var sign=document.createTextNode('+');
    oSpan.appendChild(sign);
    oDT[i].insertBefore(oSpan, oDT[i].firstChild);
    oSpan.style.fontFamily='monospace';
    oSpan.style.paddingRight='0.5em';
    oDT[i].style.cursor='pointer';
    toggle(oDT[i]);
        }
oDT=null;
}
window.onload=function() {if(document.getElementById && document.createElement) {initCollapse();}}
//-->
</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:

---

<dl id="content">
    <dt>This is Question #1  <em class="sm">[click here]</em></dt>
      <dd>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.<br><br></dd>
    <dt>This is Question #2  <em class="sm">[click here]</em></dt>
      <dd>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.<br><br></dd>
    <dt>This is Question #3  <em class="sm">[click here]</em></dt>

      <dd>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.</dd>
</dl>
</div>
        <!--
            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

The dynamic animation JavaScript code is fastest and simpliest way to set up a splash screen effect, thanks to this DHTML script! Users will be ab... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

http://www.javascriptbank.com/javasc...ash-screen.jpg
Demo: JavaScript Dynamic HTML Splash Screen

How to setup

Step 1: Place HTML below in your BODY section
HTML

Code:

---

<DIV id=splashcontainer style="POSITION: absolute; WIDTH: 350px"></DIV><LAYER
id=splashcontainerns width="450"></LAYER>
<SCRIPT>
/*
Dynamic Splash Screen effect- © Dynamic Drive (www.dynamicdrive.com) Updated: 00/12/18
For full source code, installation instructions, 100's more DHTML scripts, and Terms Of Use,
Visit http://dynamicdrive.com
*/

//Specify the paths of the images to be used in the splash screen, if any.
//If none, empty out array (ie: preloadimages=new Array())
var preloadimages=new Array("bongbong.gif","bongbong.gif")
//configure delay in miliseconds between each message (default: 2 seconds)
var intervals=2000
//configure destination URL
var targetdestination="http://javascriptbank.com"

//configure messages to be displayed
//If message contains apostrophe('), backslash them (ie: "I'm fine")

var splashmessage=new Array()
var openingtags='<font face="Arial" size="4">'
splashmessage[0]='<img src="bongbong.gif"> JavaScriptBank.com <img src="bongbong.gif">'
splashmessage[1]='Bank of free JavaScript'
splashmessage[2]='over 2000+ free JavaScript code'
splashmessage[3]='please wait...'


var closingtags='</font>'

//Do not edit below this line (besides HTML code at the very bottom)

var i=0

var ns4=document.layers?1:0
var ie4=document.all?1:0
var ns6=document.getElementById&&!document.all?1:0
var theimages=new Array()

//preload images
if (document.images){
for (p=0;p<preloadimages.length;p++){
theimages[p]=new Image()
theimages[p].src=preloadimages[p]
}
}

function displaysplash(){
if (i<splashmessage.length){
sc_cross.style.visibility="hidden"
sc_cross.innerHTML='<b><center>'+openingtags+splashmessage[i]+closingtags+'</center></b>'
sc_cross.style.left=ns6?parseInt(window.pageXOffset)+parseInt(window.innerWidth)/2-parseInt(sc_cross.style.width)/2 : document.body.scrollLeft+document.body.clientWidth/2-parseInt(sc_cross.style.width)/2
sc_cross.style.top=ns6?parseInt(window.pageYOffset)+parseInt(window.innerHeight)/2-sc_cross.offsetHeight/2 : document.body.scrollTop+document.body.clientHeight/2-sc_cross.offsetHeight/2
sc_cross.style.visibility="visible"
i++
}
else{
window.location=targetdestination
return
}
setTimeout("displaysplash()",intervals)
}

function displaysplash_ns(){
if (i<splashmessage.length){
sc_ns.visibility="hide"
sc_ns.document.write('<b>'+openingtags+splashmessage[i]+closingtags+'</b>')
sc_ns.document.close()

sc_ns.left=pageXOffset+window.innerWidth/2-sc_ns.document.width/2
sc_ns.top=pageYOffset+window.innerHeight/2-sc_ns.document.height/2

sc_ns.visibility="show"
i++
}
else{
window.location=targetdestination
return
}
setTimeout("displaysplash_ns()",intervals)
}



function positionsplashcontainer(){
if (ie4||ns6){
sc_cross=ns6?document.getElementById("splashcontainer"):document.all.splashcontainer
displaysplash()
}
else if (ns4){
sc_ns=document.splashcontainerns
sc_ns.visibility="show"
displaysplash_ns()
}
else
window.location=targetdestination
}
window.onload=positionsplashcontainer

</SCRIPT>

---

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: Place JavaScript below in your HEAD section
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: Place HTML 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 Make link open in new tab/window - JavaScript World clock - circumference calculator

From this super nice JavaScript analog clock, you have more than 20 layouts of analog clock to display the time on your web pages. This JavaScript analog clock has enou... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

http://www.javascriptbank.com/javasc...alog-clock.jpg
Demo: JavaScript CoolClock - Super nice Javascript Analog Clock

How to setup

Step 1: Place JavaScript below in your HEAD section
JavaScript

Code:

---

<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
<script src="coolclock.js" type="text/javascript"></script>
<script src="moreskins.js" type="text/javascript"></script>

---

Step 2: Place HTML below in your BODY section
HTML

Code:

---

<table align="center">
<tbody><tr><td rowspan="2">
        <canvas style="width: 170px; height: 170px;" height="170" width="170" id="c1" class="CoolClock"></canvas>
        <br>
        <canvas style="width: 170px; height: 170px;" height="170" width="170" id="c2" class="CoolClock:chunkySwiss"></canvas>
        <br>
        <canvas style="width: 170px; height: 170px;" height="170" width="170" id="c4" class="CoolClock:machine"></canvas>
</td><td>
        <canvas style="width: 380px; height: 380px;" height="380" width="380" id="c5" class="CoolClock:fancy:190"></canvas>
</td></tr><tr><td align="center">
        <table><tbody><tr>
  <td align="center">New York<br><canvas style="width: 60px; height: 60px;" height="60" width="60" id="c6" class="CoolClock:chunkySwiss:30:noSeconds:-4 leftRightPad"></canvas></td>
  <td align="center">London<br><canvas style="width: 60px; height: 60px;" height="60" width="60" id="c7" class="CoolClock::30:noSeconds:+1 leftRightPad"></canvas></td>
  <td align="center">Townsville<br><canvas style="width: 60px; height: 60px;" height="60" width="60" id="c8" class="CoolClock:fancy:30:noSeconds:+10 leftRightPad"></canvas></td>
        </tr></tbody></table>
</td></tr>
</tbody></table>

---

Step 3: downloads
Files
coolclock.js
excanvas.js
moreskins.js

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

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: Place HTML 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 Countdown Timer - JavaScript Currency Format - JavaScript Format Phone Number

This image rotation system creates a dissolving effect for the transition phase. Great for banners, picture-presentations and... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

http://www.javascriptbank.com/javasc...ing-effect.jpg
Demo: JavaScript Image Rotation with new transition and dissolving effect

How to setup

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

Code:

---

<STYLE>
.spanstyle {
        LEFT: 0px; POSITION: absolute; width: 100%; text-align: center;
}
</STYLE>

---

Step 2: Place JavaScript below in your HEAD section
JavaScript

Code:

---

<SCRIPT>
<!-- Beginning of JavaScript -
// CONFIGURATION:
// 1.        Copy the two script-blocks:
//                Paste the first script-block inside the head-section of your HTML-file.
//                Insert the second script-block into the body-section.
// 2.        Copy the style-block and paste it into the head-section of your HTML-file.
// 3.        Put your images into the same directory as the HTML-file.
//                You may add as many images as you like.
// 4.        Insert 'onLoad="checkbrowser()"' into the body-tag.
// 5.        Configure the variables below:
               
// The width of your images (pixels)
var imgwidth=800

// The height of your images (pixels)
var imgheight=250

// The name of your images. You may add as many images as you like.
var imgname=new Array()
imgname[0]="logojs.gif"
imgname[1]="photo1.jpg"
imgname[2]="photo2.jpg"
imgname[3]="photo3.jpg"

// This block will preload your images. Do not edit this block.
var imgpreload=new Array()
for (i=0;i<=imgname.length-1;i++) {
        imgpreload[i]=new Image()
        imgpreload[i].src=imgname[i]
}

// Where should those images be linked to?
// Add an URL for each image.
// If you don't want to add an URL just write '#' instead of
// the URL, see sample imgurl[2].
var imgurl=new Array()
imgurl[0]="http://javascriptbank.com"
imgurl[1]="http://www.javascriptbank.com"
imgurl[2]="http://javascriptbank.com"
imgurl[3]="http://www.javascriptbank.com"

// Final horizontal position of the image: distance to the left margin of the window
var x_finalpos=30

// Final vertical position of the image: distance to the top margin of the window
var y_finalpos=30

// Number of sliced cells (the higher this number the slower the visual effect)
var x_slices=10

// Number of sliced rows (the higher this number the slower the visual effect)
var y_slices=8

// Standstill between the images (microseconds)
var pause=2500

// Do not change the variables below
var xy_slices=x_slices*y_slices
var randomorder=new Array()
for (i=0;i<=xy_slices-1;i++) {
        randomorder[i]=i
}

var speed=20
var i_images=0
var width_slice=Math.floor(imgwidth/x_slices)
var height_slice=Math.floor(imgheight/y_slices)

var cliptop=0
var clipbottom=height_slice
var clipleft=0
var clipright=width_slice
var spancounter=0
var x_random=new Array()
var y_random=new Array()
var max_explsteps=15
var i_explsteps=0

function checkbrowser() {
        if (document.all) {
        initiate()
    }
    if (document.layers) {
        rotatenetscape()
    }
}

function initiate() {
    if (document.all) {
        spancounter=0
            for (i=0;i<=y_slices-1;i++) {
                        for (ii=0;ii<=x_slices-1;ii++) {
                                var thisspan=eval("document.all.span"+spancounter+".style")
                                thisspan.posLeft=x_finalpos
                                thisspan.posTop=y_finalpos
                thisspan.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
                                clipleft+=width_slice
                        clipright+=width_slice
                        spancounter++
                        }
                clipleft=0
                clipright=width_slice
                cliptop+=height_slice
                clipbottom+=height_slice
                }       
                for (i=0;i<=xy_slices-1;i++) {
                        var thisspan=eval("span"+i)
                        thisspan.innerHTML="<a href='"+imgurl[i_images]+"'><img src='"+imgname[i_images]+"' border='0'></a>"
                }
                var timer=setTimeout("changeimage()",pause)
  }
}

function dissolveimg() {
        if (i_loop<=xy_slices-1) {
                var thisspan=eval("span"+randomorder[i_loop])
                thisspan.innerHTML="<a href='"+imgurl[i_images]+"'><img src='"+imgname[i_images]+"' border='0'></a>"
                i_loop++
                var timer=setTimeout("dissolveimg()",speed)
        }
        else {
                clearTimeout(timer)       
                var timer=setTimeout("changeimage()",pause)
        }
}

function changeimage() {
        getrandomorder(xy_slices)
        i_loop=0
        i_images++
        if (i_images>=imgname.length) {i_images=0}
          dissolveimg()
}

function getrandomorder(range) {               
        for (i=0;i<=range;i++) {
                var firstvalue= Math.floor(range*Math.random())
                var secondvalue= Math.floor(range*Math.random())
                var cachevalue=randomorder[firstvalue]
                randomorder[firstvalue]=randomorder[secondvalue]
                randomorder[secondvalue]=cachevalue
        }
}

function rotatenetscape() {
        document.imgcontainer1.document.write("<a href='"+imgurl[i_images]+"'><img src='"+imgname[i_images]+"' border='0'></a>")       
        document.imgcontainer1.document.close()       
        i_images++
        if (i_images>imgname.length-1) {i_images=0}
          var timer=setTimeout("rotatenetscape()",pause)
}

// - End of JavaScript - -->
</SCRIPT>

---

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

Code:

---

<BODY onload=checkbrowser()>
<SCRIPT>
<!-- Beginning of JavaScript -
if (document.all) {
        for (i=0;i<=y_slices-1;i++) {
                for (ii=0;ii<=x_slices-1;ii++) {
                    document.write("<div id='span"+spancounter+"' class='spanstyle'>")
                    document.write("</div>")
                        spancounter++
                }
        }
}

if (document.layers) {
        document.write("<div id='imgcontainer1' class='spanstyle'>")
        document.write("</div>")
        document.close()
        document.imgcontainer1.left=x_finalpos
        document.imgcontainer1.top=y_finalpos       
}
// - End of JavaScript - -->
</SCRIPT>
</BODY>

---

JavaScript Spotlight - JavaScript Validate E-Mail - AJAX Page Content Loader

Just a neat little trick, cool cursors mouse, a display of date/time around the animated mouse.... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

http://www.javascriptbank.com/javasc...ock-cursor.jpg
Demo: JavaScript Trailing Clock Cursor

How to setup

Step 1: Place JavaScript below in your HEAD section
JavaScript

Code:

---

<SCRIPT>
dCol='BLUE';//date colour.
fCol='RED';//face colour.
sCol='BLUE';//seconds colour.
mCol='BLUE';//minutes colour.
hCol='RED';//hours colour.
ClockHeight=40;
ClockWidth=40;
ClockFromMouseY=0;
ClockFromMouseX=100;

//Alter nothing below! Alignments will be lost!

d=new Array("SUNDAY","MONDAY","TUESDAY","WEDNESDAY","THURSDAY","FRIDAY","SATURDAY");
m=new Array("JANUARY","FEBRUARY","MARCH","APRIL","MAY","JUNE","JULY","AUGUST","SEPTEMBER","OCTOBER","NOVEMBER","DECEMBER");
date=new Date();
day=date.getDate();
year=date.getYear();
if (year < 2000) year=year+1900;
TodaysDate=" "+d[date.getDay()]+" "+day+" "+m[date.getMonth()]+" "+year;
D=TodaysDate.split('');
H='...';
H=H.split('');
M='....';
M=M.split('');
S='.....';
S=S.split('');
Face='1 2 3 4 5 6 7 8 9 10 11 12';
font='Arial';
size=1;
speed=0.6; //dieu chinh toc do di chuyen theo mouse
ns=(document.layers);
ie=(document.all);
Face=Face.split(' ');
n=Face.length;
a=size*10;
ymouse=0;
xmouse=0;
scrll=0;
props="<font face="+font+" size="+size+" color="+fCol+"><B>";
props2="<font face="+font+" size="+size+" color="+dCol+"><B>";
Split=360/n;
Dsplit=360/D.length;
HandHeight=ClockHeight/4.5
HandWidth=ClockWidth/4.5
HandY=-7; //di chuyen vi tri kim theo chieu doc
HandX=-2.5; // di chuyen vi tri kim theo chieu ngang
scrll=0;
step=0.06; // dieu chinh toc do xoay cua vong ngay thang, so cang nho toc do cang cham, 0: khong xoay
currStep=0; //xoay diem dat cua vong ngay thang
y=new Array();x=new Array();Y=new Array();X=new Array();
for (i=0; i < n; i++){y[i]=0;x[i]=0;Y[i]=0;X[i]=0}
Dy=new Array();Dx=new Array();DY=new Array();DX=new Array();
for (i=0; i < D.length; i++){Dy[i]=0;Dx[i]=0;DY[i]=0;DX[i]=0}
if (ns){
for (i=0; i < D.length; i++)
document.write('<layer name="nsDate'+i+'" top=0 left=0 height='+a+' width='+a+'><center>'+props2+D[i]+'</font></center></layer>');
for (i=0; i < n; i++)
document.write('<layer name="nsFace'+i+'" top=0 left=0 height='+a+' width='+a+'><center>'+props+Face[i]+'</font></center></layer>');
for (i=0; i < S.length; i++)
document.write('<layer name=nsSeconds'+i+' top=0 left=0 width=15 height=15><font face=Arial size=3 color='+sCol+'><center><b>'+S[i]+'</b></center></font></layer>');
for (i=0; i < M.length; i++)
document.write('<layer name=nsMinutes'+i+' top=0 left=0 width=15 height=15><font face=Arial size=3 color='+mCol+'><center><b>'+M[i]+'</b></center></font></layer>');
for (i=0; i < H.length; i++)
document.write('<layer name=nsHours'+i+' top=0 left=0 width=15 height=15><font face=Arial size=3 color='+hCol+'><center><b>'+H[i]+'</b></center></font></layer>');
}
if (ie){
document.write('<div id="Od" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < D.length; i++)
document.write('<div id="ieDate" style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center">'+props2+D[i]+'</B></font></div>');
document.write('</div></div>');
document.write('<div id="Of" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < n; i++)
document.write('<div id="ieFace" style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center">'+props+Face[i]+'</B></font></div>');
document.write('</div></div>');
document.write('<div id="Oh" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < H.length; i++)
document.write('<div id="ieHours" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:'+hCol+';text-align:center;font-weight:bold">'+H[i]+'</div>');
document.write('</div></div>');
document.write('<div id="Om" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < M.length; i++)
document.write('<div id="ieMinutes" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:'+mCol+';text-align:center;font-weight:bold">'+M[i]+'</div>');
document.write('</div></div>')
document.write('<div id="Os" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < S.length; i++)
document.write('<div id="ieSeconds" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:'+sCol+';text-align:center;font-weight:bold">'+S[i]+'</div>');
document.write('</div></div>')
}
(ns)?window.captureEvents(Event.MOUSEMOVE):0;
function Mouse(evnt){
ymouse = (ns)?evnt.pageY+ClockFromMouseY-(window.pageYOffset):event.y+ClockFromMouseY;
xmouse = (ns)?evnt.pageX+ClockFromMouseX:event.x+ClockFromMouseX;
}
(ns)?window.onMouseMove=Mouse:document.onmousemove=Mouse;
function ClockAndAssign(){
time = new Date ();
secs = time.getSeconds();
sec = -1.57 + Math.PI * secs/30;
mins = time.getMinutes();
min = -1.57 + Math.PI * mins/30;
hr = time.getHours();
hrs = -1.575 + Math.PI * hr/6+Math.PI*parseInt(time.getMinutes())/360;
if (ie){
Od.style.top=window.document.body.scrollTop;
Of.style.top=window.document.body.scrollTop;
Oh.style.top=window.document.body.scrollTop;
Om.style.top=window.document.body.scrollTop;
Os.style.top=window.document.body.scrollTop;
}
for (i=0; i < n; i++){
 var F=(ns)?document.layers['nsFace'+i]:ieFace[i].style;
 F.top=y[i] + ClockHeight*Math.sin(-1.0471 + i*Split*Math.PI/180)+scrll;
 F.left=x[i] + ClockWidth*Math.cos(-1.0471 + i*Split*Math.PI/180);
 }
for (i=0; i < H.length; i++){
 var HL=(ns)?document.layers['nsHours'+i]:ieHours[i].style;
 HL.top=y[i]+HandY+(i*HandHeight)*Math.sin(hrs)+scrll;
 HL.left=x[i]+HandX+(i*HandWidth)*Math.cos(hrs);
 }
for (i=0; i < M.length; i++){
 var ML=(ns)?document.layers['nsMinutes'+i]:ieMinutes[i].style;
 ML.top=y[i]+HandY+(i*HandHeight)*Math.sin(min)+scrll;
 ML.left=x[i]+HandX+(i*HandWidth)*Math.cos(min);
 }
for (i=0; i < S.length; i++){
 var SL=(ns)?document.layers['nsSeconds'+i]:ieSeconds[i].style;
 SL.top=y[i]+HandY+(i*HandHeight)*Math.sin(sec)+scrll;
 SL.left=x[i]+HandX+(i*HandWidth)*Math.cos(sec);
 }
for (i=0; i < D.length; i++){
 var DL=(ns)?document.layers['nsDate'+i]:ieDate[i].style;
 DL.top=Dy[i] + ClockHeight*1.5*Math.sin(currStep+i*Dsplit*Math.PI/180)+scrll;
 DL.left=Dx[i] + ClockWidth*1.5*Math.cos(currStep+i*Dsplit*Math.PI/180);
 }
currStep-=step;
}
function Delay(){
scrll=(ns)?window.pageYOffset:0;
Dy[0]=Math.round(DY[0]+=((ymouse)-DY[0])*speed);
Dx[0]=Math.round(DX[0]+=((xmouse)-DX[0])*speed);
for (i=1; i < D.length; i++){
Dy[i]=Math.round(DY[i]+=(Dy[i-1]-DY[i])*speed);
Dx[i]=Math.round(DX[i]+=(Dx[i-1]-DX[i])*speed);
}
y[0]=Math.round(Y[0]+=((ymouse)-Y[0])*speed);
x[0]=Math.round(X[0]+=((xmouse)-X[0])*speed);
for (i=1; i < n; i++){
y[i]=Math.round(Y[i]+=(y[i-1]-Y[i])*speed);
x[i]=Math.round(X[i]+=(x[i-1]-X[i])*speed);
}
ClockAndAssign();
setTimeout('Delay()',20);
}
if (ns||ie)window.onload=Delay;

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

---

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

It'll be very easy to view the type of this notification if you're using <i>GMail</i> one the web based environment. Today, the author of this post guides you to build a simple application for display... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

http://www.javascriptbank.com/javasc...ith-jquery.jpg
Demo: JavaScript How to create AJAX Notifications with jQuery

How to setup

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