Onscroll load more items?

Ivan Ivković · March 5, 2012

<?php

include('init.php');
include(INCLUDES . 'head.php');
echo '</head>';
echo '<body>';

?>

<script type="text/javascript" src="<?php echo SCRIPTS ?>masonry.min.js"></script>
<script type="text/javascript">

window.onload = function() {
  var wall = new Masonry( document.getElementById('container') );
};

/* AJAX */
function ajaxRequest(v1, v2){
if (v1 == ""){
	document.getElementById("container").innerHTML = "";
	return;
}
if(window.XMLHttpRequest){
	xmlhttp = new XMLHttpRequest();
}else{
	xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function(){
	if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
		document.getElementById("container").innerHTML = xmlhttp.responseText;
	}
}
xmlhttp.open("GET", "<?php echo AJAX?>ajaxresponse.php?v1=" + v1 + '&v2=' + v2, true);
xmlhttp.send();
}

</script>

<?php
include(WIDGETS . 'navigation.php');

$result = $db -> query('SELECT id, img, usr, name, cityName, regionID, countryID FROM sc_pin JOIN loc_cities ON loc_cities.cityID = sc_pin.city ORDER BY time LIMIT 2');
if($result -> num_rows){
	echo '<div id="container">';
	while($fetch = $result -> fetch_array()){
		$user = new User($fetch['usr']);
		if($fetch['regionID'] == NULL){
			$result2 = $db -> query('SELECT countryName FROM loc_countries WHERE countryID = "' . $fetch['countryID'] . '"');
			if($result2 -> num_rows){
				$fetch2 = $result2 -> fetch_array();
				$source = $fetch2['countryName'];
			}else{
				$source = 'Source Not Found';
			}
		}else{
			$result2 = $db -> query('SELECT regionName FROM loc_regions WHERE regionID = "' . $fetch['regionID'] . '"');
			if($result2 -> num_rows){
				$fetch2 = $result2 -> fetch_array();
				$source = $fetch2['regionName'];
			}else{
				$source = 'Source Not Found';
			}
		}
		echo '<div class=\'item\'>';

		?>
		<div onmouseover="document.getElementById('fb_like<?php echo $fetch['id']?>').style.display='block'" class="fb-like" id="fb_like<?php echo $fetch['id']?>" data-send="false" data-layout="button_count" data-width="450" data-show-faces="true"></div><div id="fb-root"></div>
	<script>(function(d, s, id) {
	  var js, fjs = d.getElementsByTagName(s)[0];
	  if (d.getElementById(id)) return;
	  js = d.createElement(s); js.id = id;
	  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=239687926121487";
	  fjs.parentNode.insertBefore(js, fjs);
	}(document, 'script', 'facebook-jssdk'));</script>

<img class="pin" onmouseover="document.getElementById('fb_like<?php echo $fetch['id']?>').style.display='block'" onmouseout="document.getElementById('fb_like<?php echo $fetch['id']?>').style.display='none'"
<?php

		echo ' src=\'pins/' . $fetch['usr'] . '/' . $fetch['img'] . '\'/><div style="width: 100%;"><img src="' . $user -> small_picture_url . '"  class="prof"/> <span class="act"> has been to "' . $fetch['name'] . '"</span></div><span class=\'loc\'> ' .$fetch['cityName'] . ', '. $source . '</span></br></div>';

	}
	echo '</div>';//
}else{
	echo '<div id="error_content">Error or empty database. Please contact the staff immediately.</div>';
}
?>
<script type="text/javascript">

</script>

I want my code to call ajaxrequest to fill container div with more data when user scrolls the page down.

Soz if the HTML part is bit messy, I have to shrink it.

Ivan Ivković · March 5, 2012

Solved with bodyonscroll="ajaxfunction bla bla".

I must improve it to be more specific, not to be reactive to any scroll.

Sign In

Onscroll load more items?

Recommended Posts

Ivan Ivković

Link to comment

Share on other sites

Ivan Ivković

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information