Dynamic Drive DHTML Scripts- Boxing-away Script

FF1+ IE5+ Opr7+

Boxing-away Script

Author: Dynamic Drive

Last updated: Dec 14th, 2014 for improved browser compatibility

Description: A script that "boxes away" to reveal the document beneath as the surfer enters the page.

Demo: You just saw it as you entered this page. If not, please press reload.

Directions

Step 1: Insert the following into the <head> section of your page. You can change the color of the boxes from green to another by changing all three instances of the word "green" to another color name:

Step 2: Finally, insert the below right after the <body> tags, before anything else:

Select All
<div id="p1" class="intro"></div> <div id="p2" class="intro"></div> <div id="p3" class="intro"></div> <div id="p4" class="intro"></div> <div id="p5" class="intro"></div> <div id="p6" class="intro"></div> <div id="p7" class="intro"></div> <div id="p8" class="intro"></div> <div id="p9" class="intro"></div> <div id="p10" class="intro"></div> <div id="p11" class="intro"></div> <div id="p12" class="intro"></div> <div id="p13" class="intro"></div> <div id="p14" class="intro"></div> <div id="p15" class="intro"></div> <div id="p16" class="intro"></div> <div id="p17" class="intro"></div> <div id="p18" class="intro"></div> <div id="p19" class="intro"></div> <div id="p20" class="intro"></div> <div id="p21" class="intro"></div> <div id="p22" class="intro"></div> <div id="p23" class="intro"></div> <div id="p24" class="intro"></div> <div id="p25" class="intro"></div> <script> /* Boxing-away Script- By Dynamic Drive (www.dynamicdrive.com) For full source code, 100's more free DHTML scripts, and TOS, visit http://www.dynamicdrive.com */ var espeed=300 var counter=1 var temp=new Array() var temp2=new Array() var containerwidth=(window.innerWidth)?parseInt(window.innerWidth)/5 : parseInt(document.body.clientWidth/5) var containerheight=(window.innerWidth)?parseInt(window.innerHeight)/5 : parseInt(document.body.offsetHeight/5) for (i=1;i<=25;i++){ temp[i]=document.getElementById("p"+i).style temp[i].width=containerwidth + 'px' temp[i].height=containerheight + 'px' } for (i=1;i<=5;i++) temp[i].left=(i-1)*containerwidth + 'px' for (i=6;i<=10;i++){ temp[i].left=(i-6)*containerwidth + 'px' temp[i].top=containerheight + 'px' } for (i=11;i<=15;i++){ temp[i].left=(i-11)*containerwidth + 'px' temp[i].top=2*containerheight + 'px' } for (i=16;i<=20;i++){ temp[i].left=(i-16)*containerwidth + 'px' temp[i].top=3*containerheight + 'px' } for (i=21;i<=25;i++){ temp[i].left=(i-21)*containerwidth + 'px' temp[i].top=4*containerheight + 'px' } function erasecontainerie(){ var whichcontainer=Math.round(Math.random()*25) if (whichcontainer==0) whichcontainer=1 if (temp[whichcontainer].visibility!="hidden") temp[whichcontainer].visibility="hidden" else{ while (temp[whichcontainer].visibility=="hidden"){ whichcontainer=Math.round(Math.random()*25) if (whichcontainer==0) whichcontainer=1 } temp[whichcontainer].visibility="hidden" } if (counter==25){ clearInterval(beginerase) for (i=1;i<26;i++) temp[i].display="none" } counter++ espeed-=10 } beginerase=setInterval("erasecontainerie()",espeed) </script>

Box away!

Wordpress Users: Step by Step instructions to add ANY Dynamic Drive script to an entire Wordpress theme or individual Post