Infinite scrolling

anagomes · 2013-07-16 12:19:23

Hi guys!
I’m a beginner with textpattern and with coding. I’m trying to build a small blog and I wanted infinite scroll to work in my page. Is there a plugin I can use?
My problem is that I cannot figure out how to call the next article as soon as the scroll reaches the bottom. Here’s the code I’m using:

(...)
$("#scroll_to_bottom").click(function(e){
	e.preventDefault();
	$("#content_2").mCustomScrollbar("scrollTo","bottom");
});
function appendTextOnTotalScroll(){
	var c=$("#content_2").find(".mCSB_container .container div > article:last");
	var h="<article id="2"></article>";
	c.after(h);
	$("#content_2").mCustomScrollbar("update");
	}
});
(...)

I know this (var h="<article id="2"></article>";) is not correct but I’ve tried everything. Can someone give me a tip on how to solve this?

{Edited to add some Textile for displaying straight quotes and intended indentation. – Uli}

Last edited by uli (2013-07-16 13:02:37)

uli · 2013-07-16 12:59:09

Please give us a link to the site or at least post the complete code output. ~~From what I can read here (not knowing the infinite scroll jQuery plugin) that code only works on clicking a scroll link, it’s not for scrolling via mousewheeel nor via scrollbars.~~ Sorry, that impression was caused by false indentation (corrected that above).

There’s no such plugin for Textpattern, but, like most code snippets, you can easily include the necessary jQuery codes in your templates.

Last edited by uli (2013-07-16 13:03:47)

anagomes · 2013-07-17 05:55:20

Hi, Uli!
I’m trying a different approach now but I think I have the same problem… Am I not naming the correct div in the script?
Here’s the website lik: http://smalltalk.subbureau.com/

etc · 2013-07-17 08:31:20

anagomes wrote:

Am I not naming the correct div in the script?

Most probably no, your page does not contain <article id="2" />. You need to do an AJAX call to the server to retrieve the following article.

Dragondz · 2013-07-17 09:35:53

Begin by correcting the body tag!

uli · 2013-07-17 10:51:14

anagomes wrote:

Here’s the website lik: http://smalltalk.subbureau.com/

There’s not a single tag for integrating Infinitescroll: No script-tag for jQuery, not the Infinitescroll plugin, no initialisation. You must have all of them present in your page template, in the order I named them.

anagomes · 2013-07-17 11:18:44

I figure it out!
Thank you so much for your help!

Last edited by anagomes (2013-07-17 11:58:03)

uli · 2013-07-17 12:04:12

anagomes wrote:

I have the script for infinite scroll:

;)
Not at the moment I visited the site.

Right now all seems right: all necessary elements in the correct order, scripts URLs link to their respective sources, minimum options are embedded, selectors in the options are exactly like you named them in the source code. I’ve no idea why it shouldn’t be working, sorry.

Last edited by uli (2013-07-17 12:05:33)

uli · 2013-07-17 12:09:27

anagomes wrote:

I figure it out!

Sorry, doesn’t work for me (at the moment ;)

And please:
Once you have it working: please post what’s been wrong, others – including me – can learn from it, and these who put their time in it to help you would know what caused their confusion.

Thank you.

anagomes · 2013-07-17 12:15:02

What happen was that I was working on the files while you were checking the website, so there were some errors (like the body tag and the script not being there) because of that.

And the main problem was that I was not naming the right container when initializing the infinite scroll script.

Thank you again for your time

uli · 2013-07-17 12:41:22

You’re welcome!

Problem is: Infinitescroll seems to do its work only on smaller screens. When there’s no scrollbar necessary, then there’s no need for infinite scroll to start calling for articles, apparently. Can probably be fixed with a html {height: 101%} in your style sheet, but at the cost of constant scrollbars.

etc · 2013-07-17 20:41:43

After some research, I have found a jQuery plugin that simulates “show/hide” events of different elements. After including jQuery and jquery.sonar.min.js in page source, this works rather well for infinite scroll (tested with 4.6 default theme):

<txp:if_individual_article><txp:else />
<script>
(function($){
var $main = $("main").first();
$.fn.doScroll = function() {
	var $href = $(this).attr("href");
	$("<div />").load($href + " main > *", function() {
		$(this).find("a.paginator-next").one("scrollin", $.fn.doScroll);
		$main.append($(this).children());
		$(this).remove();
	});
};
$("a.paginator-next").one("scrollin", $.fn.doScroll);
})(jQuery);
</script>
</txp:if_individual_article>

Edit: test link

Last edited by etc (2015-05-03 20:53:26)

Textpattern CMS

Textpattern CMS support forum

#1 2013-07-16 12:19:23

Infinite scrolling

#2 2013-07-16 12:59:09

Re: Infinite scrolling

#3 2013-07-17 05:55:20

Re: Infinite scrolling

#4 2013-07-17 08:31:20

Re: Infinite scrolling

#5 2013-07-17 09:35:53

Re: Infinite scrolling

#6 2013-07-17 10:51:14

Re: Infinite scrolling

#7 2013-07-17 11:18:44

Re: Infinite scrolling

#8 2013-07-17 12:04:12

Re: Infinite scrolling

#9 2013-07-17 12:09:27

Re: Infinite scrolling

#10 2013-07-17 12:15:02

Re: Infinite scrolling

#11 2013-07-17 12:41:22

Re: Infinite scrolling

#12 2013-07-17 20:41:43

Re: Infinite scrolling

Board footer