I have seen a video tutorial on YouTube about Dynamic Content that when a user reaches the bottom of a page, it automatically loads new div (Something like the facebook homepage). Instead of the intended result, it just keeps on loading. I don't know how to stop that. Here's the full code:
<!DOCTYPE html>
<html>
<head>
<script>
function yHandler(){
// Watch video for line by line explanation of the code
// http://www.youtube.com/watch?v=eziREnZPml4
var wrap = document.getElementById('wrap');
var contentHeight = wrap.offsetHeight;
var yOffset = window.pageYOffset;
var y = yOffset + window.innerHeight;
if(y >= contentHeight){
// Ajax call to get more dynamic data goes here
wrap.innerHTML += '<div class="newData"></div>';
}
var status = document.getElementById('status');
status.innerHTML = contentHeight+" | "+y;
}
window.onscroll = yHandler;
</script>
<style>
div#status{position:fixed; font-size:24px;}
div#wrap{width:800px; margin:0px auto;}
div.newData{height:1000px; background:#09F; margin:10px 0px;}
</style>
</head>
<body>
<div id="status">0 | 0</div>
<div id="wrap"><img src="temp9.jpg"></div>
</body>
</html>
To test it on your desktop, make sure you have the image with the name of temp9.jpg
