0

I'm programming a jquery slider right now and I have the width set to 100% and I want it to align to the bottom of the window no matter how the window is resized. I have found ways to make it stick to the bottom the whole time you scroll down, but I do not want this. I want to be able to scroll below this slider to get to more content.

This website shows the kind of function that I am looking for. I tried to inspect it with firebug to find the part how it was happening but I couldnt figure it out.

http://pixelthemes.net/immersion/

Thanks for the help!

Mike Schoch
  • 1
  • 4

1 Answers1

1

You could achieve this simply by calculating the size and not aligning the gallery to the bottom.

var resize = function () {
    var availHeight = window.innerHeight;
    // you need to either calculate
    // or set a fixed offset from the top for content above
    var offset = 80;

    document.getElementById("slider").style.height = availHeight - offset + "px";
}

window.addEventListener("resize", resize, false);
window.addEventListener("load", resize, false);

Assuming that your slider has a 100% width, it should exactly do what you want. If your content above the slider is 80px heigh, it should exactly stick to the bottom of the window if it is scrolled all the way up.

Torsten Walter
  • 5,614
  • 23
  • 26
  • So i plugged this into my javacript file and it had no effect. I have double checked and width is set to 100% and I even changed my slider to allow for adjustable height. Any suggestions? – Mike Schoch Jul 14 '12 at 15:02
  • It would depend, whether the browser you use supports `addEventListener`. Also, without knowing your exact document structure there is no way of telling whats going wrong. – Torsten Walter Jul 15 '12 at 19:11
  • Sorry, my bad. I just noticed I had a typo in there. I mixed up jury and DOM ids. – Torsten Walter Jul 15 '12 at 19:18