javascript - Full screen background slideshow messing up responsive sticky footer -


i trying position sticky footer in place full screen background slideshow somehow moves under content. following responsive sticky footer tutorial site sticky footer tutorial page content set display:table , footer set display:table-row. works great until introduce slideshow picture. once remove slideshow sticky footer works!. there way fix problem , keep sticky footer @ bottom?. can see problem live here link problem.

my css , html 

<!doctype html> <html>     <head>         <title> html structure</title>         <script type="text/javascript" src="/jquery-2.1.4.min.js"></script>          <script type="text/javascript" src="/jquery-bgstretcher-3.3.1.min.js"></script>          <style>         html {         height: 100%;         overflow: hidden;         }          body {         height: 100%;         overflow: scroll;         -webkit-overflow-scrolling: touch;         }          .site {         display: table;         height: 100%;         table-layout: fixed;         width: 100%;         }          .site-content {         width: 100%;         color:#fbf7f7;         text-align:center;         background:#2defec repeat;         height:200px;         margin-bottom:10px;         }          .site-footer {         display: table-row;         height: 1px;         background:#2a1818 repeat;         width:100%;         color:#fbf7f7;         text-align:center;         }          .bgstretcher-area {         text-align: left;         }         .bgstretcher {         background: black;         overflow: hidden;         width: 100%;         position: fixed;         z-index: 1;         }         .bgstretcher,         .bgstretcher ul,         .bgstretcher li {         left: 0;         top: 0;         }         .bgstretcher ul,         .bgstretcher li {         position: absolute;         }         .bgstretcher ul,         .bgstretcher li {         margin: 0;         padding: 0;         list-style: none;         }         /*  compatibility 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;         }                </style>     </head>     <body>         <div id="page" class="hfeed site">             <header id="masthead" class="site-header" role="banner"></header>             <div id="content" class="site-content">i content!</div>             <footer id="colophon" class="site-footer" role="contentinfo">i footer</footer>         </div>     </body>     <script type="text/javascript">         jquery(function($){         $("body").bgstretcher({         images: ["/1-1.jpg", "/2-1.jpg"],          imagewidth: 1024,         imageheight: 768         });          });          </script> </html>

you should make complete table layout in order have sticky footer work properly. check out following simplified demo , read comments inline, see if you're missing important.

jsfiddle

html, body, #page {      height: 100%; /*make elements cover whole page height*/      margin: 0;  }  #page {      display: table;      width: 100%;  }  .site-header,  .site-content,  .site-footer {      display: table-row; /*for 3 sections*/  }  .site-content {      height: 100%; /*push header , footer minimum height */      background: silver;  }
<div id="page" class="hfeed site">      <header id="masthead" class="site-header" role="banner">header</header>      <div id="content" class="site-content">i content!</div>      <footer id="colophon" class="site-footer" role="contentinfo">i footer</footer>  </div>

update, jquery plugin op's using, added container divs around #page, either set them height:100%;, or set #page{height:100vh;} revised jsfiddle.


Comments

Post a Comment

Popular posts from this blog

1111. appearing after print sequence - php -

morning, i have code takes string of shoe sizes, explodes , puts in table. code works , info displayed correctly on page after table there few 1's after table. i'm confused this. so table looks (in columns of 3 on webpage) available in following sizes: 3 4 5 6 9 10 111 here's codes, purpose of example $x = 3|4|6|10|9 function get_sizes_pipe($x) { $counter = 0; $splits = explode("|",$x); asort($splits); $x = print "<table class='greentable'>"; $x .= print "<thead><tr><th scope='col' colspan='3' abbr='starter'>available in following sizes:</th></tr></thead><tbody><tr>"; foreach ($splits $split) { $entry = print "<td>".$split."</td>"; if($counter == 2){ $entry .= print "</tr><tr>"; $counter =0; } else { $counter++; ...
Read more

java - WARN : org.springframework.web.servlet.PageNotFound - No mapping found for HTTP request with URI [/board/] in DispatcherServlet with name 'appServlet' -

this question has answer here: why spring mvc respond 404 , report “no mapping found http request uri […] in dispatcherservlet”? 3 answers i trying making simple bbs i'm encountering following error, warn : org.springframework.web.servlet.pagenotfound - no mapping found http request uri [/board/] in dispatcherservlet name 'appservlet' i have tried solve error many times, have failed. how can solve error? here web.xml, controllerand , servlet-context. my web.xml <?xml version="1.0" encoding="utf-8"?> <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/xmlschema-instance" xsi:schemalocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"> <filter> <filter-nam...
Read more

Ruby on Rails, ActiveRecord, Postgres, UTF-8 and ASCII-8BIT encodings -

weirdest error, who’s challenge try , me? spent hours yesterday on , it’s magic. can't believe happening , it's driving me crazy. btw, using: rails 4.2.3 ruby 2.2.3 pg 0.18 encoding.default_internal = encoding.default_external = utf-8 config.encoding = 'utf-8' it has postgres, activerecord , encodings! turns out we’ve been getting these errors whenever create new users on database special characters: encoding::undefinedconversionerror: "\xc3" ascii-8bit utf-8 \xc3 may vary depending on characters. weird part we’ve set since beginning utf-8. makes no sense , digged it, , used script: user.all.each |user| user.attributes.each |name, value| if value.is_a? string puts user.email + name.encoding.to_s + value.encoding.to_s end end end and output of 1 of users, users same: dr_lottahelp@blahblah.comutf-8utf-8 dr_lottahelp@blahblah.comutf-8ascii-8bit dr_lottahelp@blahblah.comutf-8ascii-8bit dr_lottahelp@blahblah.comutf-8asci...
Read more