Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: Amazon drop in box

  1. #1
    Join Date
    Mar 2006
    Posts
    41
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Amazon drop in box

    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!

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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>&nbsp; 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.
    Last edited by jscheuer1; 03-12-2006 at 05:59 PM. Reason: add important fact
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Mar 2006
    Posts
    41
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

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

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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).
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Mar 2006
    Posts
    41
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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?

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Mar 2006
    Posts
    41
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Quote 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...

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Quote 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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. #9
    Join Date
    Feb 2007
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Center Amazon Drop down on page

    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>&nbsp;&nbsp;&nbsp;<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?

  10. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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
  •