javascript - self scrolling page as elements apear -
i have following code jquery
$(".col-md-12").hide(); $(".button-div").hide(); $(".featurette-divider").hide(); $(".footer").hide(); $(".first").fadein(1000); $(".second").delay(900).fadein(1000); $(".third").delay(1800).fadein(1000); $(".fourth").delay(2700).fadein(1000); $(".button-div").delay(3600).fadein(1000); $(".featurette-divider").delay(4000).fadein(1000); $(".footer").delay(5000).fadein(1000); i want make page scroll bottom elements appear on it.
edit 1
<div class="container"> <div class="col-md-12 first"> <div class="thumbnail"> <div class="caption"> <h3>hero name</h3> <img src="..." alt="..."> <p></p> <div class="table-responsive"> <table class="table table-bordered table-striped"> <colgroup> <col class="col-xs-1"> <col class="col-xs-7"> </colgroup> <thead> <tr> <th colspan="2" style="text-align:center">abilities</th> </tr> <tr> <th>name</th> <th>description</th> </tr> </thead> <tbody> <tr> <th scope="row"> <code>.active</code> </th> <td>applies hover color particular row or cell</td> </tr> <tr> <th scope="row"> <code>.success</code> </th> <td>indicates successful or positive action</td> </tr> <tr> <th scope="row"> <code>.info</code> </th> <td>indicates neutral informative change or action</td> </tr> <tr> <th scope="row"> <code>.warning</code> </th> <td>indicates warning might need attention</td> </tr> <tr> <th scope="row"> <code>.danger</code> </th> <td>indicates dangerous or potentially negative action</td> </tr> </tbody> </table> </div> </div> </div> </div><!-- end col-lg-6 --> <div class="col-md-12 second"> <div class="thumbnail"> <div class="caption"> <h3>hero name</h3> <img src="..." alt="..."> <p></p> <div class="table-responsive"> <table class="table table-bordered table-striped"> <colgroup> <col class="col-xs-1"> <col class="col-xs-7"> </colgroup> <thead> <tr> <th colspan="2" style="text-align:center">abilities</th> </tr> <tr> <th>name</th> <th>description</th> </tr> </thead> <tbody> <tr> <th scope="row"> <code>.active</code> </th> <td>applies hover color particular row or cell</td> </tr> <tr> <th scope="row"> <code>.success</code> </th> <td>indicates successful or positive action</td> </tr> <tr> <th scope="row"> <code>.info</code> </th> <td>indicates neutral informative change or action</td> </tr> <tr> <th scope="row"> <code>.warning</code> </th> <td>indicates warning might need attention</td> </tr> <tr> <th scope="row"> <code>.danger</code> </th> <td>indicates dangerous or potentially negative action</td> </tr> </tbody> </table> </div> </div> </div> </div><!-- end col-lg-6 --> <div class="col-md-12 third"> <div class="thumbnail"> <div class="caption"> <h3>hero name</h3> <img src="..." alt="..."> <p></p> <div class="table-responsive"> <table class="table table-bordered table-striped"> <colgroup> <col class="col-xs-1"> <col class="col-xs-7"> </colgroup> <thead> <tr> <th colspan="2" style="text-align:center">abilities</th> </tr> <tr> <th>name</th> <th>description</th> </tr> </thead> <tbody> <tr> <th scope="row"> <code>.active</code> </th> <td>applies hover color particular row or cell</td> </tr> <tr> <th scope="row"> <code>.success</code> </th> <td>indicates successful or positive action</td> </tr> <tr> <th scope="row"> <code>.info</code> </th> <td>indicates neutral informative change or action</td> </tr> <tr> <th scope="row"> <code>.warning</code> </th> <td>indicates warning might need attention</td> </tr> <tr> <th scope="row"> <code>.danger</code> </th> <td>indicates dangerous or potentially negative action</td> </tr> </tbody> </table> </div> </div> </div> </div><!-- end col-lg-6 --> <div class="col-md-12 fourth"> <div class="thumbnail"> <div class="caption"> <h3>hero name</h3> <img src="..." alt="..."> <p></p> <div class="table-responsive"> <table class="table table-bordered table-striped"> <colgroup> <col class="col-xs-1"> <col class="col-xs-7"> </colgroup> <thead> <tr> <th colspan="2" style="text-align:center">abilities</th> </tr> <tr> <th>name</th> <th>description</th> </tr> </thead> <tbody> <tr> <th scope="row"> <code>.active</code> </th> <td>applies hover color particular row or cell</td> </tr> <tr> <th scope="row"> <code>.success</code> </th> <td>indicates successful or positive action</td> </tr> <tr> <th scope="row"> <code>.info</code> </th> <td>indicates neutral informative change or action</td> </tr> <tr> <th scope="row"> <code>.warning</code> </th> <td>indicates warning might need attention</td> </tr> <tr> <th scope="row"> <code>.danger</code> </th> <td>indicates dangerous or potentially negative action</td> </tr> </tbody> </table> </div> </div> </div> </div><!-- end col-lg-6 --> <div class="centered button-div"> <!-- indicates dangerous or potentially negative action --> <button type="button" class="btn btn-danger btn-lg">next <span class="glyphicon glyphicon-arrow-right"></span></button> </div> <hr class="featurette-divider"> <!-- footer --> <footer class="footer"> <p>© 2015 · <a href="#">about</a> · <a href="#">contact</a></p> </footer> </div> my html layout (bootrstrap based). i've pasted wrapper content goes (.container)
if use jquery's scrolltop function, can scroll page given height in pixels:
$(document).scrolltop(heightinpixels); this scroll whole document end:
var documentheight = $(document).height(); $(document).scrolltop(documentheight); if want happen each element appears, have call everytime after effect, or put callback when effects over:
function scrolldocument(){ var documentheight = $(document).height(); $(document).scrolltop(documentheight); } // element "appearings" $(".first").fadein(1000, scrolldocument ); .... $( ".footer" ).delay(5000).fadein(1000, scrolldocument ); i hope helps. more, should have more info layout...
edit
$(".col-md-12").hide(); $(".button-div").hide(); $(".featurette-divider").hide(); $(".footer").hide(); function scrolldocument(){ var contentheight = $(document).height(); $(document).scrolltop(contentheight); } // element "appearings" $(".first").fadein(1000, scrolldocument); $(".second").delay(900).fadein(1000, scrolldocument); $(".third").delay(1800).fadein(1000, scrolldocument); $(".fourth").delay(2700).fadein(1000, scrolldocument); $(".button-div").delay(3600).fadein(1000, scrolldocument); $(".featurette-divider").delay(4000).fadein(1000, scrolldocument); $(".footer").delay(5000).fadein(1000, scrolldocument);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="col-md-12 first"> <div class="thumbnail"> <div class="caption"> <h3>hero name</h3> <img src="..." alt="..."> <p></p> <div class="table-responsive"> <table class="table table-bordered table-striped"> <colgroup> <col class="col-xs-1"> <col class="col-xs-7"> </colgroup> <thead> <tr> <th colspan="2" style="text-align:center">abilities</th> </tr> <tr> <th>name</th> <th>description1</th> </tr> </thead> <tbody> <tr> <th scope="row"> <code>.active</code> </th> <td>applies hover color particular row or cell</td> </tr> <tr> <th scope="row"> <code>.success</code> </th> <td>indicates successful or positive action</td> </tr> <tr> <th scope="row"> <code>.info</code> </th> <td>indicates neutral informative change or action</td> </tr> <tr> <th scope="row"> <code>.warning</code> </th> <td>indicates warning might need attention</td> </tr> <tr> <th scope="row"> <code>.danger</code> </th> <td>indicates dangerous or potentially negative action</td> </tr> </tbody> </table> </div> </div> </div> </div><!-- end col-lg-6 --> <div class="col-md-12 second"> <div class="thumbnail"> <div class="caption"> <h3>hero name</h3> <img src="..." alt="..."> <p></p> <div class="table-responsive"> <table class="table table-bordered table-striped"> <colgroup> <col class="col-xs-1"> <col class="col-xs-7"> </colgroup> <thead> <tr> <th colspan="2" style="text-align:center">abilities</th> </tr> <tr> <th>name</th> <th>description2</th> </tr> </thead> <tbody> <tr> <th scope="row"> <code>.active</code> </th> <td>applies hover color particular row or cell</td> </tr> <tr> <th scope="row"> <code>.success</code> </th> <td>indicates successful or positive action</td> </tr> <tr> <th scope="row"> <code>.info</code> </th> <td>indicates neutral informative change or action</td> </tr> <tr> <th scope="row"> <code>.warning</code> </th> <td>indicates warning might need attention</td> </tr> <tr> <th scope="row"> <code>.danger</code> </th> <td>indicates dangerous or potentially negative action</td> </tr> </tbody> </table> </div> </div> </div> </div><!-- end col-lg-6 --> <div class="col-md-12 third"> <div class="thumbnail"> <div class="caption"> <h3>hero name</h3> <img src="..." alt="..."> <p></p> <div class="table-responsive"> <table class="table table-bordered table-striped"> <colgroup> <col class="col-xs-1"> <col class="col-xs-7"> </colgroup> <thead> <tr> <th colspan="2" style="text-align:center">abilities</th> </tr> <tr> <th>name</th> <th>description3</th> </tr> </thead> <tbody> <tr> <th scope="row"> <code>.active</code> </th> <td>applies hover color particular row or cell</td> </tr> <tr> <th scope="row"> <code>.success</code> </th> <td>indicates successful or positive action</td> </tr> <tr> <th scope="row"> <code>.info</code> </th> <td>indicates neutral informative change or action</td> </tr> <tr> <th scope="row"> <code>.warning</code> </th> <td>indicates warning might need attention</td> </tr> <tr> <th scope="row"> <code>.danger</code> </th> <td>indicates dangerous or potentially negative action</td> </tr> </tbody> </table> </div> </div> </div> </div><!-- end col-lg-6 --> <div class="col-md-12 fourth"> <div class="thumbnail"> <div class="caption"> <h3>hero name</h3> <img src="..." alt="..."> <p></p> <div class="table-responsive"> <table class="table table-bordered table-striped"> <colgroup> <col class="col-xs-1"> <col class="col-xs-7"> </colgroup> <thead> <tr> <th colspan="2" style="text-align:center">abilities</th> </tr> <tr> <th>name</th> <th>description4</th> </tr> </thead> <tbody> <tr> <th scope="row"> <code>.active</code> </th> <td>applies hover color particular row or cell</td> </tr> <tr> <th scope="row"> <code>.success</code> </th> <td>indicates successful or positive action</td> </tr> <tr> <th scope="row"> <code>.info</code> </th> <td>indicates neutral informative change or action</td> </tr> <tr> <th scope="row"> <code>.warning</code> </th> <td>indicates warning might need attention</td> </tr> <tr> <th scope="row"> <code>.danger</code> </th> <td>indicates dangerous or potentially negative action</td> </tr> </tbody> </table> </div> </div> </div> </div><!-- end col-lg-6 --> <div class="centered button-div"> <!-- indicates dangerous or potentially negative action --> <button type="button" class="btn btn-danger btn-lg">next <span class="glyphicon glyphicon-arrow-right"></span></button> </div> <hr class="featurette-divider"> <!-- footer --> <footer class="footer"> <p>© 2015 · <a href="#">about</a> · <a href="#">contact</a></p> </footer> </div>just chage $(document) selector $('div.container') on code above , should work.
Comments
Post a Comment