Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    Jul 2011
    Posts
    118
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Slideshow backgrounds

    Hey everyone,

    I'm trying to figure out how to go about making a slideshow (Like the one here) which automatically flicks between content but also allows users to jump to specific slides.

    Now I've done basic ones before, none of which I've been 100% happy with the functionality of them, but for this one I ideally need it to be effectively a background.

    Now I'm presuming for an interactive sliding background it would need to be an independent div with a low z-index but I was wondering if anyone had any advice on the subject?

    Thanks all

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,620
    Thanks
    78
    Thanked 4,388 Times in 4,353 Posts
    What advice are you looking for? How to position it so it is correctly behind the elements it is supposed to be the background of?

    A lot of "it depends" there.

    Ideally, you would do something like:
    Code:
    <div style="position: relative;">
        <div style="position: absolute; z-index: 1;">...background contents...</div>
        <div style="position: absolute: z-index: 2;">...foreground contents...</div>
    </div>
    And make the height and width of all 3 divs identical.

    But sometimes you want to simply slip the background behind already existing content. That's not too hard, using JavaScript. You simply use offsetTop and offsetLeft (repeatedly) to find the absolute position of the existing content.

    Example:
    Code:
    var node = document.getElementById("someExistingContent"); // or however you find it
    var x = 0;
    var y = 0;
    while ( node != null )
    {
        x += node.offsetLeft;
        y += node.offsetTop
        node = node.offsetParent;
    }
    var bg = document.getElementById("someDivWithPositionAbsolute");
    bg.style.top = y + "px";
    bg.style.left = x + "px";
    Alternatively, you can position the background normally and then use absolute positioning (as just above) to place the stuff that goes in front of it. (Which is what I usually do, esp. for slideshows, but your mileage may vary.)
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

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