I'm trying to show content below a full-screen slideshow that behaves normally. Only when you scroll down should the remaining content be revealed. So on load the slideshow should still be 100% in height and width.
I tried put a margin top that is the same size as the browser height (detected with js) and put the slideshow position absolute but that did not work ...
Would love to hear your thoughts on this, thanks a lot!
example: http://www.fabrikgrafik.be/slider/ (I'm trying to get the red content div below the slideshow without losing the slideshow functionality)
It's really simple, don't change anything from what it was aminute ago except to add the following 2 lines of jQuery:
// made edit to hide content till slideshow is rdy
$("#content-wrapper").css("margin-top", $("#supersized").height()).show();
$(window).resize(function(e) { $("#content-wrapper").css("margin-top", $("#supersized").height()); });
Also, you might change this CSS:
#controls-wrapper { display: none; position: absolute; } /* from fixed */