Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Mar 2011
    Posts
    26
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Sticky Footer Height Conundrum

    Hi,

    I'm trying to make a "sticky footer" that will stay at the bottom of the page and be about 2/3 of the page height. Then, when a button is clicked, the footer will slide down and be only about 1/3 the page height, collapsing the paragraphs on the footer and revealing the content the footer was covering.

    My first try at this is to make 3 divs within the sticky footer, and make the middle div the collapsable/expandable div.

    VERY hasty example, it will be a brown paper bag with art supplies inside.
    Sticky Footer Height Conundrum-sample.jpg

    Issue A: What is the best way to create the smooth collapse/expand effect on the middle div using javaScript or jQuery?

    Issue B: All of the CSS based sticky footer fixes that I've found require the main div to have a bottom padding or margin of the footer's height. How can I fix this for the footer's two heights (with and without the middle section)? Is there a javaScript or jQuery way to do an expandable sticky footer?

    Issue C: The sticky footer fix makes it so that the bottom footer doesn't cover the content above it, but I WANT it to cover the content in this case, is there a better way to do this? Absolute positioning the footer?

    Html
    Code:
    <body>
    <div id="whole">
    <div id="push"></div>
    </div>
    <div id="top"></div>
    <div id="hide"></div>
    <div id="bottom"></div>
    </body>
    Css
    Code:
    *{margin:0}
    html, body {height: 100%;}
    
    #whole {
    	background-color: #09F;
    	min-height: 100%;
    	height: auto;
    	height: 100%;
    	margin: 0 auto -150px;}
    	
    #push {min-height:150px; height:auto;}
    
    #top {
      height: 50px;
      clear:both;
      background-color:yellow;}
    
    #hide {
      min-height: 50px;
      height:200px;
      clear:both;
      background-color:green;}
    
    #bottom {
      height: 50px;
      clear:both;
      background-color:red;}
    Last edited by shmoomoo; 01-03-2012 at 03:17 AM. Reason: added attachment

  • #2
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,798
    Thanks
    19
    Thanked 156 Times in 147 Posts
    I'm a little bit unclear about the effect that you are trying to achieve here...Can you provide a URL of another page that illustrates what you are after?
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • #3
    New Coder
    Join Date
    Mar 2011
    Posts
    26
    Thanks
    4
    Thanked 0 Times in 0 Posts

    hasty example

    Quickly whipped this up. Planning on having it look like a brown paper bag with art supplies inside, but haven't started the graphics yet.Sticky Footer Height Conundrum-sample.jpg

  • #4
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,798
    Thanks
    19
    Thanked 156 Times in 147 Posts
    Well, assuming your web page has a fixed height, then try the following:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    	<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
    	<title>TITLE</title>
    	<style type="text/css">
    		#container
    		{
    			width:950px;
    			height:850px;
    			margin:0 auto;
    			position:relative;
    		}
    
    		#header
    		{
    			width:950px;
    			height:130px;
    			background-color:#9B66FF;
    		}
    
    		#footer
    		{
    			width:830px;
    			background-color:#201F1D;
    			position:absolute;
    			bottom:0;
    			color:#fff;
    			padding:15px 60px;
    			font:14px/24px Verdana,Arial;
    		}
    
    		#arrowDiv
    		{
    			text-align:center;
    			font-weight:bold;
    			cursor:pointer;
    		}
    
    		#navigation
    		{
    			width:830px;
    			padding:0 0 3px 0;
    			border-bottom:1px solid #fff;
    			position:absolute;
    			bottom:25px;
    		}
    	</style>
    </head>
    <body>
    
    <div id="container">
    	<div id="header">&nbsp;</div>
    	<div id="content">
    		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam a erat lorem. Duis et est vitae justo suscipit sagittis sit amet a nunc. Vestibulum gravida eleifend suscipit. Proin id mi magna. Proin adipiscing fringilla neque, non consectetur diam lobortis quis. Vivamus at mauris mauris, viverra semper lorem. Aenean nisl arcu, convallis et suscipit quis, vulputate id est. Sed sit amet metus urna.</p>
    		<p>Nulla fringilla faucibus vestibulum. Donec nulla metus, auctor eget tincidunt non, pulvinar eu nisi. Integer id enim in felis sollicitudin semper eget at nulla. Donec suscipit fringilla tincidunt. Suspendisse mollis luctus diam, sit amet fringilla felis accumsan a. Nam luctus porta dolor, nec varius elit ultrices vel. Nam vestibulum dictum libero. Proin condimentum dui non eros mattis eget tempor nunc semper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec elit felis, viverra vel aliquet in, porttitor vel quam. Mauris dapibus risus ligula. Sed elementum est vitae nisi egestas venenatis.</p>
    		<p>Praesent suscipit tristique vestibulum. Proin et sem metus, id accumsan lacus. Nullam tristique feugiat ante, et feugiat magna pellentesque at. Pellentesque scelerisque viverra nulla sed vulputate. Donec interdum, sem in fermentum blandit, lorem orci tincidunt leo, at condimentum nisi dolor ac felis. Donec placerat dolor sit amet dui feugiat pharetra. Donec pulvinar diam ac turpis elementum sed iaculis turpis luctus. Morbi faucibus cursus lectus a lobortis. Nam non nulla neque. Nulla facilisis nisi sapien. Nam vel risus orci. Integer congue, nulla vitae dapibus tincidunt, enim dolor ornare lorem, in tempus tellus arcu eu nunc. Nunc blandit risus sagittis ipsum varius nec sagittis lacus mollis. Pellentesque nisi nisi, scelerisque nec tincidunt nec, ultricies quis nisi. Donec lacinia augue eget diam cursus vitae rutrum erat lacinia. Vestibulum libero erat, venenatis id tempor eget, ullamcorper ac nisl.</p>
    	</div>
    	<div id="footer" style="height:550px">
    		<div id="arrowDiv" onclick="slideFooter(this, 'collapsableContent');" title="click to slide footer">
    			<p>click to slide footer</p>
    			<p>|<br />|<br />\/</p>
    		</div>
    		<h3 style="text-decoration:underline;margin:30px 0 0 0">About:</h3>
    		<div id="collapsableContent">
    			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam a erat lorem. Duis et est vitae justo suscipit sagittis sit amet a nunc. Vestibulum gravida eleifend suscipit. Proin id mi magna. Proin adipiscing fringilla neque, non consectetur diam lobortis quis. Vivamus at mauris mauris, viverra semper lorem. Aenean nisl arcu, convallis et suscipit quis, vulputate id est. Sed sit amet metus urna.</p>
    		</div>
    		<p id="navigation">Navigation</p>
    	</div>
    </div>
    
    <script type="text/javascript">
    	var slidingDiv = {'maxheight' : 550, 'minheight' : 250, 'speed' : 10, 'direction' : 2};
    
    	function slideFooter(arrowDiv, collapseID)
    	{
    		var footerDiv = arrowDiv.parentNode;
    		var collapseDiv = document.getElementById(collapseID);
    		footerDiv.style.height = (slidingDiv['direction'] == 2) ? parseInt(footerDiv.style.height) - slidingDiv['speed'] +'px' : parseInt(footerDiv.style.height) + slidingDiv['speed'] + 'px';
    		if (parseInt(footerDiv.style.height) > slidingDiv['minheight'] && parseInt(footerDiv.style.height) < slidingDiv['maxheight'])
    		{
    			collapseDiv.style.display = (slidingDiv['direction'] == 2) ? "none" : collapseDiv.style.display;
    			setTimeout(function(){slideFooter(arrowDiv, collapseID)}, 30);
    		}
    		else
    		{
    			var arrow = arrowDiv.getElementsByTagName('p')[1];
    			arrow.innerHTML = (slidingDiv['direction'] == 2) ? "/\\<br />|<br />|" : "|<br />|<br />\\/";
    			slidingDiv['direction'] = (slidingDiv['direction'] == 2) ? 1 : 2;
    			collapseDiv.style.display = (slidingDiv['direction'] == 2) ? "block" : collapseDiv.style.display;
    		}
    	}
    </script>
    
    </body>
    </html>
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • #5
    New Coder
    Join Date
    Mar 2011
    Posts
    26
    Thanks
    4
    Thanked 0 Times in 0 Posts
    AWESOME! That worked perfectly to create the desired effect! I'm still reading all the code to fully understand how you did it but I think I get it. Only problem is getting it to stick to the bottom of the browser window. Is that possible??

  • #6
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,798
    Thanks
    19
    Thanked 156 Times in 147 Posts
    Change the position property to 'fixed' instead of 'absolute':

    Code:
    		#footer
    		{
    			width:830px;
    			background-color:#201F1D;
    			position:fixed;
    			bottom:0;
    			color:#fff;
    			padding:15px 60px;
    			font:14px/24px Verdana,Arial;
    		}
    Is that the effect you are after?
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!


  •  

    Posting Permissions

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