PDA

View Full Version : Panels hiding content



spef
07-31-2008, 07:21 PM
Hi... i'm new here and also fairly new to javascript. I've been searching for some time now for a specific effect that must be possible with javascript.
I would like to have to panels hiding most of the main content and only leaving some space to view the content underneath. And then when clicked on a button the top panel would slide upwards and the bottom one downwards revealing the complete contents.

Maybe it's easier to understand with a picture of what I mean:
http://img239.imageshack.us/img239/7695/slideza9.jpg

The white space and red bars is the content/visible area. The black areas would hide the content. In the second image they could be visible or be completely out of sight. They don't need to go up anymore.

As said... i'm fairly new to javascript but what would be the way to go here? Somebody seen this in action somewhere? Or does somebody have some useful tips?
Thanks in advance!

jscheuer1
08-01-2008, 09:56 AM
This looks quite akin to something we've been working on in another thread using jQuery:

http://www.dynamicdrive.com/forums/showthread.php?t=34888

There we are sliding (the .animate() method in jQuery) one panel up onmouseover (the .hover() method in jQuery). However, similar sort of code with a different (not too different though) sort of markup and styles would likely work. I'll see if I can throw together a demo.

I'm wondering though, is this a full page effect or just for an area of the page. If full page, how do you envision it working in windows of various heights and widths, particularly very tall or short windows, very wide or narrow windows?

spef
08-01-2008, 11:21 AM
I like it to be a full page effect. The panel to the top wouldn't cause any problems. The one on the bottom should use 100% of the window height minus the absolute height of the top panel + the visual area you want (at least I think that should be possible). The width should also be 100%.

After I posted this topic, I stumbled upon this page (http://mediasauce.com/)
It has about the desired effect on top. I don't need the bouncing by the way. But I like it to be reversed... that it starts with the panels opened and that it will close both panels by clicking on a button.

Thanks for replying!

jscheuer1
08-01-2008, 11:30 AM
Full page is weird (but should be able to be worked out one way or the other depending upon how flexible your layout underneath the covers will be) because, you could have a page (window actually) of such varying dimensions, it could end up looking very bad in some cases. Especially as your content behind all this, if it flows to the window shape and size may be very hard to line up in any particular guaranteed way visa vis the portion seen at first. The button would probably then need to go outside of the covered area, because otherwise it might be covered too under certain circumstances.

Anyways, here is a simple demo of the basics of this effect written just for an image on the page:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>2 Sliding Divs</title>
<style type="text/css">
html, body { margin:0; padding:0; }
img { border:none; }

div.slide, .slidebut { margin:10px auto; width:500px; height:334px; position:relative; overflow:hidden; }
.slidebut {height:3em;position:static;}
div.bot_cover { margin:0; background:#000; color:#444; position:absolute; bottom:0; height:200px; width:100%; }
div.top_cover { margin:0; background:#000; color:#444; position:absolute; top:0; height:100px; width:100%; }

#attribution { font:bold 11px Arial; color:#888; position:fixed; bottom:0px; left:0; width:100%; }
#attribution a { color:#aaa; text-decoration:none; }
#attribution p { margin:0; padding:5px; background:#eee; }

</style>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.pack.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".but").click(
function() {
$(".top_cover").animate({top: "-100px"}, 1300);
$(".bot_cover").animate({bottom: "-200px"}, 1300);
}
);
});
</script>
</head>
<body>


<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 class="bot_cover"></div>
<div class="top_cover"></div>
</div>
<div class="slidebut">
<input class="but" type="button" value="Reveal">
</div>

<div id="attribution">
<p>This work is licensed under a <a href="http://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution-Share Alike 3.0 Unported License</a>. Images are properties of their respective owners.</p>
</div>

</body>
</html>

Please post a link to your page so I can see how its content is laid out.

spef
08-01-2008, 12:39 PM
Thanks a lot for such quick replies.
I haven't really started with site i'm trying to build. I'm figuring out right now if the desired effect could be possible. But I think it will be optimized for 1024xX and for bigger screen sizes there will be some compensation with background image(s). Main content will be centered.

A quick upload of the site basics can be found here (http://www.dirtypixel.nl/slide). Warning!! It'll give you eyesour right now. I quickly added a background image for testing purposes.

I'll have a look how to adapt your demo to my wishes. I thinking about the height of the bottom panel. Maybe the screen hight should be read out by javascript and the panel size can than be set as the screen hight minus the top panel and the desired visible area.
I'd like to have the button on the bottom panel by the way.

jscheuer1
08-01-2008, 04:16 PM
I've been working on adapting this cross browser and to work with various window orientations. I made it so that it would degrade when no javascript is available, that way at least folks can still see the page. I put my reveal button near the top to prevent its use while the page is scrolled, though I did add an extension, so if they scroll, the entire rest of the page is still covered. It's just that if they are scrolled too far and then reveal, the effect is partially ruined:


<!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.extend_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
*/

(function(){
var t = .2; //fraction of the window covered at the top
var b = .6; //fraction of the window covered at the bottom

///////////// Edit Below at Your Own Risk /////////////

var wh = window.innerHeight? window.innerHeight : document.documentElement.clientHeight;
t = t * wh;
b = b * wh + 40;
$('head').append('<style type="text/css">\n'+
'div.slidebut {display:block;height:3em;position:absolute;top:20px;left:20px;z-index:101;}\n'+
'div.top_cover {height:' + t + 'px;display:block;margin:0;background:#000;position:absolute;left:0;top:0;width:100%;z-index:100;}\n'+
'div.bot_cover {height:' + b + 'px;display:block;margin:0;background:#000;position:absolute;left:0;top:' + (wh - b + 40) + 'px;width:100%;z-index:100;}\n'+
'div.extend_cover {display:block;margin:0;background:#000;position:absolute;left:0;top:' + (wh + 35) + 'px;width:100%;z-index:100;}\n'+
'<\/style>\n');
})();
$(document).ready(function(){
var t = $(".top_cover"), b = $(".bot_cover"), e = $(".extend_cover"),
wh = window.innerHeight? window.innerHeight : document.documentElement.clientHeight;
e.css('height', Math.max(0, $('body').height() + 25 - wh) + 'px');
$(".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();e.hide();});
}
);
});
</script>
</head>
<body>
<div class="bot_cover"></div>
<div class="top_cover"></div>
<div class="extend_cover"></div>
<div class="slidebut">
<input class="but" type="button" value="Reveal">
</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>

spef
08-01-2008, 04:24 PM
I've managed to get it to work like I had it in mind. Of course I can tweak it a bit more and the code has to be cleaned up but at least I know it's possible. It was relatively simple but it took long enough. The bottom panel should also be positioned from the top and slided down.
Firefox and IE are playing nicely along but Opera isn't though. Is Opera always doing this or only in this particular setup? I couldn't test safari.

spef
08-01-2008, 04:48 PM
Thank you very much. And of course this one is nicely working in Opera. I'll try to figure out what you did exactly. There is no better way of learning this stuff than from someone who has truly mastered it.
Now I can try to tweak it! Thanks again :)

jscheuer1
08-02-2008, 01:16 AM
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:


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

spef
08-02-2008, 06:13 PM
After some consideration I chose your latest version. At first I was after the effect in the previous version but this one will do just fine. Both have their advantages and disadvantages. The latest one (fixed positioning) fails when resizing to a larger screensize after the page loaded. The previous one (absolute positioning) fails when the the bottom div disappears behind the extender div, or could that be changed with the z-index?
I changed the button to a custom image and took the script and style out of the html and it validates for strict xhtml 1.0 now. Thanks again... and again.

jscheuer1
08-02-2008, 11:28 PM
It would might be easier to add an onresize event to the latest version than to deal with the other version. Changing the z-index wouldn't help there because as you move the bottom panel out, it is not there. So no matter what its z-index, it still couldn't cover the extension. One possibility there, as you may have noticed I added some to the height of the bottom cover and pushed the extension down a bit. If these adjustments were larger, it might take care of this. But that might give rise to other issues.

When I get more time I will play around with both ideas. In the meantime I've got yet another version of the fixed positioning method that fixes the page itself (in all but IE 6) while it is covered, so that it cannot be scrolled underneath the covers until they are removed. I'd like to get IE 6 to act that way too, but since it doesn't do fixed positioning, it will be tricky. And with that there is an issue with some browsers not exhibiting a vertical scrollbar in some cases, then all of a sudden having one if the content of the page is high enough. That causes a (about 22px) jump to the left once the covers are removed. I can deal with that if I can detect when it may happen. It needs detection because adding the workaround for it in cases where it won't happen would cause the opposite sort of jump, or a page that renders in a way non-native to those browsers (FF, Opera, possibly others).

I'll report back any developments.

spef
08-03-2008, 12:38 PM
I must say that i've stuck too long to flash for animation and stuff. The more I read up on javascript and try to analyze the code the more it interests me. But it will take time to produce some clean cross-browser code myself. Therefore i'll be following this and other threads. Thanks again for spending your precious time on this.

jscheuer1
08-03-2008, 07:22 PM
I was right about playing with the numbers in the non-fixed version, it took care of the problem, but caused another. Since the bottom cover became larger it had to move at a different rate than the top cover to traverse its height in the same amount of time, even allowing for that, scrolling the page before the reveal process made things look bad during the reveal process.

So I've given up on that approach pending further inspiration (if any).

My second set of ideas for the fixed positioned version seem to have all panned out well. I was able to add IE 6 to all the other browsers in preventing scrolling of the underlying page until revealed and to add an onresize event that prevents the problems you observed. And I found what appears to be a satisfactory way of detecting which browsers need to have the vertical scrollbar added before the content is revealed and to determine when this is required and when not in those browsers. This last bit may need tweaking as I'm currently keying it on most browser that need this having a 17 pixel difference between window.innerWidth and document.documentElement.clientWidth and any others that require it having a 15 pixel difference. If other browsers that need this are encountered and they have a different variance, it can be added to the calculation as long as they see this variance as an indication of whether or not there is a vertical scrollbar.

There is one important addition to the HTML markup that may not be immediately apparent. I've added a:


<div id="fixed_container">

right after the opening <body> tag. It must contain the entire page, so its closing tag is just before the </body> tag. If your markup has extra </div>'s (ones with no corresponding opening <div>'s) in it, it will mess this up.

If your layout requires its own container division around all of the rest of the content, it may go immediately within this fixed_container division.

Here's the 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
*/

jQuery(function($) {
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
var bgimage = false; //required for IE 6 only, set to quoted image URL if the body has a background image, otherwise false (unquoted)

//Note: For best results when using a background image for the body, in all browsers, its background-attachment should be fixed

///////////// Edit Below at Your Own Risk /////////////

var d=document, c='compatMode', cH = 'clientHeight', t1 = t, b1 = b, ie = false;
wh = window.innerHeight? window.innerHeight : d[c] && d[c]=='CSS1Compat'? d.documentElement[cH] : null;
if(!wh) return;
t = t * wh;
b = b * wh + 40;
/*@cc_on @*/
/*@if(@_jscript_version >= 5)
ie = $.browser.version;
@end @*/
$('head').append('\n<style type="text/css">\n'+
(window.innerWidth && d.documentElement[cH]? '' : 'div#fixed_container {position:fixed;width:100%;}\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'+
(ie && ie < 7 ? '<script type="text/javascript">\n'+
'jQuery("#fixed_container").css({position : "absolute", top : 0, left : 0, height : document.documentElement.clientHeight + "px", overflowY : "hidden"});\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: ' + (bgimage? 'url(' + bgimage + ') ' : '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' : ''));
$(document).ready(function(){
var diff = function(v){return v == 17 || v == 15? true : false;};
if(window.innerWidth && d.documentElement.clientWidth && diff(window.innerWidth - d.documentElement.clientWidth)){
$('html').css('overflowY', 'scroll');
}
if(!ie)
$('#fixed_container').css({position : 'fixed', width : '100%'});
var t = $(".top_cover"), b = $(".bot_cover"), rs = function(){
var wh = window.innerHeight? window.innerHeight : d.documentElement[cH], b2 = b1 * wh + 40;
if(ie && ie < 7)
$('#fixed_container').css('height', wh + 'px');
t.css('height', t1 * wh + 'px');
b.css({height : b2 + 'px', top : wh - b2 + 40});
};
$(".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();
$('#fixed_container').css({position : 'static', width : 'auto', overflow : '', height : ''});
$('html').css('overflow', '');});
$(window).unbind('resize', rs);
});
$(window).bind('resize', rs);
});
})();});
</script>
</head>
<body>
<div id="fixed_container">
<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>

</div>
</body>
</html>

spef
08-03-2008, 10:21 PM
So my crash course into javascript (& the english language) continues ;)
The way of building up the code to this one makes it a lot easier to understand it. I think I wouldn't have known where to start when this one would have been your first one.
And more important... this is the effect that i wanted. Now off to sleep... you really can loose track of time this way. Needless to say it over and over again but i'll do it anyways; thanks!

jscheuer1
08-04-2008, 09:23 AM
Here's another update. With such a minor update I would normally just edit the previous post. But you seem to like tracking the development of the code, so I'm making a fresh post of it. The two things I've added are a few more local variables to reduce some of the code lines' length. And more importantly, I realized that onresize we need to recheck all this business about the vertical scrollbar in certain browsers. I also corrected a typo that had one of the (what I had intended to be) local variables (wh) initially a variable in the global scope without formal declaration. Here's the 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;}
div#fixed_container {margin:0; padding:0;}
</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
*/

jQuery(function($) {
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
var bgimage = false; //required for IE 6 only, set to quoted image URL if the body has a background image, otherwise false (unquoted)

//Note: For best results when using a background image for the body, in all browsers, its background-attachment should be fixed

///////////// Edit Below at Your Own Risk /////////////

var d=document, c='compatMode', cH = 'clientHeight', cW = 'clientWidth', iH = 'innerHeight', iW = 'innerWidth',
t1 = t, b1 = b, ie = false, wh = window[iH]? window[iH] : d[c] && d[c]=='CSS1Compat'? d.documentElement[cH] : null;
if(!wh) return;
t = t * wh;
b = b * wh + 40;
/*@cc_on @*/
/*@if(@_jscript_version >= 5)
ie = $.browser.version;
@end @*/
$('head').append('\n<style type="text/css">\n'+
(window[iW] && d.documentElement[cW]? '' : 'div#fixed_container {position:fixed;width:100%;}\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'+
(ie && ie < 7 ? '<script type="text/javascript">\n'+
'jQuery("#fixed_container").css({position : "absolute", top : 0, left : 0, height : document.documentElement.clientHeight + "px", overflowY : "hidden"});\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: ' + (bgimage? 'url(' + bgimage + ') ' : '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' : ''));
$(document).ready(function(){
var diff = function(v){return v == 17 || v == 15? true : false;};
if(window[iW] && d.documentElement[cW] && diff(window[iW] - d.documentElement[cW]))
$('html').css('overflowY', 'scroll');
if(!ie)
$('#fixed_container').css({position : 'fixed', width : '100%'});
var t = $(".top_cover"), b = $(".bot_cover"), rs = function(){
var wh = window[iH]? window[iH] : d.documentElement[cH], b2 = b1 * wh + 40;
if(ie && ie < 7)
$('#fixed_container').css('height', wh + 'px');
else if(!ie){
$('html').css('overflow', 'hidden');
if(window[iW] && d.documentElement[cW] && window[iW] - d.documentElement[cW] <= 17 && $('#fixed_container').height() > d.documentElement[cH])
$('html').css('overflowY', 'scroll');
}
t.css('height', t1 * wh + 'px');
b.css({height : b2 + 'px', top : wh - b2 + 40});
};
$(".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();
$('#fixed_container').css({position : 'static', width : 'auto', overflow : '', height : ''});
$('html').css('overflow', '');});
$(window).unbind('resize', rs);
});
$(window).bind('resize', rs);
});
})();});
</script>
</head>
<body>
<div id="fixed_container">
<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>

</div>
</body>
</html>