title: Responsive sticky footer not working over full screen slideshow
body: <p>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 ) <a href="http://codepen.io/corysimmons/pen/DCmtI" rel="nofollow">Sticky footer link</a>. 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 <a href="http://rajeevthomas.com/" rel="nofollow">link with the problem</a> Is there a way I can make the sticky footer work ?
  Here is my CSS and HTML...</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta content="width=device-width, initial-scale=1" name="viewport"&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta content="by RT." name="author"&gt;
      &lt;meta content="Copyright &amp;copy; 2014 rajeevthomas.com" name="Copyright"&gt;
      &lt;link href="/root//favicon.ico" rel="icon" type="image/x-icon"&gt;
      &lt;title&gt;Home Page title&lt;/title&gt;
      &lt;meta content="Photographer Website" name="keywords"&gt;
      &lt;meta content="Home Page Description" name="description"&gt;
      &lt;link href="/styles.css" rel="stylesheet" type=
      "text/css"&gt;
      &lt;script src="/jquery-2.1.4.min.js" type=
      "text/javascript"&gt;
      &lt;/script&gt;
      &lt;script src="jquery-bgstretcher-3.3.1.min.js" type=
      "text/javascript"&gt;
      &lt;/script&gt;
      &lt;style&gt;
  
  
      .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 &gt; li:hover &gt; a{
  background-color : #5c331a;
  }
  
  .nav li a:hover {
  color:#FFF;
  }
  
  .submenu &gt; li:hover &gt; a{
  background-color : #5c331a;
  }
  
  .nav li a {
  
  
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  color:#a86b4b!important;
  
  }    
  
  p{color:#FFF;}    
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="container"&gt;
          &lt;header&gt;
              &lt;nav&gt;
                  &lt;ul class="nav"&gt;
                      &lt;li&gt;
                          &lt;a href="/root/"&gt;HOME&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;&amp;nbsp;&amp;nbsp;&lt;a href="/root/photos"&gt;MY GALLERIES&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;&amp;nbsp;&amp;nbsp;&lt;a href="/search"&gt;SEARCH&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;&amp;nbsp;&amp;nbsp;&lt;a href="/about-me"&gt;ABOUT ME&lt;/a&gt;
                      &lt;/li&gt;
  
                  &lt;/ul&gt;
              &lt;/nav&gt;
          &lt;/header&gt;
          &lt;article&gt;
              &lt;section&gt;
                  &lt;div class="intro"&gt;
                      &lt;p&gt;Welcome to my gallery!&lt;/p&gt;
                      &lt;div class="underline"&gt;&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/section&gt;
          &lt;/article&gt;
          &lt;script type="text/javascript"&gt;
          jQuery(function($){
          $("body").bgStretcher({
          images: ["1-1.jpg", "2-1.jpg"], 
          imageWidth: 1024,
          imageHeight: 768
          }); 
          }); 
          &lt;/script&gt;
          &lt;div class="push"&gt;&lt;/div&gt;
          &lt;div class="footer"&gt;
              &lt;div id="seeker"&gt;
                  &lt;form accept-charset="utf-8" action="/root/photos/search" id=
                  "PhotoCmspageForm" method="get" name="PhotoCmspageForm"&gt;
                      &lt;input id="search" name="search" type="text" value=
                      ""&gt;&lt;input id="find" type="submit" value="Search"&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
              &lt;p class="footnote"&gt;Copyright &amp;copy; 2015 rajeevthomas.com&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;script&gt;
      $('a').each(function() {
      if ($(this).attr('href') != '#' &amp;&amp; $(this).attr('href') != ''&amp;&amp; $(this).attr('href') != '/' &amp;&amp; $(this).attr('href').indexOf('?') &lt; 0) {
      $(this).attr('href', $(this).attr('href') + '/');
      }
      });
      &lt;/script&gt; 
      &lt;script&gt;
      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);
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>