Amazon drop in box

**JBottero** · 03-12-2006, 05:50 AM

A this site:

http://www.dynamicdrive.com/dynamici...amazondrop.htm

Is this quite nifty script that produces an "Amazon-like" box that drops down. Its placement is relative to the browser top and side. I tried playing around with it because I would like such a thing, but with placement relative to a DIV container I have on the page, not the browser edges. I was not successful, but than I really don't know what I'm doing.

Do people here think what I want is possible? If so, could you suggest an area I should look at? I'm not asking anyone to write my code for me, but if it's possible, maybe a clue to set me in the right direction?

Thanks!

**jscheuer1** · 03-12-2006, 05:51 PM

This turns out to be easier than I thought. Just put another division around the HTML markup of the drop box and set its position:relative, ex:

HTML Code:

<body>
<br>&nbsp;
<br>&nbsp;
<br>&nbsp;
<br>&nbsp;
<br>&nbsp;
<br>&nbsp;
<br>&nbsp;
<br>&nbsp;
<br>&nbsp;
<br>&nbsp;
<div style="position:relative;left:100px;width:50%;">Hi!
<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>
</div>
</body>

Notes: Setting this new outer containing division's width to less than 100% is necessary only if its left position isn't 0. It will be 0 if no left property is listed. I just included the left and width (and all those <br>  things) to demonstrate that the drop down will follow the container wherever it goes. The style="position:relative;" is all that is required.

Added: For windows that might scroll vertically (almost all) this function must be changed in the script:

Code:

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

Just get rid of the red part.

**JBottero** · 03-13-2006, 05:09 AM

In the function dropinv2, you delete the variable scroll_top. What does it do?

**jscheuer1** · 03-13-2006, 05:15 AM

It is (was) there to compensate for a page that has been scrolled. This only need be done if the drop box's position is in relation to the top of the window. If, as is the case with our little modification here, the positioning is in relation to a division, you don't want any compensation for page scroll. Whether the page is at top, middle or bottom of its scroll or anywhere in between is immaterial, you want the drop box to drop from the top of the element (division in this case).

**JBottero** · 03-14-2006, 03:55 AM

All of this code does not seem to be self contained within a larger function, such as one that would be called onLoad or by some other way. I'm thinking if I should be concerned about conflicts with other JavaScript that may as well be in the head of my document, maybe variable names or values... Does is seem odd that the whole mess of code itself is not contained? Or is this not a concern? Your opinion?

**jscheuer1** · 03-14-2006, 05:19 AM

Most scripts are not self contained, if I even understand what you mean by that. This script does have an onload event but, it uses the addEventListener method and the attachEvent method (for IE) in modern browsers to avoid conflicts with other onload events.

**JBottero** · 03-15-2006, 04:05 AM

Originally Posted by jscheuer1

Most scripts are not self contained, if I even understand what you mean by that. This script does have an onload event but, it uses the addEventListener method and the attachEvent method (for IE) in modern browsers to avoid conflicts with other onload events.

Basically I meant, there are a lot of variables not inside functions. Nevermind, I'm new to JS, I probably don't know what I'm asking! Thanks...

**jscheuer1** · 03-15-2006, 04:50 AM

Originally Posted by JBottero

Basically I meant, there are a lot of variables not inside functions. Nevermind, I'm new to JS, I probably don't know what I'm asking! Thanks...

Don't sell yourself short, you are right there. Those variables will conflict with another script that uses the same variable names but defines them differently. This usually doesn't happen, if it does, one or the other scripts must either be removed from the page or have its variable names changed so as not to conflict with the other script. However, the same is true of function names so, being inside a function will protect the variable (if its scope is limited to that function) but then exposes the function name. Bottom line is, you just have to make things work.

**adourov** · 02-01-2007, 12:51 AM

Amazon style Drop-in content box
http://www.dynamicdrive.com/dynamici...amazondrop.htm

First off, the script that was posted on how to create the delay was fantastic - on http://firemanagementconsultant.com/ that makes the drop down seem like its part of the flash animation that is directly above it ! THANKS !

However, I was not able to make it centered, I added the two div tags as indicated in the thread earlier and it actually prevented the drop down from appearing at all. Perhaps I am doing something incorrectly?

The code would have looked like this:

<div style="position:relative;">
<div id="dropinboxv2cover">
<div id="dropinboxv2">
<img src="images/book-ad.jpg" align="center" width="298" height="208"><br>
<a class="box" href="book.htm"><b>View Sample Pages / Purchase On-line</b></a>   <a class="box" href="javascript:void();" onclick="dismissboxv2();return false;">Close this box</a>
</div>
</div>
</div>

So, that did not work. What am I missing?

**jscheuer1** · 02-01-2007, 05:52 AM

Make these changes/additions to the script:

Code:

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="50%"
crossboxcover.style.marginLeft=-170+'px'
crossboxcover.style.top=dropboxtop+"px"
crossboxcover.style.visibility=(dom||ie)? "visible" : "show"
dropstart=setInterval("dropinv2()",50)
}

Notes: The 50% is self explanatory but, this will only put the leading left edge of the box in the center of the page. That is why we subtract half the cover's width (in this case 170 - half of its 340px width set in the style section) as a negative left margin.

Thread: Amazon drop in box

Thread Tools

Search Thread

Amazon drop in box

Center Amazon Drop down on page

Bookmarks

Bookmarks

Posting Permissions