Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8" />
- <title>Infinite-Scroll Test Page</title>
- <style>
- h1 {
- font-family: Arial, sans-serif;
- }
- .clear {
- clear: both;
- }
- #wrapper {
- width: 80%;
- margin: 4em auto;
- }
- #header {
- border-bottom: 1px solid #cbcbcb;
- }
- .content {
- margin: 2em 0;
- }
- .box {
- background: red;
- float: left;
- width: 12em;
- height: 12em;
- margin-right: 1em;
- margin-bottom: 1em;
- }
- .navigation {
- border-top: 1px solid #cbcbcb;
- margin: 2em 0;
- padding-top: 2em;
- }
- .navigation a {
- font-family: georgia, serif;
- font-size: 160%;
- text-decoration: none;
- border-bottom: 1px dotted #cbcbcb;
- color: black;
- }
- </style>
- </head>
- <body>
- <div id="wrapper">
- <header id="header">
- <h1>Infinite-Scroll Test Page</h1>
- </header><!-- #header -->
- <div class="content">
- <div class="box"></div>
- <div class="box"></div>
- <div class="box"></div>
- <div class="box"></div>
- <div class="box"></div>
- <div class="box"></div>
- </div><!-- .content -->
- <div class="clear"></div>
- <div class="navigation">
- <a href="index2.html" class="next">Next »</a>
- </div><!-- .navigation -->
- </div><!-- #wrapper -->
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
- <script src="jquery.infinitescroll.min.js"></script>
- <script>
- $(function() {
- $(".content").infinitescroll({
- nextSelector: "div.navigation a:first",
- navSelector: "div.navigation",
- itemSelector: "div.box"
- }, function(posts) {
- $(".content").append(posts);
- console.log("loaded new posts");
- });
- });
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement