menu
Ad goes here

Sunday, 26 June 2016

How to load web page content based on user scrolling?

How to load web page content based on user scrolling?

Few websites like Facebook, twitter, FlipKart which we generally visit almost everyday and when we scroll down the mentioned websites pages, the content load automatically without clicking any buttons. The content load on scroll down introduced as infinite scroll in most of the sites and hope you can imagine how its useful for users. These days most of the shopping cart sites are using infinite scroll to give better and quick access of the products.

I will introduce the way of implementing infinite scroll which is as simple as ABCD.

Infinite scroll:
You can find several plugins for the content loading on page scroll down but you can find several issues on performance and version conflict with jQuery library. I will explain a custom way which is easy to implement and work smoothly in any platform.

Download Infinite Scroll Infinite Scroll Demo
HTML:
<!DOCTYPE html>
<html>
<head>
<title>How to load web page content based on user scrolling</title>
<style>
/* Add you css properties or include stylesheet. */
</style>
</head>
<body>

<h1>Infinite Scrolling like Facebook, Flip Cart</h1>

<ul id="content">
<li>
<article>
 <header>
  <h1>About <a href="http://www.24xhtml.com/" target="_blank">24xhtml</a></h1>
 </header>
  <p>
  One single event change my lonely living life, I attended a workshop on entrepreneurship by <a href="http://www.iimnetwork.com/team/chandradeep-cd-mitra" target="_blank">Chandradeep (CD) Mitra</a> who is a Strategy Coach and Mentor for Entrepreneurs. After attending the workhop I started browsing for more information and I introduced with several successful blogs like MBT - <a href="http://www.mybloggertricks.com/" target="_blank">MyBloggerTricks</a>, <a href="http://www.labnol.org/" target="_blank">Labnol.org</a> and <a href="http://www.shoutmeloud.com/" target="_blank">ShoutMeLoud</a>, I subscribe there and became a loyal readers. Being a loyal reader I got inspired by them and launch <a href="http://www.24xhtml.com/" target="_blank">www.24xhtml.com</a> in the year of 2013. 
  <br>
  <br>
  Launching <a href="http://www.24xhtml.com/" target="_blank">24xhtml</a> is a nonprofit initiative that aims to teach peoples making their career on online business for free of cost. Here are few topics which subscriber receive straight in their inbox by submitting Email ID.
  </p>
  <br>
  <ul>
  <li> Web Design</li>
  <li> Web Development</li>
  <li> Search Engine Optimization</li>
  <li> Basic and Advance Money Making Tips</li>
  <li> Online Marketing Tips</li>
  </ul>
  <br>
  <p>
  I always wanted to live my life in my own way and never like to do 9 to 6 office job for my entire life. I was trying to find out a way to get healthy social life and after several research and attending workshop, found <a href="http://www.24xhtml.com/" target="_blank">24xhtml</a> which will work for me 24x7 for 365 days.
  </p>
</article>
</li>
</ul>

<p id="loading">
<img src="https://4.bp.blogspot.com/-0IgBWXGpV5g/V3AfGmunCVI/AAAAAAAAAxY/6rEjp3eoLnQOGssu9opXUty-WDjZUau5QCLcB/s1600/loading.gif" alt="Loading…" />
</p>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>  
<script>
// add JavaScript from below.
</script>  
</body>

</html>


CSS:
body {
    margin: 0;
    font-family: 'Liberation Sans', Arial, sans-serif;
}

h1 {
    text-align: center;
}

#content {
    margin: 0 auto;
    padding: 0;
    width: 700px;
    list-style-type: none;
}

article h1 {
    text-align: left;
    border-bottom: 1px dotted #E3E3E3;
}

article p {
    text-align: justify;
    line-height: 1.5;
    font-size: 1.1em;
}

#loading {
    display: none;
    text-align: center;
}


jQuery:
$(document).ready(function() {
    var win = $(window);
    win.scroll(function() {
        if ($(document).height() - win.height() == win.scrollTop()) {
            $('#loading').show();

            // Uncomment this AJAX call to test it and call PHP or aspx as per your preferences.
            /*
            $.ajax({
                url: 'get-content.php',
                dataType: 'html',
                success: function(html) {
                    $('#content').append(html);
                    $('#loading').hide();
                }
            });
            */

            $('#content').append(randomContent());
            $('#loading').hide();
        }
    });
});

// Generate a random content
function randomContent() {
    // The content which will appear in the content div
    var paragraphs = [       
        '<p>Few websites like facebook, twitter, flipcart which we generally visit almost everyday and when we scroll down the mentioned websites pages, the content load automatically without clicking any buttons. Hope you can imagine how its useful for users and these days most of the sites going to use this which called infinite scroll.</p>',
        '<p>I will introduce the way of implemeting infinite scroll which is as simple as ABCD.</p>',
        '<p>How to create the inifinite scroll?</p>',
        '<p>You can find several plugins for the content loading on page scroll down but you can find several issues on performance and version conflict with jQuery library. I will explain a custom way which is easy to implement and work smoothly in any platform.</p>'
    ];

    // Generate the content
    var content = '<li>';
    content += '<article>';
    content += '<header><h1>What is affiliate marketing and how to earn money?</h1></header>';
    content += paragraphs.join('');
    content += '</article>';
    content += '</li>';

    return content;
}
Download Infinite Scroll Infinite Scroll Demo

1 comment:

  1. Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from JQuery Training in Chennai . or learn thru JQuery Training . or learn thru ES6 Online Training. Nowadays JavaScript has tons of job opportunities on various vertical industry.

    ReplyDelete

Books for you (Crafted with )