javascript - White space and background moves -
there faq on website school project created javascript animations.
the problem is: 1; background moves when 2 or more faqs opened. 2; there white space beneath background.
the faq on website (click image)
the javascript
var main = function() { $('.article').click(function() { $('.article').removeclass('current'); $('.description').hide(); $(this).addclass('current'); $(this).children('.description').show(); }); $(document).keypress(function(event) { if(event.which === 111) { $('.current').children('.description').toggle(); } else if(event.which === 110) { var currentarticle = $('.current'); var nextarticle = currentarticle.next(); currentarticle.removeclass('current'); nextarticle.addclass('current'); } }); }; $(document).ready(main);the css body { background: url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/black-thread.png'); } .articles_title { color:white; font-size: 250%; position: fixed; top: 30px; right: 50%; } p { margin: 0; } .row { margin: 0; } .articles { margin-top: 16px; margin-bottom: 16px; } .article { color: #222; background: rgba(255,255,255,.9); border-spacing: 2px; border-color: gray; font-family: arial,sans-serif; border-bottom: 1px #e5e5e5 solid; } .current .item { background: rgba(206,220,206,.9); } .item { cursor: pointer; padding-top: 7px; padding-bottom: 7px; } .item .source { margin-left: 16px; } .item .title { font-weight: bold; } .item .pubdate { margin-right: 16px; } .item .pubdate { text-align: right; } .description { display: none; padding-top: 10px; padding-bottom: 10px; } .description h1 { margin-top: 0px; font-size: 16px; } /* index.php css */ body { left: 0; margin: 0; overflow: hidden; position: relative; } /* initial menu */ .menu { background: url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/black-thread.png') repeat left top; left: -285px; /* start off behind scenes */ height: 100%; position: fixed; width: 285px; } /* basic styling */ .jumbotron { background-image: url('http://i.imgur.com/jvdpg8h.png?1'); height: 100%; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .menu ul { border-top: 1px solid #636366; list-style: none; margin: 0; padding: 0; } .menu li { border-bottom: 1px solid #636366; font-family: 'open sans', sans-serif; line-height: 45px; padding-bottom: 3px; padding-left: 20px; padding-top: 3px; } .menu { color: #fff; font-size: 15px; text-decoration: none; text-transform: uppercase; } .icon-close { cursor: pointer; padding-left: 10px; padding-top: 10px; } .icon-menu { color: #fff; cursor: pointer; font-family: 'open sans', sans-serif; font-size: 16px; padding-bottom: 25px; padding-left: 25px; padding-top: 25px; text-decoration: none; text-transform: uppercase; } .icon-menu { margin-right: 5px; }the index.php in faq.php <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!doctype html> <html> <head> <link href="http://s3.amazonaws.com/codecademy-content/courses/ltp2/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="styles/faq.css"> </head> <body> <div class="articles container"> <div class="article current"> <div class="item row"> <div class="col-xs-3"> <p class="source">flight</p> </div> <div class="col-xs-6"> <p class="title">embraer adds third legacy 500 prototype flight test campaign</p> </div> <div class="col-xs-3"> <p class="pubdate">mar 23</p> </div> </div> <div class="description row"> <div class="col-xs-3"> </div> <div class="col-xs-6"> <h1>embraer adds third legacy 500 prototype flight test campaign</h1> <p>the third legacy 500 has joined embraer's flight test programme aimed @ delivering midsize business jet in 2014. airtcraft, serial number 003...</p> </div> <div class="col-xs-3"> </div> </div> </div> <div class="article"> <div class="item row"> <div class="col-xs-3"> <p class="source">aw commercial aviation</p> </div> <div class="col-xs-6"> <p class="title">cseries supplier scramble</p> </div> <div class="col-xs-3"> <p class="pubdate">mar 22</p> </div> </div> <div class="description row"> <div class="col-xs-3"> </div> <div class="col-xs-6"> <h1>cseries supplier scramble</h1> <p>three months before planned first flight of cseries, bombardier grappling supplier issues crucial meeting production cost...</p> </div> <div class="col-xs-3"> </div> </div> </div> <div class="article"> <div class="item row"> <div class="col-xs-3"> <p class="source">aw commercial aviation</p> </div> <div class="col-xs-6"> <p class="title">cseries supplier scramble</p> </div> <div class="col-xs-3"> <p class="pubdate">mar 22</p> </div> </div> <div class="description row"> <div class="col-xs-3"> </div> <div class="col-xs-6"> <h1>cseries supplier scramble</h1> <p>three months before planned first flight of cseries, bombardier grappling supplier issues crucial meeting production </div> <div class="col-xs-3"> </div> </div> </div> <div class="article"> <div class="item row"> <div class="col-xs-3"> <p class="source">aw commercial aviation</p> </div> <div class="col-xs-6"> <p class="title">cseries supplier scramble</p> </div> <div class="col-xs-3"> <p class="pubdate">mar 22</p> </div> </div> <div class="description row"> <div class="col-xs-3"> </div> <div class="col-xs-6"> <h1>cseries supplier scramble</h1> <p>three months before planned first flight of cseries, bombardier grappling supplier issues crucial meeting production </div> </div> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="js/faq.js"></script> </body> </html>
i jsfiddle question http://jsfiddle.net/wz7eojqp/
i couldn't find problems described.
but think regarding white space in bottom of page problem default browser margin. try body{margin: 0;} or better reset code.
Comments
Post a Comment