Jquery auto load more data on scroll
Jquery auto load more data on scroll
You might have noticed in many websites that they automatically load data once we scroll browser window down. Most of them use jquery as it is easy to implement since it has all built in functions. Here I will explain a simple code which will append content to a div at the bottom of a HTML webpage. The jquery function will get triggered once you scroll the page and reach the bottom.
Load the jquery library as usual
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
Once this is done add the below code.
<script>
$(window).scroll(function() {
if($(window).scrollTop() == $(document).height() - $(window).height()) {
if ($('#msg:contains(Some text)').length < 1)
{
$('#msg').append('<font color=red>Some text, This is just appended at the bottom of this page. You are free to add your own :)</font>').show();
}
else
{
console.log("No Reloading");
}
}
})
</script>
As you can see we have used 3 main functions from jquery
1) window.scroll
2) :contains
3) $.append()
Code explanation, Let us assume that #msg is the div element and we already have some content inside that. All we are doing here is when the browser reaches bottom of the webpage we are just checking whether current vertical position of scroll bar is equal to the difference between the HTML document height and window height. Once that condition is true the next step is to check whether div #msg contains a specific word, As per the program above we are checking whether it contains text named “Some text“. You can add your own according to the content you are loading. This will prevent duplicate appending of data.
If the condition is False then Console.log will display output accordingly on your Firebug console. This is only for testing purpose.
Entire code will look like this
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(window).scroll(function() {
if($(window).scrollTop() == $(document).height() - $(window).height()) {
if ($('#msg:contains("Some text")').length < 1)
{
$('#msg').append('<font color=red>Some text, This is just appended at the bottom of this page. You are free to add your own :)</font>').show();
}
else
{
console.log("No Reloading");
}
}
})
</script>
</head>
<body>
<div id="msg">
<p>This is a test page</p>
<p>Click me away!</p>
<p>Scroll Down!!</p>
<p>Scroll Down!!</p>
<p>Scroll Down!!</p>
<p>Scroll Down!!</p>
<p>Scroll Down!!</p>
<p>Scroll Down!!</p>
<p>Scroll Down!!</p>
<p>Scroll Down!!</p>
<p>Scroll Down!!</p>
<p>Scroll Down!!</p>
<p>Scroll Down!!</p>
<p>Scroll Down!!</p>
<p>Scroll Down!!</p>
<p>Scroll Down!!</p>
<p>Scroll Down!!</p>
<p>Scroll Down!!</p>
<p>Scroll Down!!</p>
<p>Scroll Down!!</p>
<p>Scroll Down!!</p>
<p>Scroll Down!!</p>
<p>Scroll Down!!</p>
<p>Scroll Down!!</p>
<p>Scroll Down!!</p>
<p>Scroll Down!!</p>
<p>Scroll Down!!</p>
</div>
</body>
</html>
In our next tutorial we will show you how to add a PHP / MYSQL page and pull more data dynamically on scroll.
