bhrigu123/scroll.html

## scroll.html
<!DOCTYPE html>
<html>
	<head>
		<title>Fetching photos</title>
		<link href="E:\W\js\timer.css" type="text/css" rel="stylesheet">
	</head>
	<body>
		<script>
		var req;
		function fetchData(){
		}
		</script>
		<input type="textbox" id="input">
		<button id="submit">Check Out!</button>
		<ul id="lis">

		</ul>
		<div id="photos"></div>
		<script type="text/javascript">
			var x = document.getElementById('input');
			var y = document.getElementById('submit');
			var im;
			var lis;
			var add;
			y.addEventListener('click', func);
			var req;
			function func(e) {
				req = new XMLHttpRequest();
				var input = x.value;
				console.log(input);
				req.open("GET","http://graph.facebook.com/"+input+"/photos/uploaded", true);
				req.responseType = 'json'
				req.send();
				im = document.getElementById('one');
				req.addEventListener('load',loadImg);
				function loadImg(e) {
					console.log(req.response.data.length);
					for(var i = 0;i<req.response.data.length;i++) {
							console.log(req.response.length);
							lis = document.getElementById('lis');
							add=document.createElement("li");
							im = document.createElement("img");
							im.src=""+req.response.data[i].source;
							add.appendChild(im);
							lis.appendChild(add);
					}
				}
			}
		</script>
		<script type="text/javascript">
			var FBPAGEPHOTOS = (function() {
				var pageURL;
				var nexURL;
				var divID;
				function renderPhotos() {
					nexURL = this.response.paging.next;
					var count = this.response.data.length;
					for(var i=0;i<count;i++) {
						var elem = document.createElement('img');
						elem.classList.add('myImage');
						elem.src = this.response.data[i].source;

						document.getElementById(divID).appendChild(elem);
					}
				}
				function handleError() {
					document.getElementById(divID).innerHTML = "There was an Error!";
				}
				function fetchPhotos() {
					if(nexURL === null || nexURL === undefined || nexURL === '')
					{
						throw "URL NOT SPECIFIED";
					}
					var req = new XMLHttpRequest();
					req.open("GET",nexURL,true);
					req.responseType = "json";
					req.addEventListener('load',renderPhotos);
					req.addEventListener('error',handleError);
					req.send();
				}
				return {
					init: function(page_url,div_id) {
						divID = div_id;
						nexURL = "http://graph.facebook.com/"+page_url+"/photos/uploaded";
						pageURL = page_url;
						if(document.getElementById(divID) !== null){

							document.getElementById(divID).innerHTML = "";
						}
						fetchPhotos();
						window.addEventListener('scroll',function() {

							var yLeftToGo =  document.body.offsetHeight - (window.pageYOffset + window.innerHeight);
							if(yLeftToGo <=0 ) {
								fetchPhotos();
							}
						});
					}
				};
			})();
			FBPAGEPHOTOS.init('9gag','photos');
		</script>
	</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Fetching photos</title>
	<link href="E:\W\js\timer.css" type="text/css" rel="stylesheet">
	</head>
	<body>
	<script>
	var req;
	function fetchData(){
	}
	</script>
	<input type="textbox" id="input">
	<button id="submit">Check Out!</button>
	<ul id="lis">

	</ul>
	<div id="photos"></div>
	<script type="text/javascript">
	var x = document.getElementById('input');
	var y = document.getElementById('submit');
	var im;
	var lis;
	var add;
	y.addEventListener('click', func);
	var req;
	function func(e) {
	req = new XMLHttpRequest();
	var input = x.value;
	console.log(input);
	req.open("GET","http://graph.facebook.com/"+input+"/photos/uploaded", true);
	req.responseType = 'json'
	req.send();
	im = document.getElementById('one');
	req.addEventListener('load',loadImg);
	function loadImg(e) {
	console.log(req.response.data.length);
	for(var i = 0;i<req.response.data.length;i++) {
	console.log(req.response.length);
	lis = document.getElementById('lis');
	add=document.createElement("li");
	im = document.createElement("img");
	im.src=""+req.response.data[i].source;
	add.appendChild(im);
	lis.appendChild(add);
	}
	}
	}
	</script>
	<script type="text/javascript">
	var FBPAGEPHOTOS = (function() {
	var pageURL;
	var nexURL;
	var divID;
	function renderPhotos() {
	nexURL = this.response.paging.next;
	var count = this.response.data.length;
	for(var i=0;i<count;i++) {
	var elem = document.createElement('img');
	elem.classList.add('myImage');
	elem.src = this.response.data[i].source;

	document.getElementById(divID).appendChild(elem);
	}
	}
	function handleError() {
	document.getElementById(divID).innerHTML = "There was an Error!";
	}
	function fetchPhotos() {
	if(nexURL === null \|\| nexURL === undefined \|\| nexURL === '')
	{
	throw "URL NOT SPECIFIED";
	}
	var req = new XMLHttpRequest();
	req.open("GET",nexURL,true);
	req.responseType = "json";
	req.addEventListener('load',renderPhotos);
	req.addEventListener('error',handleError);
	req.send();
	}
	return {
	init: function(page_url,div_id) {
	divID = div_id;
	nexURL = "http://graph.facebook.com/"+page_url+"/photos/uploaded";
	pageURL = page_url;
	if(document.getElementById(divID) !== null){

	document.getElementById(divID).innerHTML = "";
	}
	fetchPhotos();
	window.addEventListener('scroll',function() {

	var yLeftToGo = document.body.offsetHeight - (window.pageYOffset + window.innerHeight);
	if(yLeftToGo <=0 ) {
	fetchPhotos();
	}
	});
	}
	};
	})();
	FBPAGEPHOTOS.init('9gag','photos');
	</script>
	</body>
	</html>