Skip to main content

Build List on scroll - Jquery


     Now a days, we have many websites including social networking and commercial sites dynamically building the list based on our scroll. Here i am showing how to build list based on our scrolling in a whole div and on a specific div.

    First of all, we need to write a server side script to give front-end required list. In my example, i am creating ajax.php

<?php
$image_path = "images";
$details = array(
array("Amazon", $image_path."/amazon.png"),
array("Apple", $image_path."/apple.png"),
array("Cisco", $image_path."/cisco.png"),
array("Ebay", $image_path."/ebay.png"),
array("Ericsson", $image_path."/ericsson.png"),
array("Facebook", $image_path."/facebook.png"),
array("Flipkart", $image_path."/flipkart.jpg"),
array("Google", $image_path."/google.jpg"),
array("IBM", $image_path."/ibm.png"),
array("Intel", $image_path."/intel.png"),
array("LG", $image_path."/lg.jpg"),
array("Linked In", $image_path."/linkedin.png"),
array("Microsoft", $image_path."/microsoft.png"),
array("Motorola", $image_path."/moto.png"),
array("Myntra", $image_path."/myntra.jpg"),
array("Ola", $image_path."/ola.png"),
array("Oracle", $image_path."/oracle.png"),
array("Samsung", $image_path."/samsung.png"),
array("Uber", $image_path."/uber.jpg"),
array("Youtube", $image_path."/youtube.jpg")
);
if(!empty($_POST["get_params"]) && isset($_POST["get_param_count"]) && isset($_POST["from"])) { $param_count = (int)$_POST["get_param_count"]; $from = (int) $_POST["from"] - 1; if($from<count($details)) { if($param_count>(count($details) - $from)) { $param_count = count($details) - $from; } $result = array(); for($i=$from, $j=1; $j<=$param_count; $i++, $j++) { $result[] = $details[$i]; } echo json_encode($result); die(); } } echo "";
Now ajax.php will return five elements of list at a time.
Now we are creating scroll handler for a whole div in a screen.
var onTimeListDisplayer = {
data: {
list_param_num: 1,
max_param_count: 5,
get_items_path: "ajax.php"
},
initialize: function() {
$(document).on("scroll", this.scrollHandler);
this.loadList();
},
scrollHandler: function() {
if ($(document).scrollTop() + window.innerHeight >= document.getElementsByTagName("body")[0].scrollHeight ) {
onTimeListDisplayer.loadList();
}
},
loadList: function() {
$.post(onTimeListDisplayer.data.get_items_path, {get_params:true, get_param_count:onTimeListDisplayer.data.max_param_count, from:onTimeListDisplayer.data.list_param_num}, function (data, status) {
if(data=="")
{ $("#alert_params").show(); } else { $("#alert_params").hide(); var result = $.parseJSON(data); for(var i=0; i<result.length; i++) { var output = "<div><h2>"+result[i][0]+"</h2><img src='"+result[i][1]+"'></div>"; $(output).appendTo("#items"); } onTimeListDisplayer.data.list_param_num += result.length; } }); } }
TO display list to a specific div, here's is the code
var onTimeListDisplayer = {
data: {
list_param_num: 1,
max_param_count: 5,
get_items_path: "ajax.php"
},
initialize: function() {
document.getElementById("items").addEventListener("scroll", this.handleScroll);
this.loadList();
},
handleScroll: function() {
if (document.getElementById("items").scrollTop + parseInt(document.getElementById("items").style.height, 10) >= document.getElementById("items").scrollHeight ) {
onTimeListDisplayer.loadList();
}
},
loadList: function() {
$.post(onTimeListDisplayer.data.get_items_path, {get_params:true, get_param_count:onTimeListDisplayer.data.max_param_count, from:onTimeListDisplayer.data.list_param_num}, function (data, status) {
if(data!="")
{
var result = $.parseJSON(data);
for(var i=0; i<result.length; i++)
{
var output = "<div><h2>"+result[i][0]+"</h2><img src='"+result[i][1]+"'></div>";
$(output).appendTo("#items");
}
onTimeListDisplayer.data.list_param_num += result.length;
}
});
}

In here, loadList method is used to get list items from ajax.php using post method. Initialize method will add scroll event listener and add scrollHandler as event handler method.
scrollHandler will check each time when user scrolling, does user have come to end of the div. If yes, it will call loadList method to append next list params.
Now, we need to initialise this. If list length is as screen height, then use below code to initialise

$(function() {
onTimeListDisplayer.initialize();
});
If list in a specific div with specific height, then use below code
document.addEventListener("DOMContentLoaded", function() {
onTimeListDisplayer.initialize();
});
By this, you will be able to load list params dynamically based on your scroll. You can download complete code from https://github.com/ijasnahamed/On-Time-List-Builder 

Popular posts from this blog

Implementing Client Side WebRTC using Sipml5 javascript

Step 1:

Download and require Sipml5 library function.

Step 2:

Initialize sipml5 Engine in your web page :

var readyCallback = function(e) {
// function called when sipml is successfully initialised.
createSipStack(); // calling this function to create sip stack(see below)
};

var errorCallback = function(e) {
// function called when error occured during sipml initialisation.
};

SIPml.init(readyCallback, errorCallback);

Step 3:

Create Sip Stack :-
Sip Stack is an object that must be created before making/receiving call and sms. Creating Sip stack is an asynchronous process, so you need to create an event listener function to get state change notification.

var sipStack;

function EventListener(e) {

/*
* e.type ;type of event listener
* e.session ; current event session
* e.getSipResponseCode() ; event response code
* e.description ; event description
*/

if(e.type == 'started'){
// successfully started the stack.
register();
} else if(e.type == 'i_new_call'){
// when new incoming call comes.
      …

Setup Asterisk 13 with FreePBX 13 in CentOS 7

Launch CentOS 7 AWS Ec2 InstanceLog in to your aws consoleGo to ec2 management page and click Launch Instance on Instance pageIn Choose AMI step, go to AWS MarketPlace tab and search CentOS 7 on search field. List of centos 7 ami's will be available.Select CentOS 7 (x86_64) ami which is free tier eligible. Select your instance type and click configure instance. Keep default values from Configure Instance to Add Tags stepsIn configure security group, create a security group which allow minimum ports openSSH : port 22HTTP : port 80Custom UDP Rule : 10000-20000 (if you are giving RTP ports 10000-20000)Custom UDP Rule : 5060 (ChanSIP port)Custom TCP Rule : 5060 (ChanSIP Port)Click Launch Instance. Select your key file and accept terms to launch instance.
Setup CentOS Server SSH into newly created CentOS server with username centos and your key file.Update all existing packagessudo yum update -yNow start http service(you can access your server via browser by going to your server ip addres…

MULTIPLE FILE UPLOAD USING AJAX WITH PROGRESS BAR

Uploading multiple files using ajax makes a pleasant feeling to the user. It makes even more happier if upload progress status is printed with percentage.

            In this blog, you will make a file upload form using ajax with file upload progress bar.

Prerequisites :

1) Javascript supported browser
2) LAMP Server / XAMPP Server

Code :

index.html

<!DOCTYPE html>
<html> <head><title>Multiple File Upload using Ajax</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script> </head> <body><div><form action="action.php" method="post" enctype="multipart/form-data" id="multiple-upload-form"><input type="button" id="select-file-btn" value="Select Files" onclick="document.getElementById('files').click(); return false;&qu…