JavaScript library

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: Copy & Paste JavaScript code 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: Copy & Paste HTML code 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: Download files below
Files
coolclock.js
excanvas.js
moreskins.js

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

This JavaScript will display the DHTML submenus when visitors move mouse over the parent dyna... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

http://www.javascriptbank.com/javasc...nmouseover.jpg
Demo: JavaScript Dynamic DHTML SubMenus onMouseover

How to setup

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

Code:

---

<script type='text/javascript'>

function Go(){return}

</script>
<script type='text/javascript'>

        var NoOffFirstLineMenus=5;                        // Number of first level items
        var LowBgColor='white';                        // Background color when mouse is not over
        var LowSubBgColor='white';                        // Background color when mouse is not over on subs
        var HighBgColor='black';                        // Background color when mouse is over
        var HighSubBgColor='black';                        // Background color when mouse is over on subs
        var FontLowColor='black';                        // Font color when mouse is not over
        var FontSubLowColor='black';                        // Font color subs when mouse is not over
        var FontHighColor='white';                        // Font color when mouse is over
        var FontSubHighColor='white';                        // Font color subs when mouse is over
        var BorderColor='black';                        // Border color
        var BorderSubColor='black';                        // Border color for subs
        var BorderWidth=1;                                // Border width
        var BorderBtwnElmnts=1;                        // Border between elements 1 or 0
        var FontFamily="arial,comic sans ms,technical"        // Font family menu items
        var FontSize=9;                                // Font size menu items
        var FontBold=1;                                // Bold menu items 1 or 0
        var FontItalic=0;                                // Italic menu items 1 or 0
        var MenuTextCentered='left';                        // Item text position 'left', 'center' or 'right'
        var MenuCentered='left';                        // Menu horizontal position 'left', 'center' or 'right'
        var MenuVerticalCentered='top';                // Menu vertical position 'top', 'middle','bottom' or static
        var ChildOverlap=.2;                                // horizontal overlap child/ parent
        var ChildVerticalOverlap=.2;                        // vertical overlap child/ parent
        var StartTop=240;                                // Menu offset x coordinate
        var StartLeft=1;                                // Menu offset y coordinate
        var VerCorrect=0;                                // Multiple frames y correction
        var HorCorrect=0;                                // Multiple frames x correction
        var LeftPaddng=3;                                // Left padding
        var TopPaddng=2;                                // Top padding
        var FirstLineHorizontal=0;                        // SET TO 1 FOR HORIZONTAL MENU, 0 FOR VERTICAL
        var MenuFramesVertical=1;                        // Frames in cols or rows 1 or 0
        var DissapearDelay=1000;                        // delay before menu folds in
        var TakeOverBgColor=1;                        // Menu frame takes over background color subitem frame
        var FirstLineFrame='navig';                        // Frame where first level appears
        var SecLineFrame='space';                        // Frame where sub levels appear
        var DocTargetFrame='space';                        // Frame where target documents appear
        var TargetLoc='';                                // span id for relative positioning
        var HideTop=0;                                // Hide first level when loading new document 1 or 0
        var MenuWrap=1;                                // enables/ disables menu wrap 1 or 0
        var RightToLeft=0;                                // enables/ disables right to left unfold 1 or 0
        var UnfoldsOnClick=0;                        // Level 1 unfolds onclick/ onmouseover
        var WebMasterCheck=0;                        // menu tree checking on or off 1 or 0
        var ShowArrow=1;                                // Uses arrow gifs when 1
        var KeepHilite=1;                                // Keep selected path highligthed
        var Arrws=['tri.gif',5,10,'tridown.gif',10,5,'trileft.gif',5,10];        // Arrow source, width and height

function BeforeStart(){return}
function AfterBuild(){return}
function BeforeFirstOpen(){return}
function AfterCloseAll(){return}


// Menu tree
//        MenuX=new Array(Text to show, Link, background image (optional), number of sub elements, height, width);
//        For rollover images set "Text to show" to:  "rollover:Image1.jpg:Image2.jpg"

Menu1=new Array("Home","http://jsbank.topcities.com","",0,20,138);

Menu2=new Array("News","blank.htm","",2);
        Menu2_1=new Array("General","blank.htm","",5,20,150);       
                Menu2_1_1=new Array("CNN","http://www.cnn.com","",0,20,150);
                Menu2_1_2=new Array("ABCNews","http://www.abcnews.com","",0);
                Menu2_1_3=new Array("MSNBC","http://www.msnbc.com","",0);
                Menu2_1_4=new Array("CBSNews","http://www.cbsnews.com","",0);
                Menu2_1_5=new Array("Canadian News","http://news.bbc.co.uk","",2);
                          Menu2_1_5_1=new Array("Vancouver Sun","http://www.vancouversun.com","",0,20,150);
                          Menu2_1_5_2=new Array("CTV News","http://www.ctvnews.com","",0);
        Menu2_2=new Array("Technology","blank.htm","",3);
                Menu2_2_1=new Array("TechWeb","http://www.techweb.com","",0,20,200);
                Menu2_2_2=new Array("News.com","http://www.news.com","",0);
                Menu2_2_3=new Array("Wired News","http://www.wired.com","",0);

Menu3=new Array("Search Engines","blank.htm","",3);
        Menu3_1=new Array("Altavista","http://www.altavista.com","",0,20,150);
        Menu3_2=new Array("Google","http://www.google.com","",0);
        Menu3_3=new Array("Yahoo","http://www.yahoo.com","",0);

Menu4=new Array("Webmaster","blank.htm","",4);
        Menu4_1=new Array("JSBank","http://jsbank.topcities.com","",0,20,180);
        Menu4_2=new Array("JavaScript Kit","http://jsbank.topcities.com","",0);
        Menu4_3=new Array("Freewarejava","http://www.freewarejava.com","",0);
        Menu4_4=new Array("Web Review","http://www.webreview.com","",0);

Menu5=new Array("Other","javascript:top.location.href='blank.htm'","",1);
        Menu5_1=new Array("Author's Site","http://www.burmees.nl/","",0,20,140);</script>
<script type='text/javascript'>
        var AgntUsr=navigator.userAgent.toLowerCase();
        var AppVer=navigator.appVersion.toLowerCase();
        var DomYes=document.getElementById?1:0;
        var NavYes=AgntUsr.indexOf('mozilla')!=-1&&AgntUsr.indexOf('compatible')==-1?1:0;
        var ExpYes=AgntUsr.indexOf('msie')!=-1?1:0;
        var Opr=AgntUsr.indexOf('opera')!=-1?1:0;
        var Opr6orless=window.opera && navigator.userAgent.search(/opera.[1-6]/i)!=-1
        if(Opr){NavYes=1;ExpYes=0;}
        var DomNav=DomYes&&NavYes?1:0;
        var DomExp=DomYes&&ExpYes?1:0;
        var Nav4=NavYes&&!DomYes&&document.layers?1:0;
        var Exp4=ExpYes&&!DomYes&&document.all?1:0;
        var Exp6Plus=(AppVer.indexOf("msie 6")!= -1||AppVer.indexOf("msie 7")!= -1)?1:0
        var PosStrt=(NavYes||ExpYes||Opr)&&!Opr6orless?1:0;
        var P_X=DomYes?"px":"",FHtml=null,ScHtml=null,FCmplnt=0,SCmplnt=0;
        var FrstLoc,ScLoc,DcLoc;
        var ScWinWdth,ScWinHght,FrstWinWdth,FrstWinHght;
        var ScLdAgainWin;
        var FirstColPos,SecColPos,DocColPos;
        var RcrsLvl=0;
        var FrstCreat=1,Loadd=0,Creatd=0,IniFlg,AcrssFrms=1;
        var FrstCntnr=null,CurrntOvr=null,CloseTmr=null;
        var CntrTxt,TxtClose,ImgStr;
        var Ztop=100;
        var ShwFlg=0;
        var M_StrtTp=StartTop,M_StrtLft=StartLeft;
        var StaticPos=0;
        var M_Hide=Nav4?'hide':'hidden';
        var M_Show=Nav4?'show':'visible';
        var Par=parent.frames[0]&&FirstLineFrame!=SecLineFrame?parent:window;
        var Doc=Par.document;
        var Bod=Doc.body;
        var Trigger=NavYes&&!Opr?Par:Bod;

        MenuTextCentered=MenuTextCentered==1||MenuTextCentered=='center'?'center':MenuTextCentered==0||MenuTextCentered!='right'?'left':'right';

        WbMstrAlrts=["Item not defined: ","Item needs height: ","Item needs width: "];

        if(Trigger.onload)Dummy=Trigger.onload;
        Trigger.onload=Go;

function Dummy(){return}

function CnclSlct(){return false}

function RePos(){
        FrstWinWdth=ExpYes?FCmplnt?FHtml.clientWidth:FrstLoc.document.body.clientWidth:FrstLoc.innerWidth;
        FrstWinHght=ExpYes?FCmplnt?FHtml.clientHeight:FrstLoc.document.body.clientHeight:FrstLoc.innerHeight;
        ScWinWdth=ExpYes?SCmplnt?ScHtml.clientWidth:ScLoc.document.body.clientWidth:ScLoc.innerWidth;
        ScWinHght=ExpYes?SCmplnt?ScHtml.clientHeight:ScLoc.document.body.clientHeight:ScLoc.innerHeight;
        if(MenuCentered=='justify'&&FirstLineHorizontal){
                FrstCntnr.style.width=FrstWinWdth+P_X;
                var LftXtra=(DomNav&&!Opr)||FCmplnt?LeftPaddng:0;
                ClcJus();
                var P=FrstCntnr.FrstMbr,W=Menu1[5],i;
                for(i=0;i<NoOffFirstLineMenus;i++){P.style.width=W+P_X;P=P.PrvMbr}}
        StaticPos=-1;
        if(TargetLoc)ClcTrgt();
        if(MenuCentered)ClcLft();
        if(MenuVerticalCentered)ClcTp();
        PosMenu(FrstCntnr,StartTop,StartLeft)}

function UnLoaded(){
        if(CloseTmr)clearTimeout(CloseTmr);
        Loadd=0; Creatd=0;
        if(HideTop){
                var FCStyle=Nav4?FrstCntnr:FrstCntnr.style;
                FCStyle.visibility=M_Hide}}

function ReDoWhole(){
        if(ScWinWdth!=ScLoc.innerWidth||ScWinHght!=ScLoc.innerHeight||FrstWinWdth!=FrstLoc.innerWidth||FrstWinHght!=FrstLoc.innerHeight)Doc.location.reload()}

function Check(WMnu,NoOf){
        var i,array,ArrayLoc;
        ArrayLoc=parent.frames[0]?parent.frames[FirstLineFrame]:self;
        for(i=0;i<NoOf;i++){
                array=WMnu+eval(i+1);
                if(!ArrayLoc[array]){WbMstrAlrt(0,array); return false}
                if(i==0){        if(!ArrayLoc[array][4]){WbMstrAlrt(1,array); return false}
                        if(!ArrayLoc[array][5]){WbMstrAlrt(2,array); return false}}
                if(ArrayLoc[array][3])if(!Check(array+'_',ArrayLoc[array][3])) return false}
        return true}

function WbMstrAlrt(No,Xtra){
        return confirm(WbMstrAlrts[No]+Xtra+'  ')}

function Go(){
        Dummy();
        if(Loadd||!PosStrt)return;
        BeforeStart();
        Creatd=0; Loadd=1;
        status='Building menu';
        if(FirstLineFrame =="" || !parent.frames[FirstLineFrame]){
                FirstLineFrame=SecLineFrame;
                if(FirstLineFrame =="" || !parent.frames[FirstLineFrame]){
                        FirstLineFrame=SecLineFrame=DocTargetFrame;
                        if(FirstLineFrame =="" || !parent.frames[FirstLineFrame])FirstLineFrame=SecLineFrame=DocTargetFrame=''}}
        if(SecLineFrame =="" || !parent.frames[SecLineFrame]){
                SecLineFrame=DocTargetFrame;
                if(SecLineFrame =="" || !parent.frames[SecLineFrame])SecLineFrame=DocTargetFrame=FirstLineFrame}
        if(DocTargetFrame =="" || !parent.frames[DocTargetFrame])DocTargetFrame=SecLineFrame;
        if(WebMasterCheck){        if(!Check('Menu',NoOffFirstLineMenus)){status='build aborted';return}}
        FrstLoc=FirstLineFrame!=""?parent.frames[FirstLineFrame]:window;
        ScLoc=SecLineFrame!=""?parent.frames[SecLineFrame]:window;
        DcLoc=DocTargetFrame!=""?parent.frames[DocTargetFrame]:window;
        if (FrstLoc==ScLoc) AcrssFrms=0;
        if (AcrssFrms)FirstLineHorizontal=MenuFramesVertical?0:1;
        if(Exp6Plus||Opr){
                FHtml=FrstLoc.document.getElementsByTagName("HTML")[0];ScHtml=ScLoc.document.getElementsByTagName("HTML")[0];
                FCmplnt=FrstLoc.document.compatMode.indexOf("CSS")==-1?0:1;SCmplnt=ScLoc.document.compatMode.indexOf("CSS")==-1?0:1}
        FrstWinWdth=ExpYes?FCmplnt?FHtml.clientWidth:FrstLoc.document.body.clientWidth:FrstLoc.innerWidth;
        FrstWinHght=ExpYes?FCmplnt?FHtml.clientHeight:FrstLoc.document.body.clientHeight:FrstLoc.innerHeight;
        ScWinWdth=ExpYes?SCmplnt?ScHtml.clientWidth:ScLoc.document.body.clientWidth:ScLoc.innerWidth;
        ScWinHght=ExpYes?SCmplnt?ScHtml.clientHeight:ScLoc.document.body.clientHeight:ScLoc.innerHeight;
        if(Nav4){        CntrTxt=MenuTextCentered!='left'?"<div align='"+MenuTextCentered+"'>":"";
                TxtClose="</font>"+MenuTextCentered!='left'?"</div>":""}
        FirstColPos=Nav4?FrstLoc.document:FrstLoc.document.body;
        SecColPos=Nav4?ScLoc.document:ScLoc.document.body;
        DocColPos=Nav4?DcLoc.document:ScLoc.document.body;
        if (TakeOverBgColor)FirstColPos.bgColor=AcrssFrms?SecColPos.bgColor:DocColPos.bgColor;
        if(MenuCentered=='justify'&&FirstLineHorizontal)ClcJus();
        if(FrstCreat){
                FrstCntnr=CreateMenuStructure('Menu',NoOffFirstLineMenus);
                FrstCreat=AcrssFrms?0:1}
        else CreateMenuStructureAgain('Menu',NoOffFirstLineMenus);
        if(TargetLoc)ClcTrgt();
        if(MenuCentered)ClcLft();
        if(MenuVerticalCentered)ClcTp();
        PosMenu(FrstCntnr,StartTop,StartLeft);
        IniFlg=1;
        Initiate();
        Creatd=1;
        if (AcrssFrms){
                ScLdAgainWin=ExpYes?ScLoc.document.body:ScLoc;
                ScLdAgainWin.onunload=UnLoaded}
        Trigger.onresize=Nav4?ReDoWhole:RePos;
        AfterBuild();
        if(MenuVerticalCentered=='static'&&!AcrssFrms)setInterval('KeepPos()',250);
        status='Menu ready for use'}

function KeepPos(){
        var TS=ExpYes?SCmplnt?ScHtml.scrollTop:FrstLoc.document.body.scrollTop:FrstLoc.pageYOffset;
        if(TS!=StaticPos){
                var FCStyle=Nav4?FrstCntnr:FrstCntnr.style;
                FrstCntnr.OrgTop=StartTop+TS;StaticPos=TS;
                FCStyle.top=FrstCntnr.OrgTop+P_X}}

function ClcJus(){
        var a=BorderBtwnElmnts?1:2,b=BorderBtwnElmnts?BorderWidth:0;
        var Size=Math.round(((FrstWinWdth-a*BorderWidth)/NoOffFirstLineMenus)-b),i,j;
        for(i=1;i<NoOffFirstLineMenus+1;i++){j=eval('Menu'+i);j[5]=Size}
        StartLeft=0}

function ClcTrgt(){
        var TLoc=Nav4?FrstLoc.document.layers[TargetLoc]:DomYes?FrstLoc.document.getElementById(TargetLoc):FrstLoc.document.all[TargetLoc];
        StartTop=M_StrtTp;
        StartLeft=M_StrtLft;
        if(DomYes){
                while(TLoc){StartTop+=TLoc.offsetTop;StartLeft+=TLoc.offsetLeft;TLoc=TLoc.offsetParent}}
        else{        StartTop+=Nav4?TLoc.pageY:TLoc.offsetTop;StartLeft+=Nav4?TLoc.pageX:TLoc.offsetLeft}}

function ClcLft(){
        if(MenuCentered!='left'&&MenuCentered!='justify'){
                var Size=FrstWinWdth-(!Nav4?parseInt(FrstCntnr.style.width):FrstCntnr.clip.width);
                StartLeft=M_StrtLft;
                StartLeft+=MenuCentered=='right'?Size:Size/2}}

function ClcTp(){
        if(MenuVerticalCentered!='top'&&MenuVerticalCentered!='static'){
                var Size=FrstWinHght-(!Nav4?parseInt(FrstCntnr.style.height):FrstCntnr.clip.height);
                StartTop=M_StrtTp;
                StartTop+=MenuVerticalCentered=='bottom'?Size:Size/2}}

function PosMenu(CntnrPntr,Tp,Lt){
        RcrsLvl++;
        var Cmplnt=RcrsLvl==1?FCmplnt:SCmplnt;
        var LftXtra=(DomNav&&!Opr)||Cmplnt?LeftPaddng:0;
        var TpXtra=(DomNav&&!Opr)||Cmplnt?TopPaddng:0;
        var Topi,Lefti,Hori;
        var Cntnr=CntnrPntr;
        var Mmbr=Cntnr.FrstMbr;
        var CntnrStyle=!Nav4?Cntnr.style:Cntnr;
        var MmbrStyle=!Nav4?Mmbr.style:Mmbr;
        var PadL=Mmbr.value.indexOf('<')==-1?LftXtra:0;
        var PadT=Mmbr.value.indexOf('<')==-1?TpXtra:0;
        var MmbrWt=!Nav4?parseInt(MmbrStyle.width)+PadL:MmbrStyle.clip.width;
        var MmbrHt=!Nav4?parseInt(MmbrStyle.height)+PadT:MmbrStyle.clip.height;
        var CntnrWt=!Nav4?parseInt(CntnrStyle.width):CntnrStyle.clip.width;
        var CntnrHt=!Nav4?parseInt(CntnrStyle.height):CntnrStyle.clip.height;
        var SubTp,SubLt;
        if (RcrsLvl==1 && AcrssFrms)!MenuFramesVertical?Tp=FrstWinHght-CntnrHt+(Nav4?4:0):Lt=RightToLeft?0:FrstWinWdth-CntnrWt+(Nav4?4:0);
        if (RcrsLvl==2 && AcrssFrms)!MenuFramesVertical?Tp=0:Lt=RightToLeft?ScWinWdth-CntnrWt:0;
        if (RcrsLvl==2 && AcrssFrms){Tp+=VerCorrect;Lt+=HorCorrect}
        CntnrStyle.top=RcrsLvl==1?Tp+P_X:0;
        Cntnr.OrgTop=Tp;
        CntnrStyle.left=RcrsLvl==1?Lt+P_X:0;
        Cntnr.OrgLeft=Lt;
        if (RcrsLvl==1 && FirstLineHorizontal){
                Hori=1;Lefti=CntnrWt-MmbrWt-2*BorderWidth;Topi=0}
        else{        Hori=Lefti=0;Topi=CntnrHt-MmbrHt-2*BorderWidth}
        while(Mmbr!=null){
                MmbrStyle.left=Lefti+BorderWidth+P_X;
                MmbrStyle.top=Topi+BorderWidth+P_X;
                if(Nav4)Mmbr.CmdLyr.moveTo(Lefti+BorderWidth,Topi+BorderWidth);
                if(Mmbr.ChildCntnr){
                        if(RightToLeft)ChldCntnrWdth=Nav4?Mmbr.ChildCntnr.clip.width:parseInt(Mmbr.ChildCntnr.style.width);
                        if(Hori){        SubTp=Topi+MmbrHt+2*BorderWidth;
                                SubLt=RightToLeft?Lefti+MmbrWt-ChldCntnrWdth:Lefti}
                        else{        SubLt=RightToLeft?Lefti-ChldCntnrWdth+ChildOverlap*MmbrWt+BorderWidth:Lefti+(1-ChildOverlap)*MmbrWt+BorderWidth;
                                SubTp=RcrsLvl==1&&AcrssFrms?Topi:Topi+ChildVerticalOverlap*MmbrHt}
                        PosMenu(Mmbr.ChildCntnr,SubTp,SubLt)}
                Mmbr=Mmbr.PrvMbr;
                if(Mmbr){        MmbrStyle=!Nav4?Mmbr.style:Mmbr;
                        PadL=Mmbr.value.indexOf('<')==-1?LftXtra:0;
                        PadT=Mmbr.value.indexOf('<')==-1?TpXtra:0;
                        MmbrWt=!Nav4?parseInt(MmbrStyle.width)+PadL:MmbrStyle.clip.width;
                        MmbrHt=!Nav4?parseInt(MmbrStyle.height)+PadT:MmbrStyle.clip.height;
                        Hori?Lefti-=BorderBtwnElmnts?(MmbrWt+BorderWidth):(MmbrWt):Topi-=BorderBtwnElmnts?(MmbrHt+BorderWidth):(MmbrHt)}}
        RcrsLvl--}

function Initiate(){
        if(IniFlg){        Init(FrstCntnr);IniFlg=0;
                if(ShwFlg)AfterCloseAll();ShwFlg=0}}

function Init(CntnrPntr){
        var Mmbr=CntnrPntr.FrstMbr;
        var MCStyle=Nav4?CntnrPntr:CntnrPntr.style;
        RcrsLvl++;
        MCStyle.visibility=RcrsLvl==1?M_Show:M_Hide;
        while(Mmbr!=null){
                if(Mmbr.Hilite){Mmbr.Hilite=0;if(KeepHilite)LowItem(Mmbr)}
                if(Mmbr.ChildCntnr) Init(Mmbr.ChildCntnr);
                Mmbr=Mmbr.PrvMbr}
        RcrsLvl--}

function ClearAllChilds(Pntr){
        var CPCCStyle;
        while (Pntr){
                if(Pntr.Hilite){
                        Pntr.Hilite=0;
                        if(KeepHilite)LowItem(Pntr);
                        if(Pntr.ChildCntnr){
                                CPCCStyle=Nav4?Pntr.ChildCntnr:Pntr.ChildCntnr.style;
                                CPCCStyle.visibility=M_Hide;
                                ClearAllChilds(Pntr.ChildCntnr.FrstMbr)}
                        break}
                Pntr=Pntr.PrvMbr}}

function GoTo(){
        if(this.LinkTxt){
                status='';
                var HP=Nav4?this.LowLyr:this;
                LowItem(HP);
                this.LinkTxt.indexOf('javascript:')!=-1?eval(this.LinkTxt):DcLoc.location.href=this.LinkTxt}}

function HiliteItem(P){
        if(Nav4){
                if(P.ro)P.document.images[P.rid].src=P.ri2;
                else{        if(P.HiBck)P.bgColor=P.HiBck;
                        if(P.value.indexOf('<img')==-1){
                                P.document.write(P.Ovalue);
                                P.document.close()}}}
        else{        if(P.ro){        var Lc=P.Level==1?FrstLoc:ScLoc;
                        Lc.document.images[P.rid].src=P.ri2}
                else{        if(P.HiBck)P.style.backgroundColor=P.HiBck;
                        if(P.HiFntClr)P.style.color=P.HiFntClr}}
        P.Hilite=1}

function LowItem(P){
        if(P.ro){        if(Nav4)P.document.images[P.rid].src=P.ri1;
                else{        var Lc=P.Level==1?FrstLoc:ScLoc;
                        Lc.document.images[P.rid].src=P.ri1}}
        else{        if(Nav4){        if(P.LoBck)P.bgColor=P.LoBck;
                        if(P.value.indexOf('<img')==-1){
                                P.document.write(P.value);
                                P.document.close()}}
                else{        if(P.LoBck)P.style.backgroundColor=P.LoBck;
                        if(P.LwFntClr)P.style.color=P.LwFntClr}}}

function OpenMenu(){       
        if(!Loadd||!Creatd) return;
        var TpScrlld=ExpYes?SCmplnt?ScHtml.scrollTop:ScLoc.document.body.scrollTop:ScLoc.pageYOffset;
        var LScrlld=ExpYes?SCmplnt?ScHtml.scrollLeft:ScLoc.document.body.scrollLeft:ScLoc.pageXOffset;
        var CCnt=Nav4?this.LowLyr.ChildCntnr:this.ChildCntnr;
        var ThisHt=Nav4?this.clip.height:parseInt(this.style.height);
        var ThisWt=Nav4?this.clip.width:parseInt(this.style.width);
        var ThisLft=AcrssFrms&&this.Level==1&&!FirstLineHorizontal?0:Nav4?this.Container.left:parseInt(this.Container.style.left);
        var ThisTp=AcrssFrms&&this.Level==1&&FirstLineHorizontal?0:Nav4?this.Container.top:parseInt(this.Container.style.top);
        var HP=Nav4?this.LowLyr:this;
        CurrntOvr=this;
        IniFlg=0;
        ClearAllChilds(this.Container.FrstMbr);
        HiliteItem(HP);
        if(CCnt!=null){
                if(!ShwFlg){ShwFlg=1;        BeforeFirstOpen()}
                var CCW=Nav4?this.LowLyr.ChildCntnr.clip.width:parseInt(this.ChildCntnr.style.width);
                var CCH=Nav4?this.LowLyr.ChildCntnr.clip.height:parseInt(this.ChildCntnr.style.height);
                var ChCntTL=Nav4?this.LowLyr.ChildCntnr:this.ChildCntnr.style;
                var SubLt=AcrssFrms&&this.Level==1?CCnt.OrgLeft+ThisLft+LScrlld:CCnt.OrgLeft+ThisLft;
                var SubTp=AcrssFrms&&this.Level==1?CCnt.OrgTop+ThisTp+TpScrlld:CCnt.OrgTop+ThisTp;
                if(MenuWrap){
                        if(RightToLeft){
                                if(SubLt<LScrlld)SubLt=this.Level==1?LScrlld:SubLt+(CCW+(1-2*ChildOverlap)*ThisWt);
                                if(SubLt+CCW>ScWinWdth+LScrlld)SubLt=ScWinWdth+LScrlld-CCW}
                        else{        if(SubLt+CCW>ScWinWdth+LScrlld)SubLt=this.Level==1?ScWinWdth+LScrlld-CCW:SubLt-(CCW+(1-2*ChildOverlap)*ThisWt);
                                if(SubLt<LScrlld)SubLt=LScrlld}
                        if(SubTp+CCH>TpScrlld+ScWinHght)SubTp=this.Level==1?SubTp=TpScrlld+ScWinHght-CCH:SubTp-CCH+(1-2*ChildVerticalOverlap)*ThisHt;
                        if(SubTp<TpScrlld)SubTp=TpScrlld}
                ChCntTL.top=SubTp+P_X;ChCntTL.left=SubLt+P_X;ChCntTL.visibility=M_Show}
        status=this.LinkTxt}

function OpenMenuClick(){
        if(!Loadd||!Creatd) return;
        var HP=Nav4?this.LowLyr:this;
        CurrntOvr=this;
        IniFlg=0;
        ClearAllChilds(this.Container.FrstMbr);
        HiliteItem(HP);
        status=this.LinkTxt}

function CloseMenu(){
        if(!Loadd||!Creatd) return;
        if(!KeepHilite){
                var HP=Nav4?this.LowLyr:this;
                LowItem(HP)}
        status='';
        if(this==CurrntOvr){
                IniFlg=1;
                if(CloseTmr)clearTimeout(CloseTmr);
                CloseTmr=setTimeout('Initiate(CurrntOvr)',DissapearDelay)}}

function CntnrSetUp(Wdth,Hght,NoOff){
        var x=RcrsLvl==1?BorderColor:BorderSubColor;
        this.FrstMbr=null;
        this.OrgLeft=this.OrgTop=0;
        if(x)this.bgColor=x;
        if(Nav4){        this.visibility='hide';
                this.resizeTo(Wdth,Hght)}
        else{        if(x)this.style.backgroundColor=x;
                this.style.width=Wdth+P_X;
                this.style.height=Hght+P_X;
                this.style.fontFamily=FontFamily;
                this.style.fontWeight=FontBold?'bold':'normal';
                this.style.fontStyle=FontItalic?'italic':'normal';
                this.style.fontSize=FontSize+'pt';
                this.style.zIndex=RcrsLvl+Ztop}}

function MbrSetUp(MmbrCntnr,PrMmbr,WhatMenu,Wdth,Hght){
        var Location=RcrsLvl==1?FrstLoc:ScLoc;
        var MemVal=eval(WhatMenu+'[0]');
        var t,T,L,W,H,S;
        var a,b,c,d;
        var Cmplnt=RcrsLvl==1?FCmplnt:SCmplnt;
        var LftXtra=(DomNav&&!Opr)||Cmplnt?LeftPaddng:0;
        var TpXtra=(DomNav&&!Opr)||Cmplnt?TopPaddng:0;
        this.PrvMbr=PrMmbr;
        this.Level=RcrsLvl;
        this.LinkTxt=eval(WhatMenu+'[1]');
        this.Container=MmbrCntnr;
        this.ChildCntnr=null;
        this.Hilite=0;
        this.style.overflow='hidden';
        this.style.cursor=ExpYes&&(this.LinkTxt||(RcrsLvl==1&&UnfoldsOnClick))?'hand':'default';
        this.ro=0;
        if(MemVal.indexOf('rollover')!=-1){
                this.ro=1;
                this.ri1=MemVal.substring(MemVal.indexOf(':')+1,MemVal.lastIndexOf(':'));
                this.ri2=MemVal.substring(MemVal.lastIndexOf(':')+1,MemVal.length);
                this.rid=WhatMenu+'i';
                MemVal="<img src=""+this.ri1+"" name=""+this.rid+"" width=""+Wdth+"" height=""+Hght+"">"}
        this.value=MemVal;
        if(RcrsLvl==1){
                a=LowBgColor;
                b=HighBgColor;
                c=FontLowColor;
                d=FontHighColor}
        else{        a=LowSubBgColor;
                b=HighSubBgColor;
                c=FontSubLowColor;
                d=FontSubHighColor}
        this.LoBck=a;
        this.LwFntClr=c;
        this.HiBck=b;
        this.HiFntClr=d;
        this.style.color=this.LwFntClr;
        if(this.LoBck)this.style.backgroundColor=this.LoBck;
        this.style.textAlign=MenuTextCentered;
        if(eval(WhatMenu+'[2]'))this.style.backgroundImage="url('"+eval(WhatMenu+'[2]')+"')";
        if(MemVal.indexOf('<')==-1){
                this.style.width=Wdth-LftXtra+P_X;
                this.style.height=Hght-TpXtra+P_X;
                this.style.paddingLeft=LeftPaddng+P_X;
                this.style.paddingTop=TopPaddng+P_X}
        else{        this.style.width=Wdth+P_X;
                this.style.height=Hght+P_X}
        if(MemVal.indexOf('<')==-1&&DomYes){
                t=Location.document.createTextNode(MemVal);
                this.appendChild(t)}
        else this.innerHTML=MemVal;
        if(eval(WhatMenu+'[3]')&&ShowArrow){
                a=RcrsLvl==1&&FirstLineHorizontal?3:RightToLeft?6:0;
                S=Arrws[a];
                W=Arrws[a+1];
                H=Arrws[a+2];
                T=RcrsLvl==1&&FirstLineHorizontal?Hght-H-2:(Hght-H)/2;
                L=RightToLeft?2:Wdth-W-2;
                if(DomYes){

                        t=Location.document.createElement('img');
                        this.appendChild(t);
                        t.style.position='absolute';
                        t.src=S;

                        t.style.width=W+P_X;
                        t.style.height=H+P_X;
                        t.style.top=T+P_X;
                        t.style.left=L+P_X}
                else{        MemVal+="<div style='position:absolute; top:"+T+"; left:"+L+"; width:"+W+"; height:"+H+";visibility:inherit'><img src='"+S+"'></div>";
                        this.innerHTML=MemVal}}
        if(ExpYes){this.onselectstart=CnclSlct;
                this.onmouseover=RcrsLvl==1&&UnfoldsOnClick?OpenMenuClick:OpenMenu;
                this.onmouseout=CloseMenu;
                this.onclick=RcrsLvl==1&&UnfoldsOnClick&&eval(WhatMenu+'[3]')?OpenMenu:GoTo        }
        else{        RcrsLvl==1&&UnfoldsOnClick?this.addEventListener('mouseover',OpenMenuClick,false):this.addEventListener('mouseover',OpenMenu,false);
                this.addEventListener('mouseout',CloseMenu,false);
                RcrsLvl==1&&UnfoldsOnClick&&eval(WhatMenu+'[3]')?this.addEventListener('click',OpenMenu,false):this.addEventListener('click',GoTo,false)}}

function NavMbrSetUp(MmbrCntnr,PrMmbr,WhatMenu,Wdth,Hght){
        var a,b,c,d;
        if(RcrsLvl==1){
                a=LowBgColor;
                b=HighBgColor;
                c=FontLowColor;
                d=FontHighColor}
        else {        a=LowSubBgColor;
                b=HighSubBgColor;
                c=FontSubLowColor;
                d=FontSubHighColor        }
        this.value=eval(WhatMenu+'[0]');
        this.ro=0;
        if(this.value.indexOf('rollover')!=-1){
                this.ro=1;
                this.ri1=this.value.substring(this.value.indexOf(':')+1,this.value.lastIndexOf(':'));
                this.ri2=this.value.substring(this.value.lastIndexOf(':')+1,this.value.length);
                this.rid=WhatMenu+'i';this.value="<img src='"+this.ri1+"' name='"+this.rid+"'>"}
        if(LeftPaddng&&this.value.indexOf('<')==-1&&MenuTextCentered=='left')this.value='&nbsp;'+this.value;
        if(FontBold)this.value=this.value.bold();
        if(FontItalic)this.value=this.value.italics();
        this.Ovalue=this.value;
        this.value=this.value.fontcolor(c);
        this.Ovalue=this.Ovalue.fontcolor(d);
        this.value=CntrTxt+"<font face='"+FontFamily+"' point-size='"+FontSize+"'>"+this.value+TxtClose;
        this.Ovalue=CntrTxt+"<font face='"+FontFamily+"' point-size='"+FontSize+"'>"+this.Ovalue+TxtClose;
        this.LoBck=a;
        this.HiBck=b;
        this.ChildCntnr=null;
        this.PrvMbr=PrMmbr;
        this.Hilite=0;
        this.visibility='inherit';
        if(this.LoBck)this.bgColor=this.LoBck;
        this.resizeTo(Wdth,Hght);
        if(!AcrssFrms&&eval(WhatMenu+'[2]'))this.background.src=eval(WhatMenu+'[2]');
        this.document.write(this.value);
        this.document.close();
        this.CmdLyr=new Layer(Wdth,MmbrCntnr);
        this.CmdLyr.Level=RcrsLvl;
        this.CmdLyr.LinkTxt=eval(WhatMenu+'[1]');
        this.CmdLyr.visibility='inherit';
        this.CmdLyr.onmouseover=RcrsLvl==1&&UnfoldsOnClick?OpenMenuClick:OpenMenu;
        this.CmdLyr.onmouseout=CloseMenu;
        this.CmdLyr.captureEvents(Event.MOUSEUP);
        this.CmdLyr.onmouseup=RcrsLvl==1&&UnfoldsOnClick&&eval(WhatMenu+'[3]')?OpenMenu:GoTo;
        this.CmdLyr.LowLyr=this;
        this.CmdLyr.resizeTo(Wdth,Hght);
        this.CmdLyr.Container=MmbrCntnr;
        if(eval(WhatMenu+'[3]')&&ShowArrow){
                a=RcrsLvl==1&&FirstLineHorizontal?3:RightToLeft?6:0;
                this.CmdLyr.ImgLyr=new Layer(Arrws[a+1],this.CmdLyr);
                this.CmdLyr.ImgLyr.visibility='inherit';
                this.CmdLyr.ImgLyr.top=RcrsLvl==1&&FirstLineHorizontal?Hght-Arrws[a+2]-2:(Hght-Arrws[a+2])/2;
                this.CmdLyr.ImgLyr.left=RightToLeft?2:Wdth-Arrws[a+1]-2;
                this.CmdLyr.ImgLyr.width=Arrws[a+1];
                this.CmdLyr.ImgLyr.height=Arrws[a+2];
                ImgStr="<img src='"+Arrws[a]+"' width='"+Arrws[a+1]+"' height='"+Arrws[a+2]+"'>";
                this.CmdLyr.ImgLyr.document.write(ImgStr);
                this.CmdLyr.ImgLyr.document.close()}}

function CreateMenuStructure(MName,NumberOf){
        RcrsLvl++;
        var i,NoOffSubs,Mbr,Wdth=0,Hght=0;
        var PrvMmbr=null;
        var WMnu=MName+'1';
        var MenuWidth=eval(WMnu+'[5]');
        var MenuHeight=eval(WMnu+'[4]');
        var Location=RcrsLvl==1?FrstLoc:ScLoc;
        if (RcrsLvl==1&&FirstLineHorizontal){
                for(i=1;i<NumberOf+1;i++){
                        WMnu=MName+eval(i);
                        Wdth=eval(WMnu+'[5]')?Wdth+eval(WMnu+'[5]'):Wdth+MenuWidth}
                Wdth=BorderBtwnElmnts?Wdth+(NumberOf+1)*BorderWidth:Wdth+2*BorderWidth;Hght=MenuHeight+2*BorderWidth}
        else{        for(i=1;i<NumberOf+1;i++){
                        WMnu=MName+eval(i);
                        Hght=eval(WMnu+'[4]')?Hght+eval(WMnu+'[4]'):Hght+MenuHeight}
                Hght=BorderBtwnElmnts?Hght+(NumberOf+1)*BorderWidth:Hght+2*BorderWidth;Wdth=MenuWidth+2*BorderWidth}
        if(DomYes){
                var MmbrCntnr=Location.document.createElement("div");
                MmbrCntnr.style.position='absolute';
                MmbrCntnr.style.visibility='hidden';
                Location.document.body.appendChild(MmbrCntnr)}
        else{        if(Nav4) var MmbrCntnr=new Layer(Wdth,Location)
                else{        WMnu+='c';
                        Location.document.body.insertAdjacentHTML("AfterBegin","<div id='"+WMnu+"' style='visibility:hidden; position:absolute;'></div>");
                        var MmbrCntnr=Location.document.all[WMnu]}}
        MmbrCntnr.SetUp=CntnrSetUp;
        MmbrCntnr.SetUp(Wdth,Hght,NumberOf);
        if(Exp4){        MmbrCntnr.InnerString='';
                for(i=1;i<NumberOf+1;i++){
                        WMnu=MName+eval(i);
                        MmbrCntnr.InnerString+="<div id='"+WMnu+"' style='position:absolute;'></div>"}
                MmbrCntnr.innerHTML=MmbrCntnr.InnerString}
        for(i=1;i<NumberOf+1;i++){
                WMnu=MName+eval(i);
                NoOffSubs=eval(WMnu+'[3]');
                Wdth=RcrsLvl==1&&FirstLineHorizontal?eval(WMnu+'[5]')?eval(WMnu+'[5]'):MenuWidth:MenuWidth;
                Hght=RcrsLvl==1&&FirstLineHorizontal?MenuHeight:eval(WMnu+'[4]')?eval(WMnu+'[4]'):MenuHeight;
                if(DomYes){
                        Mbr=Location.document.createElement("div");
                        Mbr.style.position='absolute';
                        Mbr.style.visibility='inherit';
                        MmbrCntnr.appendChild(Mbr)}
                else Mbr=Nav4?new Layer(Wdth,MmbrCntnr):Location.document.all[WMnu];
                Mbr.SetUp=Nav4?NavMbrSetUp:MbrSetUp;
                Mbr.SetUp(MmbrCntnr,PrvMmbr,WMnu,Wdth,Hght);
                if(NoOffSubs) Mbr.ChildCntnr=CreateMenuStructure(WMnu+'_',NoOffSubs);
                PrvMmbr=Mbr}
        MmbrCntnr.FrstMbr=Mbr;
        RcrsLvl--;
        return(MmbrCntnr)}

function CreateMenuStructureAgain(MName,NumberOf){
        var i,WMnu,NoOffSubs,PrvMmbr,Mbr=FrstCntnr.FrstMbr;
        RcrsLvl++;
        for(i=NumberOf;i>0;i--){
                WMnu=MName+eval(i);
                NoOffSubs=eval(WMnu+'[3]');
                PrvMmbr=Mbr;
                if(NoOffSubs)Mbr.ChildCntnr=CreateMenuStructure(WMnu+'_',NoOffSubs);
                Mbr=Mbr.PrvMbr}
        RcrsLvl--}</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

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>

---

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

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

---

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

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

---

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

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 floating message - Javascript multi level drop down menu - JavaScript in_array()

Use this JavaScript instead of frames. When a visitor clicks on a specific link, the content of that link is inserted into the page without a refresh. When a page doesn... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

http://www.javascriptbank.com/javasc...ation-menu.jpg
Demo: JavaScript AJAX Navigation Menu

How to setup

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

Code:

---

<script language="javascript">

// Created by: Michael :: http://www.posters-bestellen.nl

var please_wait = null;

function open_url(url, target) {
        if ( ! document.getElementById) {
                  return false;
        }

        if (please_wait != null) {
                  document.getElementById(target).innerHTML = please_wait;
        }

        if (window.ActiveXObject) {
                  link = new ActiveXObject("Microsoft.XMLHTTP");
        } else if (window.XMLHttpRequest) {
                  link = new XMLHttpRequest();
        }

        if (link == undefined) {
                  return false;
        }
        link.onreadystatechange = function() { response(url, target); }
        link.open("GET", url, true);
        link.send(null);
}

function response(url, target) {
        if (link.readyState == 4) {
                document.getElementById(target).innerHTML = (link.status == 200) ? link.responseText : "Ooops!! A broken link! Please contact the webmaster of this website ASAP and give him the fallowing errorcode: " + link.status;
        }
}

function set_loading_message(msg) {
        please_wait = msg;
}
</script>

---

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

Code:

---

<script type="text/javascript">
<!--
/* This script and many more are available free online at
Created by: Michael :: http://www.posters-bestellen.nl */

  set_loading_message("Please wait while the page is opening....");
//-->

</script>
<table>
<tr>
<td valign=top width=150>
<H5>My Navagation links</H5>
<a href="javascript:void(0)" onclick="open_url('page-1.html','my_site_content');">
Go to page 1</a><br>
<a href="javascript:void(0)" onclick="open_url('page-2.html','my_site_content');">
Go to page 2</a><br>
<a href="javascript:void(0)" onclick="open_url('page-3.html','my_site_content');">
Go to page 3</a><br>
<a href="javascript:void(0)" onclick="open_url('page-4.html','my_site_content');">
Go to page 4</a><br>

<a href="javascript:void(0)" onclick="open_url('xxxx.html','my_site_content');">
Broken Link</a><br>
</td>
<td valign=top>
<div id="my_site_content">
</div>
</td>
</tr>
</table>

---

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

Enhancing image presentation on your website with this image rotator plus smooth dynamic motion (fade-in-fade-out). A very great anima... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

http://www.javascriptbank.com/javasc...tion-image.jpg
Demo: JavaScript DHTML Fading Animation Image

How to setup

Step 1: Place JavaScript below in your HEAD section
JavaScript

Code:

---

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

sandra0 = new Image();
sandra0.src = "photo1.jpg";

sandra1 = new Image();
sandra1.src = "photo2.jpg";

sandra2 = new Image();
sandra2.src = "photo3.jpg";

var i_strngth=1
var i_image=0

var imageurl = new Array()
imageurl[0] ="photo1.jpg"
imageurl[1] ="photo2.jpg"
imageurl[2] ="photo3.jpg"


function showimage() {               
        if(document.all) {
                if (i_strngth <=110) {
                        testimage.innerHTML="<img style='filter:alpha(opacity="+i_strngth+")' src="+imageurl[i_image]+" border=0>";
                        i_strngth=i_strngth+10
                        var timer=setTimeout("showimage()",100)
                }       
                else {
                        clearTimeout(timer)
                        var timer=setTimeout("hideimage()",1000)
                }
        }       
       
        if(document.layers) {
                        clearTimeout(timer)
                        document.testimage.document.write("<img src="+imageurl[i_image]+" border=0>")
                        document.close()
                        i_image++
                        if (i_image >= imageurl.length) {i_image=0}       
                        var timer=setTimeout("showimage()",2000)
                               
        }       
}


function hideimage() {               
        if (i_strngth >=-10) {
                testimage.innerHTML="<img style='filter:alpha(opacity="+i_strngth+")' src="+imageurl[i_image]+" border=0>";
                i_strngth=i_strngth-10
                var timer=setTimeout("hideimage()",100)
        }       
        else {
                clearTimeout(timer)
                i_image++
                if (i_image >= imageurl.length) {i_image=0}
                i_strngth=1
                var timer=setTimeout("showimage()",500)       
        }
}


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

---

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

Code:

---

<BODY onload=showimage()>
<DIV id=mainbod style="POSITION: relative; VISIBILITY: visible"></DIV>

<DIV id=testimage style="POSITION: relative; VISIBILITY: visible"></DIV>
</BODY>

---

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

Use this JavaScript code to make a a horizontal image scroller on your web page. If do not view the source code, maybe you will think tha... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

http://www.javascriptbank.com/javasc...tal-banner.jpg
Demo: JavaScript Streaming Horizontal Banner

How to setup

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

Code:

---

<style type="text/css">
<!--
#slideCont {
        border:solid 1px #000;
        text-align:center;
}

#slideCont img {
        margin: 5px;
}
-->
</style>

---

Step 2: Place JavaScript below in your HEAD section
JavaScript

Code:

---

<script type="text/javascript">
<!--
/*
  -----------------------------------------------
  Streaming banners - v.1
  (c) 2006 www.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.
  ------------------------------------------------ */
<!--

function clip() {
        // width of the banner container
        var contWidth = 425;
        // height of the banner container
        var contHeight = 90;

        var id1 = document.getElementById('slideA');
        var id2 = document.getElementById('slideB');

        id1.style.left = parseInt(id1.style.left)-1 + 'px';
       
        document.getElementById('slideCont').style.width = contWidth + "px";
        document.getElementById('slideCont').style.clip = 'rect(auto,'+ contWidth +'px,' + contHeight +'px,auto)';
        id2.style.display = '';
        if(parseFloat(id1.style.left) == -(contWidth))        {
                id1.style.left = '0px';
        }
        setTimeout(clip,25)
}

// Multiple onload function created by: Simon Willison
// http://simonwillison.net/2004/May/26/addLoadEvent/
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() {
  clip();
});
//-->
</script>

---

Step 3: Place HTML below in your BODY section
HTML

Code:

---

<div id="slideCont" style="overflow: hidden; position: relative; z-index: 1; width: 425px; height: 90px; top: 0px; clip: rect(auto, 425px, 90px, auto);">
        <div id="slideA" style="overflow: hidden; position: absolute; z-index: 1; top: 0px; left: -194px; width: 850px; height: 90px;">
                <div style="float: left;" id="innerSlideA">
                        <a href="http://www.apache.org/"><img src="/logos/logo_jsbank.jpg" border="0" height="44" width="126"></a>
                        <a href="http://www.haan.net/"><img src="/logos/gif_logojsb2.gif" border="0" height="60" width="120"></a>
                        <a href="http://www.mysql.com/"><img src="/logos/jsb_banner.gif" border="0" height="44" width="126"></a>

                </div>
                <div id="slideB" style="overflow: hidden; position: relative; z-index: 1; top: 0px; left: 0px; width: 425px; height: 90px;">
                        <a href="http://www.apache.org/"><img src="/logos/logo_jsb.jpg" border="0" height="44" width="126"></a>
                        <a href="http://www.haan.net/"><img src="/logos/logo_jsb__88x31.gif" border="0" height="60" width="120"></a>
                        <a href="http://www.mysql.com/"><img src="/logos/logo_jsb_120x60.jpg" border="0" height="44" width="126"></a>
                </div>
        </div>
</div>

---

JavaScript Countdown Timer - JavaScript Web based Music Player - Free JavaScript Codes

This is a simple expand collapse menu. The anchor tags that expand each menu are added by JavaScript, so the HTML code doesn't contain any event handlers or unnecessary HTML tags. The ... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

http://www.javascriptbank.com/javasc...nu-onclick.jpg
Demo: JavaScript Expanding Navigation Menu onClick

How to setup

Step 1: Use CSS code below for styling the script
CSS

Code:

---

<style type="text/css">
ul#menu {
  width: 100px;
  list-style-type: none;
  border-top: solid 1px #b9a894;
  margin: 0;
  padding: 0;
}

ul#menu ol {
  display: none;
  text-align: right;
  list-style-type: none;
  margin: 0;
  padding: 5px;
}

ul#menu li,
  ul#menu a {
  font-family: verdana, sans-serif;
  font-size: 11px;
  color: #785a3c;
}

ul#menu li {
  border-bottom: solid 1px #b9a894;
  line-height: 15px;
}

ul#menu ol li {
  border-bottom: none;
}

ul#menu ol li:before {
  content: "-";
}

ul#menu a {
  text-decoration: none;
  outline: none;
}

ul#menu a:hover {
  color: #539dbc;
}

ul#menu a.active {
  color: #be5028;
}
</style>

---

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

Code:

---

<script language="javascript">

/*
Created by: Travis Beckham :: http://www.squidfingers.com | http://www.podlob.com
version date: 06/02/03 :: If want to use this code, feel free to do so,
but please leave this message intact. (Travis Beckham) */

// Node Functions

if(!window.Node){
  var Node = {ELEMENT_NODE : 1, TEXT_NODE : 3};
}

function checkNode(node, filter){
  return (filter == null || node.nodeType == Node[filter] || node.nodeName.toUpperCase() == filter.toUpperCase());
}

function getChildren(node, filter){
  var result = new Array();
  var children = node.childNodes;
  for(var i = 0; i < children.length; i++){
    if(checkNode(children[i], filter)) result[result.length] = children[i];
  }
  return result;
}

function getChildrenByElement(node){
  return getChildren(node, "ELEMENT_NODE");
}

function getFirstChild(node, filter){
  var child;
  var children = node.childNodes;
  for(var i = 0; i < children.length; i++){
    child = children[i];
    if(checkNode(child, filter)) return child;
  }
  return null;
}

function getFirstChildByText(node){
  return getFirstChild(node, "TEXT_NODE");
}

function getNextSibling(node, filter){
  for(var sibling = node.nextSibling; sibling != null; sibling = sibling.nextSibling){
    if(checkNode(sibling, filter)) return sibling;
  }
  return null;
}
function getNextSiblingByElement(node){
        return getNextSibling(node, "ELEMENT_NODE");
}

// Menu Functions & Properties

var activeMenu = null;

function showMenu() {
  if(activeMenu){
    activeMenu.className = "";
    getNextSiblingByElement(activeMenu).style.display = "none";
  }
  if(this == activeMenu){
    activeMenu = null;
  } else {
    this.className = "active";
    getNextSiblingByElement(this).style.display = "block";
    activeMenu = this;
  }
  return false;
}

function initMenu(){
  var menus, menu, text, a, i;
  menus = getChildrenByElement(document.getElementById("menu"));
  for(i = 0; i < menus.length; i++){
    menu = menus[i];
    text = getFirstChildByText(menu);
    a = document.createElement("a");
    menu.replaceChild(a, text);
    a.appendChild(text);
    a.href = "#";
    a.onclick = showMenu;
    a.onfocus = function(){this.blur()};
  }
}

if(document.createElement) window.onload = initMenu;

</script>

---

Step 3: Place HTML below in your BODY section
HTML

Code:

---

<ul id="menu">
  <li>Menu Item 1
    <ol>
      <li><a href="#">Sub Item 1.1</a></li>
      <li><a href="#">Sub Item 1.2</a></li>
      <li><a href="#">Sub Item 1.3</a></li>

    </ol>
  </li>
  <li>Menu Item 2
    <ol>
      <li><a href="#">Sub Item 2.1</a></li>
      <li><a href="#">Sub Item 2.2</a></li>
      <li><a href="#">Sub Item 2.3</a></li>
    </ol>

  </li>
  <li>Menu Item 3
    <ol>
      <li><a href="#">Sub Item 3.1</a></li>
      <li><a href="#">Sub Item 3.2</a></li>
      <li><a href="#">Sub Item 3.3</a></li>
    </ol>
  </li>

  <li>Menu Item 4
    <ol>
      <li><a href="#">Sub Item 4.1</a></li>
      <li><a href="#">Sub Item 4.2</a></li>
      <li><a href="#">Sub Item 4.3</a></li>
    </ol>
  </li>
  <li>Menu Item 5
    <ol>

      <li><a href="#">Sub Item 5.1</a></li>
      <li><a href="#">Sub Item 5.2</a></li>
      <li><a href="#">Sub Item 5.3</a></li>
    </ol>
  </li>
</ul>

---

Javascript Music Player - Random Text Generator - Floating Image Script