Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

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

anagomes
New Member
Registered: 2013-07-16
Posts: 9

Infinite scrolling

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)

Offline

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

uli
Moderator
From: Cologne
Registered: 2006-08-15
Posts: 4,242

Re: Infinite scrolling

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)


In bad weather I never leave home without wet_plugout, smd_where_used and adi_form_links

Offline

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

anagomes
New Member
Registered: 2013-07-16
Posts: 9

Re: Infinite scrolling

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/

Offline

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

etc
Developer
Registered: 2010-11-11
Posts: 4,432
Website GitHub

Re: Infinite scrolling

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.

Offline

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

Dragondz
Moderator
From: Algérie
Registered: 2005-06-12
Posts: 1,405
Website Twitter

Re: Infinite scrolling

Begin by correcting the body tag!

Offline

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

uli
Moderator
From: Cologne
Registered: 2006-08-15
Posts: 4,242

Re: Infinite scrolling

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.


In bad weather I never leave home without wet_plugout, smd_where_used and adi_form_links

Offline

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

anagomes
New Member
Registered: 2013-07-16
Posts: 9

Re: Infinite scrolling

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

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

Offline

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

uli
Moderator
From: Cologne
Registered: 2006-08-15
Posts: 4,242

Re: Infinite scrolling

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)


In bad weather I never leave home without wet_plugout, smd_where_used and adi_form_links

Offline

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

uli
Moderator
From: Cologne
Registered: 2006-08-15
Posts: 4,242

Re: Infinite scrolling

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.


In bad weather I never leave home without wet_plugout, smd_where_used and adi_form_links

Offline

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

anagomes
New Member
Registered: 2013-07-16
Posts: 9

Re: Infinite scrolling

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

Offline

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

uli
Moderator
From: Cologne
Registered: 2006-08-15
Posts: 4,242

Re: Infinite scrolling

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.


In bad weather I never leave home without wet_plugout, smd_where_used and adi_form_links

Offline

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

etc
Developer
Registered: 2010-11-11
Posts: 4,432
Website GitHub

Re: Infinite scrolling

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)

Offline

Board footer

Powered by FluxBB