DHTML Script - TransitionBoxes - JavaScript Made Easy: Free JavaScripts Tutorials Example Code

Metachecker.net

|

TrafficChecker.net

|

RankChecker.net

Learn Java Script Today

|

Over 5000 Free Fonts

|

|

Javascript Forum

|

Other Javascript Resources

|

JavaScript Basics

Inserting Javascript

Complete Tutorial

Advance DHTML Tutorial


DHTML Script - TransitionBoxes			[View Sample]

This scripts places some boxes (as many as you want) on top of the content and when the page is finished to load the layers will make a transition that will show the content below. You can choose between 4 different ways the layers can "unclip" themself. 1, 2, 3, 4 You can also set the speed and some other variables.


Insert into <HEAD>
<style type="text/css"> DIV.clC{position:absolute; background-color:#CCCCCC; layer-background-color:#CCCCCC; top:0; left:0; z-index:500; width:100%; height:100%} </style> <script type="text/javascript" language="JavaScript"> /****************************************************************************** Copyright (C) 1999 Thomas Brattli This script is made by and copyrighted to Thomas Brattli at www.bratta.com Visit for more great scripts. This may be used freely as long as this msg is intact! I will also appriciate any links you could give me. ****************************************************************************/ //Default browsercheck, added to all scripts! function checkBrowser(){ this.ver=navigator.appVersion this.dom=document.getElementById?1:0 this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom)?1:0; this.ie4=(document.all && !this.dom)?1:0; this.ns5=(this.dom && parseInt(this.ver) >= 5) ?1:0; this.ns4=(document.layers && !this.dom)?1:0; this.bw=(this.ie5 \|\| this.ie4 \|\| this.ns4 \|\| this.ns5) return this } bw=new checkBrowser() //How many boxes? (have to be dividible with the number of rows) numbox=56 //How many rows columns=7 //What type of clipping do you want? cliptype=3 // 0 to 3 //Pixel to clip per timer clipspeed=5 //How long should the script wait before clipping: waitbeforeshowing=500 //In milliseconds /**************************************************************** Script variables, do not edit! *****************************************************************/ cliptp=new Array('0,0,0,0','0,page.x2/columns,0,page.x2/columns','oC.clipy,page.x2/columns, oC.clipy,page.x2/columns','oC.clipy/2,oC.clipx/2,oC.clipy/2,oC.clipx/2') /**************************************************************** Initilizes the objects ******************************************************************/ function transInit(){ page=new makePageCoords() oC=new Array(); oC.clipx=parseInt(page.x2/columns) oC.clipy=parseInt((page.y2/numbox)columns) oC.row=numbox/columns for(i=0;i<numbox;i++){ oC[i]=new makeObj('divC'+i) if(bw.ie4 \|\| bw.ie5){oC[i].css.width=oC.clipx; oC[i].css.height=oC.clipy;} oC[i].clipTo(0,oC.clipx,oC.clipy,0) for(j=1;j<=columns;j++){ //Placing boxes if(i<oC.rowj){oC[i].moveIt(oC.clipx(j-1),oC.clipy(i-oC.row(j-1))); break;} } } setTimeout("unClip()",waitbeforeshowing) } /****************************************************************** Clips the objects to make a transition *****************************************************************/ function unClip(){ str="" for(i=1;i<oC.length;i++){ str=str+'oC['+i+'].clipTo(tcurr,rcurr,bcurr,lcurr);' } eval("oC[0].clipIt("+cliptp[cliptype]+","+clipspeed+",'','"+str+"')") } /**************************************************************** Cross-browser object part - DO NOT EDIT ******************************************************************/ var cliptim=0; function makePageCoords(){ this.x=0;this.x2=(bw.ns4 \|\| bw.ns5)?innerWidth:document.body.offsetWidth-19; this.y=0;this.y2=(bw.ns4 \|\| bw.ns5)?innerHeight:document.body.offsetHeight-5; this.x50=this.x2/2; this.y50=this.y2/2; this.x10=(this.x210)/100-5;this.y10=(this.y210)/100-5 this.x15=(this.x215)/100-5;this.y15=(this.y215)/100-5; return this;} function makeObj(obj,nest){nest=(!nest) ? '':'document.'+nest+'.' this.css=bw.dom?document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?eval(nest+'document.'+obj):0; this.clipIt=b_clipIt; this.clip=b_clip; this.clipactive=false;this.clipTo=b_clipTo; this.moveIt=b_moveIt; this.obj = obj + "Object"; eval(this.obj + "=this"); return this} function b_moveIt(x,y){this.x=x; this.y=y; this.css.left=this.x;this.css.top=this.y} function b_clipTo(t,r,b,l){if(bw.ns4){this.css.clip.top=t;this.css.clip.right=r this.css.clip.bottom=b;this.css.clip.left=l }else{this.css.clip="rect("+t+","+r+","+b+","+l+")";}} function b_clipIt(tstop,rstop,bstop,lstop,step,fn,wh){ if(!fn) fn=null; if(!wh) wh=null; var clipval=new Array() if(bw.dom \|\| bw.ie4) {clipval=this.css.clip; clipval=clipval.slice(5,clipval.length-1); clipval=clipval.split(' '); for(var i=0;i<4;i++){clipval[i]=parseInt(clipval[i])} }else{clipval[0]=this.css.clip.top; clipval[1]=this.css.clip.right clipval[2]=this.css.clip.bottom; clipval[3]=this.css.clip.left} totantstep=Math.max(Math.max(Math.abs((tstop-clipval[0])/step),Math.abs((rstop-clipval[1])/step)), Math.max(Math.abs((bstop-clipval[2])/step),Math.abs((lstop-clipval[3])/step))) if(!this.clipactive)this.clip(clipval[0],clipval[1],clipval[2],clipval[3],(tstop-clipval[0])/totantstep, (rstop-clipval[1])/totantstep,(bstop-clipval[2])/totantstep, (lstop-clipval[3])/totantstep,totantstep,0, fn,wh)} function b_clip(tcurr,rcurr,bcurr,lcurr,tperstep,rperstep,bperstep,lperstep,totantstep,antstep,fn,wh){ tcurr=tcurr+tperstep; rcurr=rcurr+rperstep; bcurr=bcurr+bperstep; lcurr=lcurr+lperstep this.clipTo(tcurr,rcurr,bcurr,lcurr); eval(wh); if(antstep<totantstep){this.clipactive=true;antstep++ cliptim=setTimeout(this.obj+".clip("+tcurr+","+rcurr+","+bcurr+","+lcurr+","+tperstep+"," +rperstep+","+bperstep+","+lperstep+","+totantstep+","+antstep+",'"+fn+"','"+wh+"')",50) }else{this.clipactive=false; eval(fn)}} /***************************************************************** Cross-browser object part END *******************************************************************/ //Calling transinit on pageload. onload=transInit; //Writing boxes if(bw.bw){ for(i=1;i<numbox;i++){ document.write('<div id="divC'+i+'" class="clC"></div>') } } </script>

Insert into <BODY>
<!-- The first box is manually placed in the page to get the "cover" effect while the other boxes are loading --> <div id="divC0" class="clC"><table width="102%" height="100%"><tr><td>ÿ</td></tr></table></div>

Other Options