Page 1 of 2 12 LastLast
Results 1 to 10 of 15

Thread: Panels hiding content

  1. #1
    Join Date
    Jul 2008
    Posts
    8
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default Panels hiding content

    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:


    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!
    Last edited by spef; 07-31-2008 at 07:45 PM.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    This looks quite akin to something we've been working on in another thread using jQuery:

    http://www.dynamicdrive.com/forums/s...ad.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?
    Last edited by jscheuer1; 08-01-2008 at 10:30 AM. Reason: ask for more info
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jul 2008
    Posts
    8
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

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

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    <!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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Jul 2008
    Posts
    8
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    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. 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.
    Last edited by spef; 08-01-2008 at 04:14 PM.

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:

    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.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>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. The Following User Says Thank You to jscheuer1 For This Useful Post:

    spef (08-01-2008)

  8. #7
    Join Date
    Jul 2008
    Posts
    8
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    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.
    Last edited by spef; 08-02-2008 at 04:48 AM.

  9. #8
    Join Date
    Jul 2008
    Posts
    8
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    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

  10. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  11. The Following User Says Thank You to jscheuer1 For This Useful Post:

    spef (08-02-2008)

  12. #10
    Join Date
    Jul 2008
    Posts
    8
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    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.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •