Responsive sticky footer not working over full screen slideshow

yathrakaaran · December 31, 2015, 2:21pm

I am trying to place a responsive sticky footer over a full screen slideshow. For the sticky footer I am using this solution ( a Javascript and CSS solution ) Sticky footer link. Slideshow is a Javascript slideshow. But I am not able to get the sticky footer to work with the slideshow. Once I remove the slideshow, the sticky footer works!. I am not sure what is going on here but I do think that it has to do something with the absolute positioning of the footer. Here is a live link to the problem link with the problem Is there a way I can make the sticky footer work ? Here is my CSS and HTML…

<!DOCTYPE html>
<html lang="en">
<head>
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <meta charset="utf-8">
    <meta content="by RT." name="author">
    <meta content="Copyright &copy; 2014 rajeevthomas.com" name="Copyright">
    <link href="/root//favicon.ico" rel="icon" type="image/x-icon">
    <title>Home Page title</title>
    <meta content="Photographer Website" name="keywords">
    <meta content="Home Page Description" name="description">
    <link href="/styles.css" rel="stylesheet" type=
    "text/css">
    <script src="/jquery-2.1.4.min.js" type=
    "text/javascript">
    </script>
    <script src="jquery-bgstretcher-3.3.1.min.js" type=
    "text/javascript">
    </script>
    <style>


    .bgstretcher-area {
text-align: left;
height:100%;
}
.bgstretcher-page {height:100%;}
.bgstretcher-container{height:100%;}

.bgstretcher {
background: black;
overflow: hidden;
width: 100%;
position: fixed;
z-index: 1;
height:100%;
}
.bgstretcher,
.bgstretcher ul,
.bgstretcher li {
left: 0;
top: 0;
height:100%;
}
.bgstretcher ul,
.bgstretcher li {
position: absolute;
}
.bgstretcher ul,
.bgstretcher li {
margin: 0;
padding: 0;
list-style: none;
}
/*  Compatibility with old browsers  */
.bgstretcher {
_position: absolute;
}
.bgs-description-pane {
display: block;
background: rgba(0, 0, 0, 0.7);
position: relative;
z-index: 10000;
padding: 15px;
color: #ffffff;
font-size: 14px;
}

.footer{
margin: 0 auto;
text-align:center;  
clear:both;
position: absolute;
width: 100%;
bottom:0;
height:10%;
color:#FFF;
}


/* NAV */
header {
background-color: rgba(29, 11, 9, 0.6);
border-radius:0px;
padding-top:.5rem;
padding-bottom:.25rem;
box-shadow: 0 0 26px rgba(0, 0, 0, 0); 
}

.nav {
width:100%;
text-align:center;
list-style:none;
position:relative;
z-index:10;
margin-top:0.35rem;

}

.nav li  {
padding:0px 0px;
text-decoration:none;
font-size:.85rem;
text-align:left;
position:relative;
display:inline-block;
margin-left:2rem;
}

.nav > li:hover > a{
background-color : #5c331a;
}

.nav li a:hover {
color:#FFF;
}

.submenu > li:hover > a{
background-color : #5c331a;
}

.nav li a {


font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
color:#a86b4b!important;

}    

p{color:#FFF;}    
    </style>
</head>
<body>
    <div class="container">
        <header>
            <nav>
                <ul class="nav">
                    <li>
                        <a href="/root/">HOME</a>
                    </li>
                    <li>&nbsp;&nbsp;<a href="/root/photos">MY GALLERIES</a>
                    </li>
                    <li>&nbsp;&nbsp;<a href="/search">SEARCH</a>
                    </li>
                    <li>&nbsp;&nbsp;<a href="/about-me">ABOUT ME</a>
                    </li>

                </ul>
            </nav>
        </header>
        <article>
            <section>
                <div class="intro">
                    <p>Welcome to my gallery!</p>
                    <div class="underline"></div>
                </div>
            </section>
        </article>
        <script type="text/javascript">
        jQuery(function($){
        $("body").bgStretcher({
        images: ["1-1.jpg", "2-1.jpg"], 
        imageWidth: 1024,
        imageHeight: 768
        }); 
        }); 
        </script>
        <div class="push"></div>
        <div class="footer">
            <div id="seeker">
                <form accept-charset="utf-8" action="/root/photos/search" id=
                "PhotoCmspageForm" method="get" name="PhotoCmspageForm">
                    <input id="search" name="search" type="text" value=
                    ""><input id="find" type="submit" value="Search">
                </form>
            </div>
            <p class="footnote">Copyright &copy; 2015 rajeevthomas.com</p>
        </div>
    </div>
    <script>
    $('a').each(function() {
    if ($(this).attr('href') != '#' && $(this).attr('href') != ''&& $(this).attr('href') != '/' && $(this).attr('href').indexOf('?') < 0) {
    $(this).attr('href', $(this).attr('href') + '/');
    }
    });
    </script> 
    <script>
    var bumpIt = function() {
    $('body').css('margin-bottom', $('.footer').height());
    },
    didResize = false;
    bumpIt();
    $(window).resize(function() {
    didResize = true;
    });
    setInterval(function() {
    if(didResize) {
    didResize = false;
    bumpIt();
    }
    }, 250);
    </script>
</body>
</html>

PaulOB · December 31, 2015, 4:52pm

Hi,

First things first and that sticky footer method is not ideal and these days you don’t need js for a responsive sticky footer as there are much more robust and solid methods that are much smoother and easier to implement without js or pushers or margins or resize events or fixed heights and so on…

Anyway the problem seems to be that you have nothing to base your height on so add this and re-test.

html,body{margin:0;padding:0;height:100%}

Also note that since you have set the container to height:100% then that means should content exceed the height then it will break out of the container (which may or may not affect the page depending on what follows etc). You really need min-height:100% on the main container and not height:100%.

.bgstretcher-page {
    height: auto;
    min-height: 100%;
}

If you are interested in the non js version of the footer then let me know and I’ll knock up a demo.

PaulOB · December 31, 2015, 5:25pm

I did it anyway

<!DOCTYPE html>
<html lang="en">
<head>
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta charset="utf-8">
<meta content="by RT." name="author">
<meta content="Copyright &copy; 2014 rajeevthomas.com" name="Copyright">
<link href="/root//favicon.ico" rel="icon" type="image/x-icon">
<title>Home Page title</title>
<meta content="Photographer Website" name="keywords">
<meta content="Home Page Description" name="description">
<script src="http://rajeevthomas.com/jquery-2.1.4.min.js"></script>
<script src="http://rajeevthomas.com/jquery-bgstretcher-3.3.1.min.js"></script>
<style>
.bgstretcher-area {
	text-align: left;
	height:100%;
}
.bgstretcher-page {
	height:100%;
}
.bgstretcher-container {
	height:100%;
}
.bgstretcher {
	background: black;
	overflow: hidden;
	width: 100%;
	position: fixed;
	z-index: 1;
	height:100%;
}
.bgstretcher, .bgstretcher ul, .bgstretcher li {
	left: 0;
	top: 0;
	height:100%;
}
.bgstretcher ul, .bgstretcher li {
	position: absolute;
}
.bgstretcher ul, .bgstretcher li {
	margin: 0;
	padding: 0;
	list-style: none;
}
/*  Compatibility with old browsers  */
.bgstretcher {
	_position: absolute;
}
.bgs-description-pane {
	display: block;
	background: rgba(0, 0, 0, 0.7);
	position: relative;
	z-index: 10000;
	padding: 15px;
	color: #ffffff;
	font-size: 14px;
}
.footer {
	margin: 0 auto;
	text-align:center;
	clear:both;
	position: absolute;
	width: 100%;
	bottom:0;
	height:10%;
	color:#FFF;
}
/* NAV */
header {
	background-color: rgba(29, 11, 9, 0.6);
	border-radius:0px;
	padding-top:.5rem;
	padding-bottom:.25rem;
	box-shadow: 0 0 26px rgba(0, 0, 0, 0);
}
.nav {
	width:100%;
	text-align:center;
	list-style:none;
	position:relative;
	z-index:10;
	margin-top:0.35rem;
}
.nav li {
	padding:0px 0px;
	text-decoration:none;
	font-size:.85rem;
	text-align:left;
	position:relative;
	display:inline-block;
	margin-left:2rem;
}
.nav > li:hover > a {
	background-color : #5c331a;
}
.nav li a:hover {
	color:#FFF;
}
.submenu > li:hover > a {
	background-color : #5c331a;
}
.nav li a {
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	color:#a86b4b!important;
}
p {
	color:#FFF;
}
/* added styles as over-rides*/
.nav{/* stop horizontal scrollbar*/
    margin:0;
	padding:8px 0;
}
html,body{
	margin:0;
	padding:0;
	height:100%;
}
.bgstretcher-page {
	display:table;
	height:100%;
	width:100%;
}
.container {
	display:table-cell;
	width:100%;
	padding:8px;
  vertical-align:top;
}
.footer {
	display:table-row;
	height:1px;
	position:static;
}
.intro{padding:8px}
</style>
</head>
<body>
<div class="container">
  <header>
    <nav>
      <ul class="nav">
        <li> <a href="/root/">HOME</a> </li>
        <li>&nbsp;&nbsp;<a href="/root/photos">MY GALLERIES</a> </li>
        <li>&nbsp;&nbsp;<a href="/search">SEARCH</a> </li>
        <li>&nbsp;&nbsp;<a href="/about-me">ABOUT ME</a> </li>
      </ul>
    </nav>
  </header>
  <article>
    <section>
      <div class="intro">
        <p>Welcome to my gallery!</p>
        <div class="underline"></div>
      </div>
    </section>
  </article>
</div>
<div class="footer">
  <div id="seeker">
    <form accept-charset="utf-8" action="/root/photos/search" id=
                "PhotoCmspageForm" method="get" name="PhotoCmspageForm">
      <input id="search" name="search" type="text" value=
                    "">
      <input id="find" type="submit" value="Search">
    </form>
  </div>
  <p class="footnote">Copyright &copy; 2015 rajeevthomas.com</p>
</div>
<script type="text/javascript">
        jQuery(function($){
        $("body").bgStretcher({
        images: ["http://rajeevthomas.com/1-1.jpg", "http://rajeevthomas.com/2-1.jpg"], 
        imageWidth: 1024,
        imageHeight: 768
        }); 
       }); 
</script> 
<script>
    $('a').each(function() {
    if ($(this).attr('href') != '#' && $(this).attr('href') != ''&& $(this).attr('href') != '/' && $(this).attr('href').indexOf('?') < 0) {
    $(this).attr('href', $(this).attr('href') + '/');
    }
    });
    </script>
</body>
</html>

No js needed for the footer and not pushers or heights or margins needed. Its all automatic with css and html.

I also fixed your horizontal scroll on the header.

yathrakaaran · December 31, 2015, 5:44pm

Oh My God Paul…thank you! You just made my day! Yes I am definitely interested in non- js version! Thank you. This is a lot to take in but talk about going above and beyond of my question here! I will implement this now and will let you know if I run in to any problems. Thanks again and Happy New Years to you!

yathrakaaran · December 31, 2015, 6:39pm

Paul…thank you again. Just to understand the js version, I added your code above but it now seems to be better but the footer is not at the very bottom of the page. For some reason it sits above the bottom and there is a scroll past the footer. Here is the link footer Also I added the over ride code to the page to stop the horizontal scroll. But I don’t understand it, how did you figure out the exact number of padding 8px there?

.nav{/* stop horizontal scrollbar*/
    margin:0;
    padding:8px 0;
}

PaulOB · December 31, 2015, 7:20pm

The problem is the js is adding a margin-bottom to the body element of 71px thus making the body:100% high + 71px and therefore too big to fit. The js method is very shaky and is upset by the simplest things and probably won’t work in older browsers either. If you remove the 100% from the body then you lose the ability to place your footer at the bottom when combined with your set up at the moment.

I would suggest you use my second version which suffers from none of those issues and will work back to IE8. It will also make the page seem much quicker to use as there will be no lag from the resize event.

The 8px padding I added was because I assumed you wanted some space around the items as you had not negated the default 8px margin on the body. You also forgot to reset padding and margin to zero on any uls as they always have a default which when combined with 100% will break.

If you just copy the code from my second example and save it locally and then you can just run it in a browser and it will work as I made the urls absolute. You can then compare how it looks before you implement the changes into your page so you know how it should look.

If you look at my codepen link for the sticky footer it is well commented so that you can understand how it works but the basics are this.

Set html and body to height:100% and negate all margins and padding on the body.
Use a container that is display:table and has 100% width and height (display:table treats height as a minimum).
Set the top section to display:table-cell and then set the footer to display:table-row otherwise you get two cells side by side instead of stacked.

The footer is set to height:1px so that it hugs the bottom but as table cells treat height as a minimum the cell with grow with content automatically.

Just play around with the demo until you are happy with it and then implement the changes into your page once you are sure it is what you want.

I’ll be back tomorrow now.

yathrakaaran · January 1, 2016, 4:05am

Hi Paul… thanks again for helping me on New Years! I have been at it for long time now. I am a bit confused. The page you helped me with First Link has a slideshow which adds a top section (<div class="bgstretcher-page"></div). And in the code you wrote above

.bgstretcher-page {
    display:table;
    height:100%;
    width:100%;
}

I am trying to implement the same code on the next page Next Page but there is no added top div. And .container needs to be display:table;. And is this okay? I have tried for so many hours but I am not sure why I cannot get the footer to be cented and stay flushed to the bottom on this second page. What am I doing wrong? Also in the Codepen example I am not seeing display:table-cell being used. When I try to introduce display:table-cell to the .categoryPage things really go wrong. But if I use display:table-row the page somewhat stays in a sensible manner but I know I am not doing it right since the footer is still not working.

PaulOB · January 1, 2016, 10:28am

You were close you just had the container closing div in the wrong place. It needs to be after the footer.

e.g.

...
 <span class="cname">Love</span></a> </div>
    </div>
  </div>
  <div class="footer">
    <div id="seeker">
      <form accept-charset="utf-8" action="/root/photos/search" id=
            "PhotoGalleriesForm" method="get" name="PhotoGalleriesForm">
        <input id="search" name="search" type="text" value=
                "">
        <input id="find" type="submit" value="Search">
      </form>
    </div>
    <p class="footnote">Copyright &copy; 2014 rajeevthomas.com</p>
  </div>
</div>
<!-- end container -->
</body>
</html>

yathrakaaran · January 1, 2016, 6:47pm

Paul, thank you. It works great on that page. On the code you wrote for me above the container is not after the footer but it works. Is there a CSS magic going on there? Shouldn’t be the container including footer in both pages? Thanks for clarifying this…

<!DOCTYPE html>
<html lang="en">
<head>
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta charset="utf-8">
<meta content="by RT." name="author">
<meta content="Copyright &copy; 2014 rajeevthomas.com" name="Copyright">
<link href="/root//favicon.ico" rel="icon" type="image/x-icon">
<title>Home Page title</title>
<meta content="Photographer Website" name="keywords">
<meta content="Home Page Description" name="description">
<script src="http://rajeevthomas.com/jquery-2.1.4.min.js"></script>
<script src="http://rajeevthomas.com/jquery-bgstretcher-3.3.1.min.js"></script>
<style>
.bgstretcher-area {
	text-align: left;
	height:100%;
}
.bgstretcher-page {
	height:100%;
}
.bgstretcher-container {
	height:100%;
}
.bgstretcher {
	background: black;
	overflow: hidden;
	width: 100%;
	position: fixed;
	z-index: 1;
	height:100%;
}
.bgstretcher, .bgstretcher ul, .bgstretcher li {
	left: 0;
	top: 0;
	height:100%;
}
.bgstretcher ul, .bgstretcher li {
	position: absolute;
}
.bgstretcher ul, .bgstretcher li {
	margin: 0;
	padding: 0;
	list-style: none;
}
/*  Compatibility with old browsers  */
.bgstretcher {
	_position: absolute;
}
.bgs-description-pane {
	display: block;
	background: rgba(0, 0, 0, 0.7);
	position: relative;
	z-index: 10000;
	padding: 15px;
	color: #ffffff;
	font-size: 14px;
}
.footer {
	margin: 0 auto;
	text-align:center;
	clear:both;
	position: absolute;
	width: 100%;
	bottom:0;
	height:10%;
	color:#FFF;
}
/* NAV */
header {
	background-color: rgba(29, 11, 9, 0.6);
	border-radius:0px;
	padding-top:.5rem;
	padding-bottom:.25rem;
	box-shadow: 0 0 26px rgba(0, 0, 0, 0);
}
.nav {
	width:100%;
	text-align:center;
	list-style:none;
	position:relative;
	z-index:10;
	margin-top:0.35rem;
}
.nav li {
	padding:0px 0px;
	text-decoration:none;
	font-size:.85rem;
	text-align:left;
	position:relative;
	display:inline-block;
	margin-left:2rem;
}
.nav > li:hover > a {
	background-color : #5c331a;
}
.nav li a:hover {
	color:#FFF;
}
.submenu > li:hover > a {
	background-color : #5c331a;
}
.nav li a {
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	color:#a86b4b!important;
}
p {
	color:#FFF;
}
/* added styles as over-rides*/
.nav{/* stop horizontal scrollbar*/
    margin:0;
	padding:8px 0;
}
html,body{
	margin:0;
	padding:0;
	height:100%;
}
.bgstretcher-page {
	display:table;
	height:100%;
	width:100%;
}
.container {
	display:table-cell;
	width:100%;
	padding:8px;
  vertical-align:top;
}
.footer {
	display:table-row;
	height:1px;
	position:static;
}
.intro{padding:8px}
</style>
</head>
<body>
<div class="container">
  <header>
    <nav>
      <ul class="nav">
        <li> <a href="/root/">HOME</a> </li>
        <li>&nbsp;&nbsp;<a href="/root/photos">MY GALLERIES</a> </li>
        <li>&nbsp;&nbsp;<a href="/search">SEARCH</a> </li>
        <li>&nbsp;&nbsp;<a href="/about-me">ABOUT ME</a> </li>
      </ul>
    </nav>
  </header>
  <article>
    <section>
      <div class="intro">
        <p>Welcome to my gallery!</p>
        <div class="underline"></div>
      </div>
    </section>
  </article>
</div>
<div class="footer">
  <div id="seeker">
    <form accept-charset="utf-8" action="/root/photos/search" id=
                "PhotoCmspageForm" method="get" name="PhotoCmspageForm">
      <input id="search" name="search" type="text" value=
                    "">
      <input id="find" type="submit" value="Search">
    </form>
  </div>
  <p class="footnote">Copyright &copy; 2015 rajeevthomas.com</p>
</div>
<script type="text/javascript">
        jQuery(function($){
        $("body").bgStretcher({
        images: ["http://rajeevthomas.com/1-1.jpg", "http://rajeevthomas.com/2-1.jpg"], 
        imageWidth: 1024,
        imageHeight: 768
        }); 
       }); 
</script> 
<script>
    $('a').each(function() {
    if ($(this).attr('href') != '#' && $(this).attr('href') != ''&& $(this).attr('href') != '/' && $(this).attr('href').indexOf('?') < 0) {
    $(this).attr('href', $(this).attr('href') + '/');
    }
    });
    </script>
</body>
</html>

PaulOB · January 1, 2016, 8:18pm

Ah ok If you look at the page with your web inspector you will see that the js added a new wrapper to the page for the content (.bgstretcher-page ). It was this element that I gave the display:table rules to and thus the footer was inside the main wrapper.

On your new page there is no such wrapper added so the container needs to do that job

That’s why its always good to look at the html through a web inspector because you never know how some script may have modified the source html.

yathrakaaran · January 1, 2016, 8:33pm

Paul, that makes sense! I just checked it with Firebug and I see what you are saying. I didn’t think that far out! Sorry to be a pest and asking all these questions! I was telling myself " shut up… everything works… no need to ask more questions! " But I am glad I asked you…thanks again!.

system · April 2, 2016, 3:43am

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.