PDA

View Full Version : Resolved center align/float Amazon style drop in box?



eTard
04-19-2012, 05:42 PM
1) Script Title: Amazon style Drop-in content box

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/amazondrop.htm

3) Describe problem: I would like to make this drop in center align or float in the center of the page based on the users browser window size. For some reason, this script is coded such that you set the margin from the left edge with var dropboxleft=. That is great IF you have a website that is not centered in the browser window. I have tried applying a div around the drop in box that center aligns the drop in boxes contents using inline css such as margin: 0 auto but the var dropboxleft= kills that function from working.

Any ideas or thoughts on how to get the drop in box centered align and not be a fixed distance from the left edge?

Thanks!

ddadmin
04-21-2012, 12:03 AM
Try the below modified script, which positions the box dead center on the page:


<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- 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
var winwidth = window.innerWidth || document.documentElement.offsetWidth || document.body.offsetWidth
var winheight = window.innerHeight || document.documentElement.offsetHeight || document.body.offsetHeight
crossboxcover=(dom)?document.getElementById("dropinboxv2cover") : document.all.dropinboxv2cover
crossbox=(dom)?document.getElementById("dropinboxv2"): document.all.dropinboxv2
scroll_top=(ie)? truebody().scrollTop : window.pageYOffset
crossbox.width=crossbox.offsetWidth
crossbox.height=crossbox.offsetHeight
crossboxcover.style.height=parseInt(crossbox.height)+"px"
crossbox.style.top=crossbox.height*(-1)+"px"
crossboxcover.style.left=winwidth/2 - crossbox.width/2 + "px"
crossboxcover.style.top=winheight/2 - crossbox.height/2 + "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>

<body>

<div id="dropinboxv2cover">
<div id="dropinboxv2">

INSERT YOUR CONTENT HERE. DO NOT REMOVE THE TWO OUTER DIVS<br>
<p align="right"><a href="#" onClick="dismissboxv2();return false">Close It</a></p>

</div>
</div>

eTard
04-23-2012, 05:33 PM
That will work, thanks!

It is not exactly as I had envisioned, but it does work ultimately. The reason I say that is that this will in fact drop the banner in at the center of the width of the page based on the current width of your browsers window. And that is the key. The thing it does not do is float left to right if you resize the browser and stay centered. Does not matter a lot since at that stage the banner did drop into the center of the page and most likely people will close the banner before resizing the window. But just saying, it does not move as you resize the browser window. Not major, this will suffice, thanks.

PS - for those that are reading this, the only thing that really changed is the script portion, the CSS and the DIVs are the same as the original script so that is all I updated.