Drop-in Content Box

JavaScriptSource Staff Apr 2, 2004

This script displays a content box that drops in from midair, and can display whatever you choose. The frequency of the box appearing can be precisely controlled.
Click to see example

JavaScriptSource is your home for free scripts. You can add anything you like to the box. Thanks DynamicDrive.

Close It

The JavaScript Source: Text Effects: Drop-in Content Box

Simply click inside the window below, use your cursor to highlight the script, and copy (type Control-c or Apple-c) the script into a new file in your text editor (such as Note Pad or Simple Text) and save (Control-s or Command-s). The script is yours!!!

<!-- TWO STEPS TO INSTALL DROP-IN CONTENT BOX:

1.  Copy the coding into the HEAD of your HTML document

2.  Add the last code into the BODY of your HTML document  -->

<HEAD>

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

/***********************************************

* Amazon style Drop-in content box- © Dynamic Drive DHTML code library (www.dynamicdrive.com)

* Visit DynamicDrive.com for hundreds of DHTML scripts

* This notice must stay intact for legal use

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

</HEAD>

<BODY>

JavaScriptSource is your home for free scripts. You can add anything you like to the box.

Thanks DynamicDrive.

<br>

<p align="right"><a href="#" onClick="dismissboxv2();return false">Close It</a></p>

</div>

<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>

by <a href="http://javascriptsource.com">The JavaScript Source</a></font>

</center><p>

Did you use this script? Do you like this site? Please link to us!

Leave a Response

(0 comments)

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details

Drop-in Content Box

Leave a Response

Attention JavaScript Coders

Go Deeper