Jump to content

Onscroll load more items?


Ivan Ivković

Recommended Posts

<?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.

Link to comment
https://forums.phpfreaks.com/topic/258303-onscroll-load-more-items/
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.