Skip to content

Instantly share code, notes, and snippets.

@seb86

seb86/Dynamic_Load_On_Scroll_Jquery.html

Forked from sphingu/Dynamic_Load_On_Scroll_Jquery.html
Created July 6, 2018 19:18
Show Gist options
  • Save seb86/8bb9c29adb2ad971203264ab22d219a0 to your computer and use it in GitHub Desktop.
Save seb86/8bb9c29adb2ad971203264ab22d219a0 to your computer and use it in GitHub Desktop.
Download ZIP
Loading content on scroll to bottom on page using Jquery
Raw
Dynamic_Load_On_Scroll_Jquery.html
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment