Advertisement
Guest User

Infinite Scroll Test Page

a guest
Oct 1st, 2012
874
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 1.72 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <title>Infinite-Scroll Test Page</title>
  6.     <style>
  7.         h1 {
  8.             font-family: Arial, sans-serif;
  9.         }
  10.  
  11.         .clear {
  12.             clear: both;
  13.         }
  14.  
  15.         #wrapper {
  16.             width: 80%;
  17.             margin: 4em auto;
  18.         }
  19.  
  20.         #header {
  21.             border-bottom: 1px solid #cbcbcb;
  22.         }
  23.  
  24.         .content {
  25.             margin: 2em 0; 
  26.         }
  27.  
  28.         .box {
  29.             background: red;
  30.             float: left;
  31.             width: 12em;
  32.             height: 12em;
  33.             margin-right: 1em;
  34.             margin-bottom: 1em;
  35.         }
  36.  
  37.         .navigation {
  38.             border-top: 1px solid #cbcbcb;
  39.             margin: 2em 0;
  40.             padding-top: 2em;
  41.         }
  42.  
  43.         .navigation a {
  44.             font-family: georgia, serif;
  45.             font-size: 160%;
  46.             text-decoration: none;
  47.             border-bottom: 1px dotted #cbcbcb;
  48.             color: black;
  49.         }
  50.     </style>
  51. </head>
  52.  
  53. <body>
  54.     <div id="wrapper">
  55.  
  56.         <header id="header">
  57.             <h1>Infinite-Scroll Test Page</h1>
  58.         </header><!-- #header -->
  59.        
  60.         <div class="content">
  61.             <div class="box"></div>
  62.             <div class="box"></div>
  63.             <div class="box"></div>
  64.             <div class="box"></div>
  65.             <div class="box"></div>
  66.             <div class="box"></div>
  67.         </div><!-- .content -->
  68.  
  69.         <div class="clear"></div>
  70.  
  71.         <div class="navigation">
  72.             <a href="index2.html" class="next">Next &raquo;</a>
  73.         </div><!-- .navigation -->
  74.  
  75.     </div><!-- #wrapper -->
  76.     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  77.     <script src="jquery.infinitescroll.min.js"></script>
  78.     <script>
  79.         $(function() {
  80.             $(".content").infinitescroll({
  81.                 nextSelector: "div.navigation a:first",
  82.                 navSelector: "div.navigation",
  83.                 itemSelector: "div.box"
  84.             }, function(posts) {
  85.                 $(".content").append(posts);
  86.                 console.log("loaded new posts");
  87.             });
  88.         });
  89.     </script>
  90. </body>
  91. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement