Created
June 20, 2013 12:37
-
-
Save sphingu/5822349 to your computer and use it in GitHub Desktop.
Loading content on scroll to bottom on page using Jquery
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title>Scroll to bottom Detection</title> | |
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> | |
| <script type="text/javascript"> | |
| var count=0; | |
| $(document).ready(function(){ | |
| SetValues(); | |
| $(window).scroll(function(){ | |
| //Will check if the user has reached bottom of a PAGE | |
| SetValues(); | |
| //Check for user has reached bottom of Page | |
| if($(window).scrollTop()==($(document).height()-window.innerHeight)){ | |
| $('#loading').fadeIn(); | |
| setTimeout("appendContent()", 1000); | |
| } | |
| }); | |
| }); | |
| var appendContent=function(){ | |
| //alert("You are At Bottom"); | |
| $('#content').append("@@@@@@@@@ ---------- "+count+" TIMES ---------- @@@@@@@@@<br/>"); | |
| count++; | |
| for(var i=0;i<10;i++){ | |
| $('#content').append("This is Dynamic Added Content<br/>"); | |
| } | |
| $('#loading').fadeOut(); | |
| }; | |
| var SetValues=function(){ | |
| $('table tr:first-child td:nth-child(2)').html($(window).scrollTop()); | |
| $('table tr:first-child td:nth-child(4)').html($(document).height()); | |
| $('table tr:first-child td:nth-child(6)').html(window.innerHeight);//$(window).height() | |
| }; | |
| </script> | |
| <style type="text/css"> | |
| *{ | |
| font-family: verdana; | |
| } | |
| table{ | |
| width: 100%; | |
| padding:5px 10px; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| text-align: center; | |
| color:white; | |
| background: rgba(0,0,23,0.71); | |
| box-shadow: 0 0 10px black; | |
| } | |
| #content{ | |
| padding-bottom: 60px; | |
| } | |
| #loading{ | |
| display:none; | |
| width: 100%; | |
| padding:5px 10px; | |
| position: fixed; | |
| bottom: 0; | |
| left: 0; | |
| text-align: center; | |
| color:white; | |
| background: rgba(0,0,23,0.71); | |
| box-shadow: 0 0 10px black; | |
| } | |
| table td:nth-child(2n){ | |
| width:50px; | |
| background: white; | |
| box-shadow: 0 0 10px white; | |
| color:black; | |
| } | |
| table td:nth-child(1n){ | |
| text-shadow: 0 0 10px white; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <table> | |
| <tr> | |
| <td> | |
| Window Scroll : | |
| </td> | |
| <td>0</td> | |
| <td> | |
| Document height : | |
| </td><td>0</td> | |
| <td> | |
| Window Height : | |
| </td><td>0</td> | |
| </tr> | |
| </table> | |
| <div id="content" align="center"> | |
| This is My Content<br/> | |
| This is My Content<br/> | |
| This is My Content<br/> | |
| This is My Content<br/> | |
| This is My Content<br/> | |
| This is My Content<br/> | |
| This is My Content<br/> | |
| This is My Content<br/> | |
| This is My Content<br/> | |
| This is My Content<br/> | |
| This is My Content<br/> | |
| This is My Content<br/> | |
| This is My Content<br/> | |
| This is My Content<br/> | |
| This is My Content<br/> | |
| This is My Content<br/> | |
| This is My Content<br/> | |
| This is My Content<br/> | |
| This is My Content<br/> | |
| This is My Content<br/> | |
| This is My Content<br/> | |
| This is My Content<br/> | |
| This is My Content<br/> | |
| This is My Content<br/> | |
| This is My Content<br/> | |
| This is My Content<br/> | |
| This is My Content<br/> | |
| This is My Content<br/> | |
| This is My Content<br/> | |
| This is My Content<br/> | |
| This is My Content<br/> | |
| This is My Content<br/> | |
| This is My Content<br/> | |
| This is My Content<br/> | |
| This is My Content<br/> | |
| This is My Content<br/> | |
| This is My Content<br/> | |
| This is My Content<br/> | |
| This is My Content<br/> | |
| This is My Content<br/> | |
| This is My Content<br/> | |
| This is My Content<br/> | |
| This is My Content<br/> | |
| This is My Content<br/> | |
| This is My Content<br/> | |
| This is My Content<br/> | |
| This is My Content<br/> | |
| This is My Content<br/> | |
| This is My Content<br/> | |
| This is My Content<br/> | |
| This is My Content<br/> | |
| This is My Content<br/> | |
| </pre> | |
| <div id="loading"> | |
| Loading Please Wait...... | |
| </div> | |
| </body> | |
| </html> |
@meumapati
instead of setTimeout("appendContent()", 1000); line, you need to do backend API call to get data.
how would you do the backend API, this is exactly what I have spend days and days on, Just need to get it to work with my database.
Great Job
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
how can i use in php with mysql db