maxim75/gist:1026623

## gistfile1.html

<!-- http://webdeveloperplus.com/jquery/create-a-dynamic-scrolling-content-box-using-ajax/#respond -->


<!DOCTYPE html>
<html>
	<head>
		<style>
			#container{
				width:400px;
				margin:0px auto;
				padding:40px 0;
			}
			#scrollbox{
				width:400px;
				height:300px;
				overflow:auto; overflow-x:hidden;
			}
			#container > p{
				background:#eee;
				color:#666;
				font-family:Arial, sans-serif; font-size:0.75em;
				padding:5px; margin:0;
				text-align:right;
			}

		</style>
		<!-- Google Maps -->
		<!--
		<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
		-->
		<!-- JQuery -->
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

		<script>
			$('document').ready(function(){
				updatestatus();
				scrollalert();
			});
			function updatestatus(){
				//Show number of loaded items
				var totalItems=$('#content p').length;
				$('#status').text('Loaded '+totalItems+' Items');
			}
			function scrollalert(){
				var scrolltop=$('#scrollbox').prop('scrollTop');
				var scrollheight=$('#scrollbox').prop('scrollHeight');
				var windowheight=$('#scrollbox').prop('clientHeight');
				var scrolloffset=20;
				if(scrolltop>=(scrollheight-(windowheight+scrolloffset)))
				{
					//fetch new items
					$('#status').text('Loading more items...');
					$.get('new-items.html', '', function(newitems){
						$('#content').append(newitems);
						updatestatus();
					});
				}
				setTimeout('scrollalert();', 1500);
			}

		</script>
	</head>
	<body>
		<div id="container">
			<div id="scrollbox" >
				<div id="content" >
					<p>Lorem ipsum dolor sit amet</p>
					<p>Ipsum lorem dolor amet sit</p>
					<p>Dolor lorem ipsum amet tis</p>
					<p>Lorem ipsum dolor sit amet</p>
					<p>Ipsum lorem dolor amet sit</p>
					<p>Dolor lorem ipsum amet tis</p>
					<p>Lorem ipsum dolor sit amet</p>
					<p>Ipsum lorem dolor amet sit</p>
					<p>Dolor lorem ipsum amet tis</p>
				</div>
			</div>
			<p><span id="status" ></span></p>
		</div>

	</body>
</html>

	<!-- http://webdeveloperplus.com/jquery/create-a-dynamic-scrolling-content-box-using-ajax/#respond -->


	<!DOCTYPE html>
	<html>
	<head>
	<style>
	#container{
	width:400px;
	margin:0px auto;
	padding:40px 0;
	}
	#scrollbox{
	width:400px;
	height:300px;
	overflow:auto; overflow-x:hidden;
	}
	#container > p{
	background:#eee;
	color:#666;
	font-family:Arial, sans-serif; font-size:0.75em;
	padding:5px; margin:0;
	text-align:right;
	}

	</style>
	<!-- Google Maps -->
	<!--
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
	</script>
	-->
	<!-- JQuery -->
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

	<script>
	$('document').ready(function(){
	updatestatus();
	scrollalert();
	});
	function updatestatus(){
	//Show number of loaded items
	var totalItems=$('#content p').length;
	$('#status').text('Loaded '+totalItems+' Items');
	}
	function scrollalert(){
	var scrolltop=$('#scrollbox').prop('scrollTop');
	var scrollheight=$('#scrollbox').prop('scrollHeight');
	var windowheight=$('#scrollbox').prop('clientHeight');
	var scrolloffset=20;
	if(scrolltop>=(scrollheight-(windowheight+scrolloffset)))
	{
	//fetch new items
	$('#status').text('Loading more items...');
	$.get('new-items.html', '', function(newitems){
	$('#content').append(newitems);
	updatestatus();
	});
	}
	setTimeout('scrollalert();', 1500);
	}

	</script>
	</head>
	<body>
	<div id="container">
	<div id="scrollbox" >
	<div id="content" >
	<p>Lorem ipsum dolor sit amet</p>
	<p>Ipsum lorem dolor amet sit</p>
	<p>Dolor lorem ipsum amet tis</p>
	<p>Lorem ipsum dolor sit amet</p>
	<p>Ipsum lorem dolor amet sit</p>
	<p>Dolor lorem ipsum amet tis</p>
	<p>Lorem ipsum dolor sit amet</p>
	<p>Ipsum lorem dolor amet sit</p>
	<p>Dolor lorem ipsum amet tis</p>
	</div>
	</div>
	<p><span id="status" ></span></p>
	</div>

	</body>
	</html>