Slideshow backgrounds

Hey everyone,

I'm trying to figure out how to go about making a slideshow (Like the one here (http://www.valvesoftware.com/)) 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

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:

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

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