Full version: jsB@nk » Browser » Page effect » Reveal JavaScript
URL: https://www.javascriptbank.com/reveal.html
This script will apply a neat effect to reveal a page's content when the user clicks a link.
Full version: jsB@nk » Browser » Page effect » Reveal JavaScript
URL: https://www.javascriptbank.com/reveal.html
<body bgcolor="#FFFFFF" scroll="no"><!-- Place in BODY section of page --><!-- Reveal JavaScript --><script language="JavaScript">//////////////////////////////////////////////////// Reveal JavaScript //// (c) 2003 Premshree Pillai //// Created : 13/02/03 (dd/mm/yy) //// http://www.qiksearch.com //// http://premshree.resource-locator.com //// Email : qiksearch@rediffmail.com ////////////////////////////////////////////////////var width=document.body.clientWidth;var height=document.body.clientHeight;function doClickText(who,type,step,timeOut) { document.getElementById(who).style.display="none"; if(type==0) { reveal('revealDiv1',step,timeOut,0); reveal('revealDiv2',step,timeOut,1); } if(type==1) { reveal('revealDiv1',step,timeOut,2); reveal('revealDiv2',step,timeOut,3); }}//////////////////////// Reveal! function ////////////////////////function reveal(who,step,timeOut,type) { if(type==0) var where="top"; if(type==1) var where="bottom"; if(type==2) var where="left"; if(type==3) var where="right"; eval('var temp=document.getElementById(who).style.'+where); temp=parseInt(temp); if(type==0||type==1) var checkWith=height/2; if(type==2||type==3) var checkWith=width/2; if(-temp<checkWith) { temp-=step; eval('document.getElementById(who).style.'+where+'=temp;'); setTimeout("reveal('"+who+"',"+step+",'"+timeOut+"',"+type+")", timeOut); } else { document.getElementById(who).style.display="none"; document.body.scroll="yes"; }}/*Following function is required to initialise RevealThe function is called in the following manner : initReveal(type,div1bg,div2bg,div1bw,div2bw,div1bc,div2bc,step,timeOut,click) Parameter description : type -> 0 for vertical | 1 for horizantal div1bg -> Background color of first layer (eg. '#CCCCCC') div2bg -> Background color of second layer (eg. '#CCCCCC') div1bw -> Border width of first layer (eg. 1) div2bw -> Border width of second layer (eg. 1) div1bc -> Border color of first layer (eg. '#000000') div2bc -> Border color of second layer (eg. '#000000') step -> The amount revealed every interval (eg. 5) timeOut -> The delay in milliseconds click -> true if user has to click to reveal | false for auto reveal*/function initReveal(type,div1bg,div2bg,div1bw,div2bw,div1bc,div2bc,step,timeOut,click) { if(type==0) { var bWhere1="border-bottom"; var bWhere2="border-top"; var putZero1="top:0px; left:0px"; var putZero2="bottom:0px; left:0px"; document.write('<div id="revealDiv1" style="z-index:100; display:block; position:absolute; '+putZero1+'; background:'+div1bg+' ; width:'+(width)+'; height:'+(height/2)+'; '+bWhere1+':'+div1bc+' solid '+div1bw+'px"></div>'); document.write('<div id="revealDiv2" style="z-index:100; display:block; position:absolute; '+putZero2+'; background:'+div2bg+' ; width:'+(width)+'; height:'+(height/2)+'; '+bWhere2+':'+div2bc+' solid '+div2bw+'px"></div>'); if(!click) { reveal('revealDiv1',step,timeOut,0); reveal('revealDiv2',step,timeOut,1); } else { clickText(type,step,timeOut); } } if(type==1) { var bWhere1="border-right"; var bWhere2="border-left"; var putZero1="top:0px; left:0px"; var putZero2="top:0px; right:0px"; document.write('<div id="revealDiv1" style="z-index:100; display:block; position:absolute; '+putZero1+'; background:'+div1bg+' ; width:'+(width/2)+'; height:'+(height)+'; '+bWhere1+':'+div1bc+' solid '+div1bw+'px"></div>'); document.write('<div id="revealDiv2" style="z-index:100; display:block; position:absolute; '+putZero2+'; background:'+div2bg+' ; width:'+(width/2)+'; height:'+(height)+'; '+bWhere2+':'+div2bc+' solid '+div2bw+'px"></div>'); if(!click) { reveal('revealDiv1',step,timeOut,2); reveal('revealDiv2',step,timeOut,3); } else { clickText(type,step,timeOut); } } function clickText(type,step,timeOut) { document.write('<div id="clickText" style="z-index:101; display:block; position:absolute; top:'+(height/2-clickh/2-clickb)+'; left:'+(width/2-clickw/2-clickb)+'"><table style="border:'+clickc+' solid '+clickb+'px; background:'+clickbg+' ;width:'+clickw+'px; height:'+clickh+'; '+clickFont+'; cursor:hand; cursor:pointer" onClick="doClickText(\'clickText\','+type+','+step+','+timeOut+')"><tr><td align="middle">'+clickt+'</td></tr></table></div>'); }}</script><script language="JavaScript">////////////////////////////////////Customise Reveal/////////////////////////////////////*The following is required only if youwant the user to click to reveal the page*/var clickw=150;// Widthvar clickh=20;// Heightvar clickb=2;// Border widthvar clickc="#000000";// Border colorvar clickbg="#000000";// Background colorvar clickt="Reveal!";// Text to display// The font style of the textvar clickFont="font-family:verdana,arial,helvetica; font-size:10pt; font-weight:bold; color:#FFFFFF";/*Following is required to initialise RevealThe function is called in the following manner :initReveal(type,div1bg,div2bg,div1bw,div2bw,div1bc,div2bc,step,timeOut,click)Parameter description :type->0 for vertical | 1 for horizantaldiv1bg->Background color of first layer(eg. '#CCCCCC')div2bg->Background color of second layer(eg. '#CCCCCC')div1bw->Border width of first layer(eg. 1)div2bw->Border width of second layer(eg. 1)div1bc->Border color of first layer(eg. '#000000')div2bc->Border color of second layer(eg. '#000000')step->The amount revealed every interval(eg. 5)timeOut->The delay in millisecondsclick->true if user has to click to reveal | false for auto revealSee below for an example of how to call the function.*/new initReveal(0,'#CCCCCC','#CCCCCC',1,1,'#000000','#000000',3,10,true);</script></body><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->