You would have used twitter and Facebook a number of times. In facebook, your news feed just gets loading while scrolling. Similarly in twitter tooo. It is one of the new way to efficiently show your contents on a web page dynamically when the user scrolls to the bottom of the page. As the user scrolls, more n more contents will be shown. This avoids user clicking the next button, more button etc.,
So here is a tutorial on how to do it. If you have more contents, then right away think of implementing “Dynamically loading contents while user scrolls down”. This increases the users experience.
Lets do it :
Step 1 : In theSection of your html template, include the below CSS Styles.
<style type=”text/css”>
article {
font-size: 13px;
}
div {
bottom: 10px;
display: none;
position: fixed;
}
section {
margin: 0 auto;
padding: 10px;
width: 350px;
}</style>
Step 2 : Include Jquery and Javascript shown below in your head section.
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js”></script>
<script type=”text/javascript”>
$(window).scroll(function() {
if ($(window).scrollTop() == ($(document).height() – $(window).height())) {
$.ajaxSetup ({
cache: false
});$.ajax({
url: ‘more.html’,
beforeSend: function ( xhr ) {
$(‘div’).show();
},
success: function(data) {
$(‘article’).append(data);
$(‘div’).fadeOut();
}
});
}
});
</script>
Step 3: Include the below html code for loading your contents. You can also modify the contents according to your needs.
<section>
<article>
<p>some text ….</p>
<p>some text ….</p>
<p>some text ….</p>
<p>some text ….</p>
<p>some text ….</p>
</article>
</section>
Step 4: You need to create one more html page called more.html. If you see the Javascript code from step 2, if has been mentioned that, for more contents to load, you need to get from another file called more.html. Below is the more.html content.
<section>
<article>
<p>some text ….</p>
<p>some text ….</p>
<p>some text ….</p>
<p>some text ….</p>
<p>some text ….</p>
</article>
</section>
Make your visitors proud to visit your webpage by providing dynamically loading contents while scrolling.
