Jump to content

Is there an infinite scroll script that would work with Masonry?

man5

By man5
in PHP Coding Help

 Share

Recommended Posts

man5 Regular Member

man5

Posted
Posted (edited)

The current infinite scroll script I have works great by it self. The masonry script I have works as well by itself.  However when I combine them both, they won't work.

 

I am wondering if there is an infinite scroll script that would work with Masonry?

Edited by man5
man5 Regular Member

man5

Posted
  • Author
Posted (edited)

When you put the 2 scripts on the page do you get any errors in the console when they are firing?

 

 

Well it's better to show you the full setup.  I don't get any errors. It's just that the items from the database query are not connecting with the masonry setup. if I have retrive 10 items from database and 10 items I list in the #container, both will showup. 10 Masonry items will show up as they should and 10 query items will show up as it would but overlapping the masonry items.

index.php

<!DOCTYPE HTML>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
	
	<title>Home page</title>
	<meta name="description" content="description here" />
	
	<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
	<!-- external jQuery file to fall back on !-->
	<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
	
	<!-- Masonry Images !-->
	<script src="js/masonry.pkgd.min.js"></script>
	<script>
		$(window).load(function() {  
			var $container = $('#container');
			$container.masonry({
				itemSelector: '.item'
			});
		}); 
	</script>
	
	<!-- Infinite scroll !-->
	<script src="js/infinite.records.js"> </script>
	<script>
		$(document).ready(function() {

			$('#container').scrollPagination({
			<?php	
				$currentPage = basename($_SERVER['PHP_SELF'], ".php");

				switch($currentPage) {
					case 'index':
						?> url     : 'infinite-records.php?page=home', 
						   nop     : 5, 
						<?php 
					break;
				}	
			?>	
				offset  : 0, 
				error   : 'No more', 
				delay   : 500,
				scroll  : false 
			});
			
		});
	</script>
</head>
<body>

	<section id="container"  class="js-masonry" data-masonry-options='{ "columnWidth": 30, "itemSelector": ".item" }'>
	
	</section>
	
</body>
</html>

infinite-records.php

$offset = is_numeric($_POST['offset']) ? $_POST['offset'] : die();
$postnumbers = is_numeric($_POST['number']) ? $_POST['number'] : die();

switch($_GET['page']) {
	
	case 'home':
		$newresults = DB::getInstance()->query("SELECT * FROM items ORDER BY item_id DESC LIMIT {$postnumbers} OFFSET ".$offset); 
	break;
}

if(!$newresults->count()) {

	// echo 'No results found!';  
	
} else {

	try {	
		foreach($newresults->results() as $row) {
			
			$thumb_img	     = 	escape($row->thumb_path);
			
			?>
			<div class="item">
				<img src="<?php echo $thumb_img; ?>">
			</div>
			<?php
		}
		
	} catch(Exception $e) {
		die($e->getMessage());
	} 	
}

infinite.records.js

(function($) {

	$.fn.scrollPagination = function(options) {
		
		var settings = { 
			
			url     : 'infinite-records.php', // url to get data from, via .post method, to add a get parameter, just add it on the end of this url
			nop     : 14, // The number of posts per scroll to be loaded
			offset  : 0, // Initial offset, begins at 0 in this case
			error   : 'No more', // When the user reaches the end this is the message that is
			                            // displayed. You can change this if you want.
			delay   : 500, // When you scroll down the posts will load after a delayed amount of time.
			               // This is mainly for usability concerns. You can alter this as you see fit
			scroll  : false // The main bit, if set to false posts will not load as the user scrolls. 
			               // but will still load if the user clicks.
		}
		
		// Extend the options so they work with the plugin
		if(options) {
			$.extend(settings, options);
		}
		
		// For each so that we keep chainability.
		return this.each(function() {		
			
			// Some variables 
			$this = $(this);
			$settings = settings;
			var offset = $settings.offset;
			var busy = false; // Checks if the scroll action is happening 
			                  // so we don't run it multiple times
			
			// Custom messages based on settings
			if($settings.scroll == true) $initmessage = 'Scroll for more';
			else $initmessage = 'Show more';
			
			// Append custom messages and extra UI
			$this.append('<div class="content"></div><div class="loading-bar">'+$initmessage+'</div>');
			
			function getData(page) {
				
				$.post($settings.url, {
						
					action        : 'scrollpagination',
				    number        : $settings.nop,
				    offset        : offset,
					    
				}, function(data) {
						
					// Change loading bar content (it may have been altered)
					$this.find('.loading-bar').html($initmessage);
						
					// If there is no data returned, there are no more posts to be shown. Show error
					if(data == "") { 
						$this.append('.loading-bar').hide();
					}
					else {
						
						// Offset increases
					    offset = offset+$settings.nop; 
						    
						// Append the data to the content div
					   	$this.find('.content').append(data);
						
						// No longer busy!	
						busy = false;
					}	
						
				});
					
			}
			
			getData(); // Run function initially
			
			// If scrolling is enabled
			if($settings.scroll == true) {
				// .. and the user is scrolling
				$(window).scroll(function() {
					
					// Check the user is at the bottom of the element
					if($(window).scrollTop() + $(window).height() > $this.height() && !busy) {
						
						// Now we are working, so busy is true
						busy = true;
						
						// Tell the user we're loading posts
						$this.find('.loading-bar').html('Loading More');
						
						// Run the function to fetch the data inside a delay
						// This is useful if you have content in a footer you
						// want the user to see.
						setTimeout(function() {
							
							getData();
							
						}, $settings.delay);
							
					}	
				});
			}
			
			// Also content can be loaded by clicking the loading bar/
			$this.find('.loading-bar').click(function() {
			
				if(busy == false) {
					busy = true;
					getData();
				}
			
			});
			
		});
	}

})(jQuery);
Edited by man5
fastsol Regular Member

fastsol

Posted
Posted

I am not experienced in the infinite scroll thing but I have used masonry before.  I can't say that this will help at all but I had an issue with the masonry not loading right when I used the declaration you have inline in the html.  It would work sometimes and not others depending on how fast all the images loaded on the page before the masonry started moving things.  I went with this instead.

$(window).load(function(){
	var $container = $('#products-main-wrap');
	// initialize
	$container.masonry({
	  columnWidth: 254,
	  itemSelector: '.product-details-wrap'
	});
});

You have to use the $(window).load() and not the $(document).ready() or it will still have the same issue cause the images have not finished loading yet.  Like I said this may not change anything for your described issue.

man5 Regular Member

man5

Posted
  • Author
Posted

I am not experienced in the infinite scroll thing but I have used masonry before.  I can't say that this will help at all but I had an issue with the masonry not loading right when I used the declaration you have inline in the html.  It would work sometimes and not others depending on how fast all the images loaded on the page before the masonry started moving things.  I went with this instead.

$(window).load(function(){
	var $container = $('#products-main-wrap');
	// initialize
	$container.masonry({
	  columnWidth: 254,
	  itemSelector: '.product-details-wrap'
	});
});

You have to use the $(window).load() and not the $(document).ready() or it will still have the same issue cause the images have not finished loading yet.  Like I said this may not change anything for your described issue.

Sorry that didn't do the trick. 

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • 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.