»
EnglishFrenchVietnamese

Print - Reveal JavaScript - JavaScriptBank.com

Full version: jsB@nk » Browser » Page effect » Reveal JavaScript
URL: http://www.javascriptbank.com/reveal.html

Reveal JavaScript © JavaScriptBank.comThis 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: http://www.javascriptbank.com/reveal.html



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