Dynamic Drive-Amazon style Drop-in content box

FF1+ IE5+ Opr7+

Amazon style Drop-in content box

Author: Dynamic Drive

Description: We modeled this script after an effect seen on the frontpage of Amazon.com. A content box drops in from "midair", and can display anything of your choice. The frequency of the box appearing can be precisely controlled, such as "always", "once per browser session", or "randomly." This useful script works in IE4+, NS6+, and Opera7+. Be sure to also check out the original Drop In Content script.

Demo:

JavaScript is a scripting language originally developed by Netscape to add interactivity and power to web documents. It is purely client side, and runs completely on the client's browser and computer.

Close It

Directions:

Step 1: Add the below code to the <HEAD> section of your page:

Select All
<style type="text/css"> #dropinboxv2cover{ width: 320px; /*change width to desired */ height: 220px; /*change height to desired. REMOVE if you wish box to be content's natural height */ position:absolute; /*Don't change below 4 rules*/ z-index: 100; overflow:hidden; visibility: hidden; } #dropinboxv2{ width: 300px; /*change width to above width-20. */ height: 200px; /*change height to above height-20. REMOVE if you wish box to be content's natural height*/ border: 2px solid black; /*Customize box appearance*/ background-color: lightyellow; padding: 4px; position:absolute; /*Don't change below 3 rules */ left: 0; top: 0; } </style> <script type="text/javascript"> /*********************************************** * Amazon style Drop-in content box- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com) * Visit DynamicDrive.com for hundreds of DHTML scripts * Please keep this notice intact * Go to http://www.dynamicdrive.com/ for full source code ***********************************************/ var dropboxleft=200 //set left position of box (in px) var dropboxtop=100 //set top position of box (in px) var dropspeed=15 //set speed of drop animation (larger=faster) //Specify display mode. 3 possible values are: //1) "always"- This makes the fade-in box load each time the page is displayed //2) "oncepersession"- This uses cookies to display the fade-in box only once per browser session //3) integer (ie: 5)- Finally, you can specify an integer to display the box randomly via a frequency of 1/integer... // For example, 2 would display the box about (1/2) 50% of the time the page loads. var displaymode="always" ///Don't edit beyond here/////////// if (parseInt(displaymode)!=NaN) var random_num=Math.floor(Math.random()*displaymode) var ie=document.all var dom=document.getElementById function initboxv2(){ if (!dom&&!ie) return crossboxcover=(dom)?document.getElementById("dropinboxv2cover") : document.all.dropinboxv2cover crossbox=(dom)?document.getElementById("dropinboxv2"): document.all.dropinboxv2 scroll_top=(ie)? truebody().scrollTop : window.pageYOffset crossbox.height=crossbox.offsetHeight crossboxcover.style.height=parseInt(crossbox.height)+"px" crossbox.style.top=crossbox.height*(-1)+"px" crossboxcover.style.left=dropboxleft+"px" crossboxcover.style.top=dropboxtop+"px" crossboxcover.style.visibility=(dom||ie)? "visible" : "show" dropstart=setInterval("dropinv2()",50) } function dropinv2(){ scroll_top=(ie)? truebody().scrollTop : window.pageYOffset if (parseInt(crossbox.style.top)<0){ crossboxcover.style.top=scroll_top+dropboxtop+"px" crossbox.style.top=parseInt(crossbox.style.top)+dropspeed+"px" } else{ clearInterval(dropstart) crossbox.style.top=0 } } function dismissboxv2(){ if (window.dropstart) clearInterval(dropstart) crossboxcover.style.visibility="hidden" } function truebody(){ return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body } function get_cookie(Name) { var search = Name + "=" var returnvalue = "" if (document.cookie.length > 0) { offset = document.cookie.indexOf(search) if (offset != -1) { offset += search.length end = document.cookie.indexOf(";", offset) if (end == -1) end = document.cookie.length; returnvalue=unescape(document.cookie.substring(offset, end)) } } return returnvalue; } if (displaymode=="oncepersession" && get_cookie("droppedinv2")=="" || displaymode=="always" || parseInt(displaymode)!=NaN && random_num==0){ if (window.addEventListener) window.addEventListener("load", initboxv2, false) else if (window.attachEvent) window.attachEvent("onload", initboxv2) else if (document.getElementById || document.all) window.onload=initboxv2 if (displaymode=="oncepersession") document.cookie="droppedinv2=yes" } </script>

Edit the style sheet to configure the basic look of the Content Box. Then, refer to the comments contained inside the script to set the variables.

Step 2: Insert the below HTML within the BODY section of your page, preferably at the very end:

The code of Step 2 is where you enter the actual HTML you wish to display.

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