Results 1 to 3 of 3

Thread: center align/float Amazon style drop in box?

  1. #1
    Join Date
    Nov 2008
    Posts
    18
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default center align/float Amazon style drop in box?

    1) Script Title: Amazon style Drop-in content box

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...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!
    Last edited by eTard; 04-23-2012 at 06:34 PM.

  2. #2
    Join Date
    Aug 2004
    Posts
    9,910
    Thanks
    3
    Thanked 969 Times in 957 Posts
    Blog Entries
    15

    Default

    Try the below modified script, which positions the box dead center on the page:

    Code:
    <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>
    DD Admin

  3. #3
    Join Date
    Nov 2008
    Posts
    18
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    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.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •