Here's my latest version. It uses fixed positioning (and a spoof of fixed positioning in IE 6, which didn't support fixed positioning - IE 7+ does). I think you will like the effect:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Slide Reveal Page - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html, body {margin : 0; padding : 0;}
img {border : none;}
div.slide {padding-top : 10px; margin : 0 auto; width : 500px; height : 334px;}
div.top_cover, div.bot_cover, div.slidebut {display : none;}
</style>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.pack.js"></script>
<script type="text/javascript">
/* Slide Reveal Page script ©2008 John Davenport Scheuer
This notice must remain for legal use
as first seen in http://www.dynamicdrive.com/forums/
username: jscheuer1
*/
if(document.getElementById)
(function(){
var t = .2; //fraction of the window covered at the top
var b = .6; //fraction of the window covered at the bottom
var r = "1em"; //offset of Reveal button from the top of the bottom cover
///////////// Edit Below at Your Own Risk /////////////
var d=document, c='compatMode', cH = 'clientHeight',
wh = window.innerHeight? window.innerHeight : d[c] && d[c]=='CSS1Compat'? d.documentElement[cH] : null;
if(!wh) return;
t = t * wh;
b = b * wh + 40;
$('head').append('\n<style type="text/css">\n'+
'div.slidebut {display:block;height:3em;position:absolute;top:' + r + ';left:0;width:100%;text-align:center;z-index:101;}\n'+
'div.top_cover {height:' + t + 'px;display:block;margin:0;background:#000;position:fixed;left:0;top:0;width:100%;z-index:100;}\n'+
'div.bot_cover {height:' + b + 'px;display:block;margin:0;background:#000;position:fixed;left:0;top:' + (wh - b + 40) + 'px;width:100%;z-index:100;}\n'+
'<\/style>\n'+
'<!--[if lt IE 7]>\n'+
'<script type="text/javascript">\n'+
'function fixedIE_func_for_SlideReveal77291(tl, n){\n'+
'var sc="scroll"+tl, d=document, c="compatMode";\n'+
'return d[c] && d[c]=="CSS1Compat"? d.documentElement[sc]+n+"px" : d.body[sc]+n+"px";\n'+
'}\n'+
'<\/script>\n'+
'<style type="text/css">\n'+
'body {background:url(foo) fixed;}\n'+
'div.top_cover {position:absolute;top:expression(fixedIE_func_for_SlideReveal77291("Top",0));left:expression(fixedIE_func_for_SlideReveal77291("Left",0));}\n'+
'div.bot_cover {position:absolute;top:expression(fixedIE_func_for_SlideReveal77291("Top",' + (wh - b + 40) + '));left:expression(fixedIE_func_for_SlideReveal77291("Left",0));}\n'+
'<\/style>\n'+
'<![endif]-->');
$(document).ready(function(){
var t = $(".top_cover"), b = $(".bot_cover"), wh = window.innerHeight? window.innerHeight : d.documentElement;
$(".but").click(
function() {
$(this).hide();
t.animate({top: -t.height() + 'px'}, 1300, 'swing', function(){t.hide();});
b.animate({top: '+=' + b.height() + 'px'}, 1300, 'swing', function(){b.hide();});
}
);
});
})();
</script>
</head>
<body>
<div class="top_cover"></div>
<div class="bot_cover"> <div class="slidebut">
<input class="but" type="button" value="Reveal">
</div>
</div>
<div class="slide">
<div class="photo"><a href="http://www.flickr.com/photos/antifluor/2627534389/"><img title="" src="http://farm4.static.flickr.com/3118/2627534389_0223dabfbb.jpg" alt="http://www.flickr.com/photos/antifluor/2627534389/"></a></div>
</div>
<p>HI</p>
<p>HI</p>
<p>HI</p>
<p>HI</p>
<p>HI</p>
<p>HI</p>
<p>HI</p>
<p>HI</p>
<p>HI</p>
<p>HI</p>
<p>HI</p>
<p>HI</p>
<p>HI</p>
<p>HI</p>
<p>HI</p>
<p>HI</p>
<p>HI</p>
<p>HI</p>
<p>HI</p>
<p>HI</p>
<p>HI</p>
<p>HI</p>
<p>HI</p>
<p>HI</p>
<p>HI</p>
<p>HI</p>
<p>HI</p>
<p>HI</p>
<p>HI</p>
<p>HI</p>
<p>HI</p>
<p>HI</p>
<p>HI</p>
<p>HI</p>
<p>HI</p>
<p>HI</p>
<p>HI</p>
<p>HI</p>
<p>HI</p>
<p>HI</p>
<p>HI</p>
<p>HI</p>
<p>HI</p>
<p>HI</p>
<p>HI</p>
<p>HI</p>
<p>HI</p>
<p>HI</p>
<p>HI</p>
<p>HI</p>
<p>HI</p>
<p>HI</p>
<p>HI</p>
<p>HI</p>
<p>HI</p>
</body>
</html>
Panels hiding content
Reply With Quote
Bookmarks