Wedge

Public area => The Pub => Topic started by: MultiformeIngegno on November 17th, 2012, 02:03 AM

Title: Infinite Scroll
Post by: MultiformeIngegno on November 17th, 2012, 02:03 AM
Idea for a plugin (or a theme...): infinite scroll for posts with a fixed small footer (if needed).

Something like http://jetpack.me/support/infinite-scroll/

Example: http://2010dev.wordpress.com/
Title: Re: Infinite Scroll
Post by: Arantor on November 17th, 2012, 02:20 AM
I've thought about doing this before - I know emanuele did a mod for SMF, but it screws a lot of things up to implement this generally.
Title: Re: Infinite Scroll
Post by: MultiformeIngegno on November 17th, 2012, 10:53 AM
Quote from Arantor on November 17th, 2012, 02:20 AM
I've thought about doing this before - I know emanuele did a mod for SMF, but it screws a lot of things up to implement this generally.
Uhm, the example link anyway seems to work fine :)
Title: Re: Infinite Scroll
Post by: Arantor on November 17th, 2012, 04:39 PM
Aside from general usability impairment the main difference is it knackers your last post read status, adds unnecessarily to server load and can hurt SEO. Other than that it's a great idea.
Title: Re: Infinite Scroll
Post by: Arantor on February 10th, 2013, 07:00 PM
Just as a thought, how about a compromise of 'load the next x items AJAXively' as a button, without having to actually go to the next page?
Title: Re: Infinite Scroll
Post by: Arantor on February 10th, 2013, 09:21 PM
Or in fact, here's an even better solution - http://tumbledry.org/2011/05/12/screw_hashbangs_building

It still does the whole endless loading but still preserves everything else.

I could actually consider implementing this.
Title: Re: Infinite Scroll
Post by: Dismal Shadow on February 11th, 2013, 02:56 AM
Doesn't this impact performance or server stress?
Title: Re: Infinite Scroll
Post by: Arantor on February 11th, 2013, 03:14 AM
No more so than clicking on the next page anyway.

That's the joy of it... if the browser can't do it (i.e. lower IE, search engines), no harm, no foul, they don't realise any different.

Literally just imagine it as if you're at the start of a very long thread, and when you get to the bottom you're pressing the next page button - the difference is your browser is doing it for you, and only when you get near the end of the thread anyway.
Title: Re: Infinite Scroll
Post by: godboko71 on February 11th, 2013, 04:12 AM
You know that might make me more apt to view and read new to me long threads less clicking because its so hard :p
Title: Re: Infinite Scroll
Post by: Dragooon on February 11th, 2013, 07:32 AM
I implemented the same behavior for my mobile theme (never released the version with this behavior), I honestly like that better than page navigation when one needs to continuously read the topic.
Title: Re: Infinite Scroll
Post by: MultiformeIngegno on February 11th, 2013, 01:32 PM
Maybe there should be a check: if infinite-scroll-compatible -> ok; if not -> show page numbers.
Title: Re: Infinite Scroll
Post by: Dragooon on February 11th, 2013, 01:47 PM
Quote from MultiformeIngegno on February 11th, 2013, 01:32 PM
Maybe there should be a check: if infinite-scroll-compatible -> ok; if not -> show page numbers.
No, seriously. Page numbers should be visible at all times, in one form or the another. You cannot browse a 100 page thread on infinite scrolling.
Title: Re: Infinite Scroll
Post by: MultiformeIngegno on February 11th, 2013, 02:23 PM
Uh, right. A fixed footer then
Title: Re: Infinite Scroll
Post by: Arantor on February 11th, 2013, 04:55 PM
Or even read the link I posted? ;)
Title: Re: Infinite Scroll
Post by: MultiformeIngegno on February 11th, 2013, 06:45 PM
Quote from Arantor on February 11th, 2013, 04:55 PM
Or even read the link I posted? ;)
Finally I managed to read it all. Really interesting. Comments too (the main cons is that content on the page can change, think about topic merging, posts removal, etc. This maybe could be solved appending a #post-id when the user scrolls down each message).
Quote
Miguel:
It’s just an idea but would it be possible to change the way of presenting data? Instead organizing it among “pages”, to present them directly as “posts” (or whatever title you might prefer). I mean when you start at the top, the browser adds an anchor to the first post’s ID (/blog/#trip-to-spain) and, as you scroll down, it changes as you hover each post: /blog/#pic-of-my-son -> /blog/#new-job, etc. Assuming you don’t store them on browser’s history, at the very instant the user would like to link the web URI, he/she would have the “exact” position for his friend to visit, instead the long list.

Finally, as the user scrolls up or down, the browser adds more posts.

PS: Wouldn’t it be preferable to put everything inside a div with overflow property, so a footer is always visible?
Title: Re: Infinite Scroll
Post by: Arantor on February 11th, 2013, 07:05 PM
The same issues present themselves anyway even with paginated content.
Title: Re: Infinite Scroll
Post by: MultiformeIngegno on February 11th, 2013, 07:27 PM
But not with message permalinks:
http://wedge.org/pub/7704/infinite-scroll/msg285909/#msg285909
Title: Re: Infinite Scroll
Post by: Arantor on February 11th, 2013, 07:33 PM
Yes it does, that's the point.

You've put a permalink into my post. What happens if that post is deleted? Or merged with another thread? Or moved to another thread?

The permalink will then refer to the topic as a whole, though IIRC it will at least likely get the right page of the topic (but it will point to the top of that page)
Title: Re: Infinite Scroll
Post by: Nao on February 22nd, 2013, 09:27 AM
Want me to get started on this, guys .?
Title: Re: Infinite Scroll
Post by: MultiformeIngegno on February 22nd, 2013, 12:51 PM
Quote from Nao on February 22nd, 2013, 09:27 AM
Want me to get started on this, guys .?
Aye! :whistle:
Title: Re: Infinite Scroll
Post by: Nao on June 6th, 2013, 10:17 PM
So, a bit late, but just to tell you guys -- I've started working on this... ;)

This is only for topics, nothing else.
Right now, what's happenin' is that it's working (yay). I have yet to deal with URLs, though, but it seems to be doing fine otherwise.
It won't work on mobile (for now), because I'm doing my tests on the mousewheel event, rather than scroll. Why? Because the scroll event doesn't trigger if you try to scroll beyond the end of a page, it only triggers if there's movement in the page. The mousewheel event thus allows me to 'cancel' any Ajax loading until a few more wheel attempts, indicating that we 'really' want to load the next page of the topic, and that's it..

Anyway, pretty happy with what I've done, but it's no fun to test when you have a huge debug log at the bottom of the page, it means I don't get to see the effect of adding posts... :lol:
Title: Re: Infinite Scroll
Post by: MultiformeIngegno on June 6th, 2013, 10:21 PM
Would love to see it in action :D
Title: Re: Infinite Scroll
Post by: Nao on June 6th, 2013, 11:22 PM
And... Here we go!! ;)
Posted: June 6th, 2013, 11:21 PM

And it doesn't work, lol. Gimme a minute to check it...
Posted: June 6th, 2013, 11:22 PM

Voilà, should work now!
Title: Re: Infinite Scroll
Post by: MultiformeIngegno on June 6th, 2013, 11:57 PM
I really really like it!! :D
I like also the fact that it takes a few more scrolls down when you arrive at the end of the page to actually have it activated.
Title: Re: Infinite Scroll
Post by: Nao on June 7th, 2013, 01:43 AM
Yup, as intended...
Although I'd really like to make it work on mobile.

Okay, I'm over bed time by 2 hours, so it's time to go... Please guys, give some feedback... ;) I'm surprised only Lorenzo is interested in this..?
Title: Re: Infinite Scroll
Post by: live627 on June 7th, 2013, 01:46 AM
Quote from MultiformeIngegno on June 6th, 2013, 11:57 PM
I really really like it!! :D
I like also the fact that it takes a few more scrolls down when you arrive at the end of the page to actually have it activated.
+1 and +1
Title: Re: Infinite Scroll
Post by: Johnny54 on June 7th, 2013, 02:06 AM
Nice!!
Title: Re: Infinite Scroll
Post by: agent47 on June 7th, 2013, 08:15 AM
I love it, I really do.
I know as of now this is supposed to work only for topics. However it also seems to be taking effect inside boards (though, not really). Inside boards the page number keeps moving forward though content from the next page isn't brought up. Just thought I'd let you guys know.
Title: Re: Infinite Scroll
Post by: Nao on June 7th, 2013, 12:03 PM
Topic list, yeah, I wanted to give it a try too, so I didn't build in in-topic restrictions to my code; but in the meantime, I decided to focus on topics only, and I forgot to add a restriction.

Also, there's a huge problem with this feature, and I'm surprised no one noticed it. I actually didn't reproduce it until a few minutes ago, and I barely slept last night because I kept thinking this must be buggy!, and yes, unfortunately it was...
Thing is, the JS is broken in new posts added through infinite scrolling.
Reason is that the new page's JS is thrown away, instead of added to the current footer. I'm trying to consider things to fix that, but if I can't, it means I can't have both 'optimized-bytesize' mini-menus and infinite scrolling in Wedge, and I'll have to rewrite mini-menus, or something...

Hard day ahead... -_-
Posted: June 7th, 2013, 08:31 AM

So... I tried multiple solutions for this problem, and it didn't work.
Anyway-- I'm currently rewriting the code, nearly from scratch, and this time it should work. It's not as elegant as the current implementation, but what matters is that it works, hell...
Title: Re: Infinite Scroll
Post by: MultiformeIngegno on June 7th, 2013, 12:25 PM
:(
Title: Re: Infinite Scroll
Post by: Arantor on June 7th, 2013, 01:42 PM
:(

Yeah, I can see the underlying problems with this too, and I got no ideas on fixing them :(
Title: Re: Infinite Scroll
Post by: Nao on June 7th, 2013, 04:16 PM
Well, as I said, I have a solution, but it's complicated too... I'm now using an iframe (ouch). This is the only way to get scripts to work in both the parent page, and its children. I've tested it to work. Unfortunately, I'm having trouble getting rid of everything outside of the post list (either it works, and I lose scripts again, or I just get an empty iframe, and sometimes even -- a page with everything, BUT the posts :lol:), but it's probably a jQuery issue, rather than something I just can't do. I'm taking my lunch break, and I'll see later.
Posted: June 7th, 2013, 02:06 PM

Also, I'm having trouble with a detail... I'm getting errors with YouTube videos in iframes. Apparently, iframes within iframes... You've got to be careful of what domain you're using. Or something. I don't know how to fix that one, for now... :-/
Title: Re: Infinite Scroll
Post by: Arantor on June 7th, 2013, 04:21 PM
Yeah, the nesting thing is a security thing to limit people pulling in things they shouldn't. The only way really is not to nest iframes. Or indeed not use iframes if at all possible :/

Surely the secondary load (page 2 or whatever) knows it's loaded via AJAX... so it just needs to include the code for calling the menu for the items in question... the menu constructor plus main data (what buttons are available) will already be loaded so it's just a case of submitting the extra menu data and some glue, right?
Title: Re: Infinite Scroll
Post by: Nao on June 7th, 2013, 04:33 PM
Quote from Arantor on June 7th, 2013, 04:21 PM
Yeah, the nesting thing is a security thing to limit people pulling in things they shouldn't. The only way really is not to nest iframes. Or indeed not use iframes if at all possible :/
Yeah, well, not possible in our situation -- it's either an iframe, or nothing, because it's pointless really to show a list of posts without the ability to use any JS on it -- I could probably fix most things to work, but mini-menus will never work properly, unless I write two codepaths, one with the 'optimized' mini-menus, and another one with a purely inline mini-menu (i.e. all menu entries are contained within the HTML, rather than compressed at the end of the page to save bandwidth.)
The advantage of the iframe, is that I really don't have to fear any JavaScript changes in the future will break the feature, and to me that made the deal; hence, my disappointment with the YT thing.
Quote
Surely the secondary load (page 2 or whatever) knows it's loaded via AJAX...
The first draft (the one in use here), yes, it does, well it can.
The second draft, being done through an iframe, isn't loaded through AJAX at all, it's really just a regular page load... ;) (Which I'm then manipulating afterwards, to remove stuff from it, and update the pagesection area to get the proper page numbers.)
Quote
so it just needs to include the code for calling the menu for the items in question...
Oh, right, so you're talking about draft #1...
Quote
the menu constructor plus main data (what buttons are available) will already be loaded so it's just a case of submitting the extra menu data and some glue, right?
Yeah, as I said it can always be done; what I fear, though, is that once it 'works', I'll forget about it all, and then find more problems in the future.
For instance, let's just think about a per-post non-mini-menu JS snippet that's rendered through a plugin. How do I tell the plugin, "okay I've loaded the next page, now do your thing"...? I can't, not really.
So, the iframe solution, really is the only 'realistic' solution right now.

(Did anyone notice my recent tendency to, ahem, use commas everywhere, even when not needed..? It's an impulse, and I don't now where it came from, please help me, please, really, I'm sick of it, honest.)

                                       ,
Title: Re: Infinite Scroll
Post by: Arantor on June 7th, 2013, 04:38 PM
Quote
The advantage of the iframe, is that I really don't have to fear any JavaScript changes in the future will break the feature, and to me that made the deal; hence, my disappointment with the YT thing.
Until you have people doing crazy stuff like iframes around the forum. Or most embed code going forward (not just YouTube)
Quote
The first draft (the one in use here), yes, it does, well it can.
I was kind of hoping you were building it via the msg skeleton so it could serve arbitrary slices of topics...
Quote
For instance, let's just think about a per-post non-mini-menu JS snippet that's rendered through a plugin. How do I tell the plugin, "okay I've loaded the next page, now do your thing"...? I can't, not really.
So, the iframe solution, really is the only 'realistic' solution right now.
If you're pulling the full page and manipulating it there and then, surely you can just run any other JS at that point in time?

I dunno, bit pissed off and a bit frazzled from the search crap right now :(
Title: Re: Infinite Scroll
Post by: Nao on June 7th, 2013, 04:50 PM
Quote from Arantor on June 7th, 2013, 04:38 PM
I was kind of hoping you were building it via the msg skeleton so it could serve arbitrary slices of topics...
Nope, I just took the easy way out...
- in index.template.php, I added a span with a class, around the 'Next page' link. (You can see it here, too.)
- in QueryString.php, I added a failsafe to disable the AJAX constant if specifically requested from the Ajax caller, (I think I'll keep this one in, regardless of what I choose to do later...)
- then, in topic.js, I'd just do an Ajax request to get the next page, and retool it to just keep the #forumposts content (also removing the form tag if it was in there, although I'm not sure it was necessary.)

That's really all it took, and the second step is not needed in the iframe version.
Quote
If you're pulling the full page and manipulating it there and then, surely you can just run any other JS at that point in time?
There are JS snippets in external files, and JS snippets in inline HTML, etc... How exactly am I supposed to find them, and run only the ones I want to run..? For instance, if you load script.js from within the Ajax-generated code, it sends me errors, while it'll work (IIRC) when loaded through an iframe, so... Well...
Quote
I dunno, bit pissed off and a bit frazzled from the search crap right now :(
Zen!
Title: Re: Infinite Scroll
Post by: icari on June 7th, 2013, 05:06 PM
looks like the additional pages are not marked as read currently, the new text [not image :P ] appears on the message index if the following page was not "clicked" or something like that, i was sent to a message i had already read in this thread but i had not clicked on page 3 but read that message already with the infinite scroll.
Title: Re: Infinite Scroll
Post by: Nao on June 7th, 2013, 06:42 PM
This probably won't happen with the iframe version, though.
Title: Re: Infinite Scroll
Post by: Nao on June 7th, 2013, 07:48 PM
So...

Ajax version: still getting errors on every page if I attempt to load the entire page (apparently, internal $.each call is broken), but user mini-menus work; if I just request the post list, no JS works, but everything else does.

Iframe version: consistently getting the same cross-origin error when the embedded page also has an embedded iframe. Can't seem to solve it, and it looks like no one has it on google. I tried commenting out the x-frame-origine stuff, to no avail. Other than media embeds, I'm getting it to work without JS errors; it's complicated to remove the surrounding tags, though (and messy), and even when I manage to, I'm stuck with html and body tag stylings that don't match the parent div. So, in addition, I'll have to reset background styling on these tags, and try to make the iframe transparent (I think it's possible). One last (big!) issue is that the iframe's height is calculated after .load(), but even though it's enough to account for images being loaded, it doesn't seem to take iframes into account, or something... Anyway, as a result, sometimes the iframe doesn't have the correct height.

As you can see, I'm quite... stuck, at this point. I don't know which direction to go, and I don't know if it's worth the hassle. I guess it is, but it's frustrating when you managed to cook up an Ajax scroller in a couple of hours, and then you spend the next day rewriting it over and over, without ever managing to get it to run flawlessly.

F*ck.
Title: Re: Infinite Scroll
Post by: Arantor on June 7th, 2013, 08:21 PM
Yeah, the X-Frame-Options header isn't about cross-embedding the YT page but ensuring that a Wedge page can only be inside a frame/iframe that it controlled in the first place, not infringing on what you're doing. The whole YT issue is about nesting iframes which is one of those semi-unwritten rules.

But I get the impression that the solution is to ultimately do it the long way - not using an iframe, and in the second (and onward) page, triggering the menu generation manually on the new items as inline code. I don't see how else to get around all the issues.
Title: Re: Infinite Scroll
Post by: Nao on June 7th, 2013, 09:25 PM
Quote from Arantor on June 7th, 2013, 08:21 PM
But I get the impression that the solution is to ultimately do it the long way - not using an iframe, and in the second (and onward) page, triggering the menu generation manually on the new items as inline code. I don't see how else to get around all the issues.
I'm not sure it's easy to do; and as I said, it doesn't solve the issue of plugins not being able to run their code on the newly loaded posts... And that bothers me the most, really. I don't want to provide support for that later, I guess...
Title: Re: Infinite Scroll
Post by: Nao on June 7th, 2013, 11:50 PM
I've got it working a bit better...

First, I determined where that $.each error was coming from; it was actually from the .acme loop, and was due to the fact that the loop executed on ALL .acme items on the page, i.e. also on items that had already been transformed. So, I simply (?) added a fail-safe to the mime plugin, which would search for a mime container and, if found, skip the item.

And that actually works, now...

After that, I modified the Display template to show the scripts inside the forumposts div, but then I managed to do it another way in pure JS, by filtering the script tags.
A a result, both mini-menus will show on new posts. :)

Of course, I wasn't finished... For instance, clicking Delete on a post would show the confirm box, but immediately delete the post, too.
I determined that if I removed the script src includes from the script list, it would no longer do that; at this point, though, I'm not exactly sure why the eves list of events is actually executing, or something, but whatever...

Another bug that remains, is that if I have the Quick Reply box opened, clicking Quote on a new post will lead me to the full post page, instead of multi-quoting it.

So, yeah, it's technically working, but (1) it's fairly unstable and hard to predict, (2) I still have no frigging idea how to integrate plugins into this, (3) I think that ideally, I should rewrite all post-related code (and things that are changed in ob_sessrewrite) to use $(source).find('...') instead of $('...'), with source being div.new_page:last when called from a new page, or simply the body when called from the main page. See what I mean...? Yeah, it's pretty much impossible to rewrite all of that...

Should I be happy with the, errr... Current drawbacks, and implement it this way...? :-/
Posted: June 7th, 2013, 11:47 PM

PS: just pushed this version online, so that you can test it...
Title: Re: Infinite Scroll
Post by: Nao on June 7th, 2013, 11:51 PM
Quote from Nao on June 7th, 2013, 11:50 PM
PS: just pushed this version online, so that you can test it...
Hmm, just noticed that quick edit won't work, either... -_-
Title: Re: Infinite Scroll
Post by: Arantor on June 7th, 2013, 11:51 PM
1) I think the behaviour needs to be predictable and documentable but that's all it needs to be.

2) Plugins will just splice themselves into the normal menus, and/or splice themselves into the template layers as given. Provided display_main is still called and there's some way for a plugin to know that it's being called via infinite scroll vs not by infinite scroll... hell, could even provide two hooks - one that will be run for each post a la display_main and one that is only run for the first place (for things like topic_solved to splice its information into the page, that's not needed every iteration of page load, only the 'master' load for a topic)

3) That sounds like a huge and drastic change :(
Title: Re: Infinite Scroll
Post by: Nao on June 8th, 2013, 12:18 AM
Quote from Arantor on June 7th, 2013, 11:51 PM
1) I think the behaviour needs to be predictable and documentable but that's all it needs to be.
Can't seem to predict anything.
For instance, 'eves' may not have the same values on the next page. Thus, it's best to add a hack to subs-template to increase the base eves number by 100 or more, so that we don't mix things incorrectly. Unfortunately, doing this... Breaks even more.
Quote from Arantor on June 7th, 2013, 11:51 PM
2) Plugins will just splice themselves into the normal menus, and/or splice themselves into the template layers as given.
Hmm, possibly...
Anyway, my current implementation (I rewrite everything every 10mn or so...), doesn't strip anything, it loads the entire page, which then prompts jQuery to run scripts, then I strip everything that isn't #forumposts. Unfortunately, it looks like the scripts are still executed in the global scope....... Meh. So, it means that functions will run twice, and that isn't too good. If I'm not mistaken, running script.js twice will break deletion confirms, while removing *.js files before their execution, will break quick edit and a few others.
Also, loading the entire page also adapts the layout internally (to make room for the sidebar, etc), and the action menu is then incorrectly positioned, at least once I remove the sidebar etc...

It's incredible, how random it all is... Definitely not for the weak-hearted.
Quote from Arantor on June 7th, 2013, 11:51 PM
Provided display_main is still called and there's some way for a plugin to know that it's being called via infinite scroll vs not by infinite scroll... hell, could even provide two hooks - one that will be run for each post a la display_main and one that is only run for the first place (for things like topic_solved to splice its information into the page, that's not needed every iteration of page load, only the 'master' load for a topic)
Hmm yeah, a possibility...

Do you like infinite scrolling enough to justify more work from both of us, though...? :P
Quote from Arantor on June 7th, 2013, 11:51 PM
3) That sounds like a huge and drastic change :(
Yeah, one I certainly won't ever do, eh.
Title: Re: Infinite Scroll
Post by: Arantor on June 8th, 2013, 12:29 AM
I like infinite scrolling enough to spend some time on it. I'm just not sure right now what use I am with it :/

It's really up to you at this stage whether you want to continue or leave it for now and we'll come back to it. I think ultimately, though, for it to work it'll require spending more bytes in topic view's JS.
Title: Re: Infinite Scroll
Post by: Nao on June 8th, 2013, 01:01 AM
Quote from Arantor on June 8th, 2013, 12:29 AM
I like infinite scrolling enough to spend some time on it. I'm just not sure right now what use I am with it :/

It's really up to you at this stage whether you want to continue or leave it for now and we'll come back to it. I think ultimately, though, for it to work it'll require spending more bytes in topic view's JS.
New version up...
Should work: everything.
Doesn't work, from what I can see: multi-quote, inline moderation.

Hmm, getting close...! ;)
Right in time for bed, eheh...

:edit: Testing quick edit, in infinite mode. Works :)
Posted: June 8th, 2013, 12:49 AM

Also, quick reply seems to be broken, clicking it closes it.... I guess it's due to it executing its setup twice, eheh. I'll make sure to fix that.

So, basically, we can simply tell people that they should be careful that their code can be run several times, and possibly several times per item they're looking to modify. In conclusion, I'll have to 'fix' bugs as we find them, but from now on, it should be relatively 'easy', as these bugs, I can properly understand what they come from, eheh.
Title: Re: Infinite Scroll
Post by: godboko71 on June 8th, 2013, 01:54 AM
Looking pretty neato :) No other comments at this time.
Title: Re: Infinite Scroll
Post by: xrunner on June 8th, 2013, 01:59 AM
OK, I'm going to plead complete ignorance at this time and beg for mercy.

What is "infinite scrolling" and how do I check it out? :hmm:

 :edit: Nevermind I Googled it, I didn't before because I thought it was a local idea.

But does it work here?
Title: Re: Infinite Scroll
Post by: Arantor on June 8th, 2013, 02:09 AM
Go to the first page of a multi-page topic. Scroll down to the very bottom of the page, then a little bit more (with the mouse wheel), marvel at the next page magic loading. (Unless you're an admin in debug mode when you have to scroll down way way past the content through the debug information :lol:)
Title: Re: Infinite Scroll
Post by: xrunner on June 8th, 2013, 02:17 AM
Quote from Arantor on June 8th, 2013, 02:09 AM
Go to the first page of a multi-page topic. Scroll down to the very bottom of the page, then a little bit more (with the mouse wheel), marvel at the next page magic loading.
Oh my gawd! That sent a shiver up my legs!

 :+1:

How many more toys are waiting to be played with around here?

Don't tell me now - I don't want to open all the presents at once.[1] :p

 1. But it's just SMF with a few minor additions right? :rotfl:
Title: Re: Infinite Scroll
Post by: MultiformeIngegno on June 8th, 2013, 03:58 AM
I have some issues when I try to like posts or post thoughts. The "loading" text loads forever and nothing happens. To solve I have to reload the page, post/like again and now works. Maybe this is related to the JS changes?
Title: Re: Infinite Scroll
Post by: Nao on June 8th, 2013, 09:59 AM
Quote from MultiformeIngegno on June 8th, 2013, 03:58 AM
I have some issues when I try to like posts or post thoughts. The "loading" text loads forever and nothing happens. To solve I have to reload the page, post/like again and now works. Maybe this is related to the JS changes?
That's odd...
- Loading stops for me.
- Like button works. (I just did it on xrunner's post above, from an infinitely scrolled page.)
And even if it didn't work, it'd still fall back to the non-Ajax version, which reloads the page entirely.

Meaning, it's certainly a JavaScript error that's blocking your entire process.

You should check out your JavaScript error log (usually in the browser's 'console'), what is your browser?
Title: Re: Infinite Scroll
Post by: agent47 on June 8th, 2013, 10:17 AM
I noticed two bugs after the scrolled feature has been used:
1. Quick reply textbox doesn't stay collapsed.
2. Clicking on the 'number of likes' button takes you to the top of the page.
Title: Re: Infinite Scroll
Post by: Nao on June 8th, 2013, 10:59 AM
Quote from agent47 on June 8th, 2013, 10:17 AM
I noticed two bugs after the scrolled feature has been used:
1. Quick reply textbox doesn't stay collapsed.
2. Clicking on the 'number of likes' button takes you to the top of the page.
(1) is already known, I reported it. Use Quote for now.
(2) I didn't notice. This is most certainly due to the eves counter not being increased; I forgot to upload a file yesterday, I'll see if it works when I upload it.
Posted: June 8th, 2013, 10:36 AM

Okay, both bugs should now be fixed... :)
I've had to had some extra code to the infinite scroller, though, and give up on loading any external files from within the new posts, which means it's bound to create other bugs, it's a bit like whack'a'mole, right..? :lol:
Title: Re: Infinite Scroll
Post by: Nao on June 8th, 2013, 11:14 AM
Okay, so I think it's all fixed... Quick moderation is still buggy, though. Because apparently, newly inserted inputs don't get added to the overall form, when I submit the request to delete a post loaded from beyond, it just ignores it. Also, it reloads the original page, without the infinity items, which I'm not surprised about, but still not happy with...

Apart from that, it *seems* that the infinite scroll is now working fine, and may even be in committable state... (I can live with the quickmod bug for now.)
YAY!! :)
Title: Re: Infinite Scroll
Post by: MultiformeIngegno on June 8th, 2013, 12:51 PM
Yeah seems to work just fine! :D
Title: Re: Infinite Scroll
Post by: Nao on June 8th, 2013, 01:30 PM
Yeah, it just isn't so solid on the long term...
For instance, since I'm removing external script files, if you have on page 2 a video embed but not on page 1, the embedder will try to call swfobject, but generate an error because it failed to find it, since it wasn't declared to begin with, ah ah...

This is the kind of thing that can happen everywhere, to anyone, with whatever plugin you want... :-/

And, I'm still unable to find some kind of jQuery trick to 'limit' the scope of a DOM traversal to a certain item. Which is really upsetting, because they could do, say, some kind of function like $.proxy() but for $()... For instance, $.traverse(from_here); $('span').hide(); would be the equivalent of doing, $('span', from_here).hide()... Then call $.traverse() again to reset to the actual DOM. Seems like a good idea, and a perfect feature for jQuery... Hmm, I'm wondering, if I can't implement it as plugin, maybe..??
Posted: June 8th, 2013, 01:26 PM

Oh, crap!

Good news: it exists! http://api.jquery.com/context/
Bad news: they just deprecated it in the latest release..!!! >_<

Well... At least, it means it's "doable"...

:edit: Talked too soon... It's a getter, not a setter. Well, still, apparently I could attempt to set $.context manually... I'll look into that.
Title: Re: Infinite Scroll
Post by: xrunner on June 9th, 2013, 01:40 AM
Can you make it wrap back around to the first post when reaching the last post? That would be really trick. :)
Title: Re: Infinite Scroll
Post by: Arantor on June 9th, 2013, 01:41 AM
I can only imagine how annoying that would be :/
Title: Re: Infinite Scroll
Post by: xrunner on June 9th, 2013, 01:45 AM
Quote from Arantor on June 9th, 2013, 01:41 AM
I can only imagine how annoying that would be :/
Yea I guess you would need a big red dividing line at the end. I'm just infatuated with it now. It doesn't take that much to entertain me. :)
Title: Re: Infinite Scroll
Post by: Arantor on June 9th, 2013, 01:47 AM
Wait until you see what I've been working on. It explains why I was so frustrated with jQuery UI breaking things... ;)
Title: Re: Infinite Scroll
Post by: xrunner on June 9th, 2013, 01:57 AM
Quote from Arantor on June 9th, 2013, 01:47 AM
Wait until you see what I've been working on. It explains why I was so frustrated with jQuery UI breaking things... ;)
Cool. Can't wait. :cool:
Title: Re: Infinite Scroll
Post by: Nao on June 13th, 2013, 09:11 PM
Quote from xrunner on June 9th, 2013, 01:45 AM
Quote from Arantor on June 9th, 2013, 01:41 AM
I can only imagine how annoying that would be :/
Yea I guess you would need a big red dividing line at the end. I'm just infatuated with it now. It doesn't take that much to entertain me. :)
Only thing I could do, is also implement a reverse infinite scrolling, where scrolling to the top loads the previous pages...
It's possible to do, just annoying.

Also, I'd like to discuss an alternative implementation I made today, which I find really funny...
It all comes down to the fact that I'm not satisfied with having JS problems when loading posts. Really, infinite scrolling is a feature that's targeted to showing elements that don't need JavaScript to 'work'.
So, I went back to using an iframe... Except, instead of showing it, I simply detached the post list, and appended it to the main page. The trick is to use .detach() -- this will keep the events and data, something that even .clone(true, true) doesn't seem to be able to do in jQ when doing an iframe to parent move.

And here's the funny thing... While, for the first time, I managed to get a Dailymotion embed to show up, the scripts are actually STILL inside the iframe, even though I moved them too... So, whenever I click the Delete button on a new post, the confirm popup shows up... Inside the iframe, of course..! Ah ah, very funny, indeed...
Similarly, checking a mod checkbox on a new post will show the "Delete selected posts" option, but in the iframe, not in the main page... While doing the same on an 'old' post, will show the option in the main page, of course.

So, right now, I just don't know where to get, eh... I'm thinking, there MUST be a way to make JavaScript execute, and not conflict with the main page's scripts.
After all, Google Images have (some) JS in their infinite scrolling images, and Tumblr also has events & co. on their new posts/images. I looked into them a bit, and they seem to actually be using the Infinite Scrolling plugin for jQuery, which dates back to 5 years ago..! I didn't even remember jQuery existed at that point, ah ah... Well, I'm debugging through it, and can't see anything related to executing JS, so, hmm... I dunno.

I'm not losing hope; but, honestly, it's taken its toll on me, at least a bit...
Title: Re: Infinite Scroll
Post by: Nao on June 13th, 2013, 09:25 PM
NB, Tumblr blogs don't seem to have any JS in their posts, in the end... It's all about showing plain text links only, really... That's a cheat, I guess. :-/

I probably shouldn't bother too much, and disable mod checkboxes on infinity pages... Although it kinda defeats the purpose of being able to remove more than 15 posts in a row, doesn't it...?
As for external scripts like swfobject, it's still complicated. It's either I get it to execute and break quick edit (I forgot to mention that one...), or the other way around.

Or, I just rewrite quick edit and mod checkboxes to ensure they don't execute code on their own; rather, the main page 'monitors' all quick edit buttons, for instance, and calls the usual stuff when it's pressed. I don't know, is it realistic..?
Title: Re: Infinite Scroll
Post by: Arantor on June 14th, 2013, 01:15 AM
Well, Facebook does it, though I've never studied the methodology of how - but I think it's doing it by sending back new content as JSON to be included into page flow and appending events on demand.
Title: Re: Infinite Scroll
Post by: Nao on June 14th, 2013, 05:06 PM
Ah, yes... But then again, Facebook is super-scripted, just like Google there's a lot of handling happening behind the scenes, and since they have full control of their pages (unlike Wedge which has to deal with future plugins), it's not hard to imagine they could pull it off, I guess...

Although it's interesting to consider using JSON or XML or whatever to retrieve the posts; but that would also imply, I guess, doing the same even on non-infinite pages, i.e. we get the JSON data inside the page, and we inject it through JS... Hmm, not very realistic, I'd say... (But it certainly makes it harder to save the web page, for those interesting in protecting their content, I suppose... :^^;:)
Posted: June 14th, 2013, 05:05 PM

Where do you want me to go, then..?
Title: Re: Infinite Scroll
Post by: Arantor on June 14th, 2013, 05:22 PM
Well, on my todo list is the ability to do true AJAXive quick reply, as in submit the post, get the post in full display mode back and inject it into the page itself.

Problem 1: deferred events
Answer: for code requested via AJAX, don't defer the events. It uses slightly more bandwidth but since everything on the page will already be available, it's not like we're waiting for dependencies like jQuery.

Problem 2: menu items
Answer: When the post is retrieved, drop all existing mini-menus, splice the new post's items into the existing menu definition and re-call it. The returning fragment should deal with this rather than having it already in every page load (since not everyone is going to do this)

Problem 3: payload
Answer: It actually doesn't really matter whether it's JSON, XML or HTML in a light wrapper. As long as it comes through and can run scripts or whatever, it's fine.
Title: Re: Infinite Scroll
Post by: Nao on June 14th, 2013, 07:04 PM
Deferring is mandatory because some calls use the e parameter which is only available at defer time in the eves object.

Mini menus work fine because the existing code relies on post IDs, and they're different in the newly loaded posts.

Eh...
Title: Re: Infinite Scroll
Post by: Arantor on June 14th, 2013, 07:45 PM
Huh, OK. Was just throwing stuff out there. Had forgotten about the way deferred events work in that situation.
Title: Re: Infinite Scroll
Post by: Auk on June 15th, 2013, 04:35 PM
OMG, I really hope this will be optional between users. I hate infinity scroll. I finally got used to google image search when they first implemented it, then began to like it.
If we're going to have infinity scroll, wouldn't it present a problem that you can never reach the bottom of the page for options like quick reply and 'Pages: « previous 1 … 3 4 5   Go UP'? I hope we will be able to access such options all the time.
Quote from Arantor on February 10th, 2013, 07:00 PM
Just as a thought, how about a compromise of 'load the next x items AJAXively' as a button, without having to actually go to the next page?
I like this idea here.

Posted: June 15th, 2013, 04:30 PM
Quote from xrunner on June 9th, 2013, 01:40 AM
Can you make it wrap back around to the first post when reaching the last post? That would be really trick. :)
That should not be automatic.
Title: Re: Infinite Scroll
Post by: Nao on June 15th, 2013, 06:14 PM
No problem, Pete... We're all trying to find solutions.
Quote from Auk on June 15th, 2013, 04:35 PM
OMG, I really hope this will be optional between users.
Nope...
Quote from Auk on June 15th, 2013, 04:35 PM
I hate infinity scroll. I finally got used to google image search when they first implemented it, then began to like it.
Images are all different. Generic websites with tons of visual contents need a discovery feature, and for these, infinite scrolling is perfect. Absolutely perfect. In fact, adding infinite scrolling to Aeva Media is a given, to me...
Quote from Auk on June 15th, 2013, 04:35 PM
If we're going to have infinity scroll, wouldn't it present a problem that you can never reach the bottom of the page for options like quick reply and 'Pages: « previous 1 … 3 4 5   Go UP'? I hope we will be able to access such options all the time.
I hate that.
And, you don't have to do it that way...

99% of all infinite scrollers do it this way: they hook on the scroll event, determine the position within the page, and if it's > 90% or something, they trigger the load.
I don't know if other scrollers do it my way, but here's how I do it: I hook on the mouse wheel event, and when I register a wheel roll, I determine if we've already reached the end of the page. If yes, then I monitor the wheel to see if the users insists on going down. If yes, I trigger the load.

This is a HUGE difference, in terms of usability. The common solution is 'obvious', while the second solution forces the user to make a conscious choice to see more data. By attempting to scroll down even though the page is already at the bottom, it sends Wedge the message that, "yes, I really want more, can you please send me more, pretty please with sugar on top..?"

The only drawback of this method, is that it doesn't work on mobile devices, which don't have a mouse wheel, so I'm looking into hooking the swipe event, and trigger the load after a couple of swipes to the bottom when the page is at the end, or very close to. Unfortunately, I haven't reached that point yet, as I'm too busy fixing JS issues with the scroller in itself. (As I said, images are the winners in infinite scrolling, not only because these are quickly scanned by the human eye, but also because loading an image usually doesn't come with unexpected elements that require running JavaScript, like a video embed... Hmm.)

Anyway, as a conclusion, please note:

(click to show/hide)
The feature is already enabled here, and it's been that way for a week or so...! If you didn't notice it, then you have no grounds to complain, do you..?
Title: Re: Infinite Scroll
Post by: Arantor on June 16th, 2013, 12:22 AM
The thing is, if you're not aware of it, you probably won't ever actually trigger it in the current implementation... which is how we're at the stage we're at where it's live here and people think it isn't.
Title: Re: Infinite Scroll
Post by: Auk on June 16th, 2013, 12:30 AM
Hmm, I just noticed this and like the current implementation of it. I never think to just scroll further than the current page would allow me to. I tested this just now and it doesn't activate upon a tiny super minor mouse scroll which is a good thing. :D

I was wondering how everyone was testing this, I didn't think this would actually go live and I didn't bother to read ALL the posts. Anyway, great job on the implementation.
Title: Re: Infinite Scroll
Post by: Arantor on June 16th, 2013, 12:34 AM
Nao and I have to do even more to actually trigger it ourselves on this site because we have debug information turned on (and we have it set to show-admins only), so there's a ton extra content under the footer... ;)
Title: Re: Infinite Scroll
Post by: xrunner on June 16th, 2013, 12:56 AM
Quote from Arantor on June 16th, 2013, 12:22 AM
The thing is, if you're not aware of it, you probably won't ever actually trigger it in the current implementation...
That's described me before I asked how to get it to work. I didn't even realize it could be done nor did I trigger it "by accident".
Title: Re: Infinite Scroll
Post by: Nao on June 30th, 2013, 12:18 AM
I can't believe I've spent so much time on this feature...
Even though I haven't posted here in two weeks, I regularly tweaked my code, to try and get it to run without issues.

While loading a 'regular' page works fine, if the page has any video embeds, all hell breaks loose.
And, I just can't be happy with that...

I've done countless rewrites, and I always come back to the same thing... "Give up, Nao. Give the fuck up, and do it another way."
The "other" way being, call me a chicken, simply loading the previous/next page when using the wheel, rather than ajaxively loading it and adding it to the page. Basically, simply tie the "mouse wheel movement past the end of the page" action to the "go to next page" link.

Well, at least, it would work flawlessly... :-/
Or should I just be super-happy with an infinite scroller that will work on 'basic' code, but not on anything complex added by plugins in posts...?
That is the question, I'm afraid.
Title: Re: Infinite Scroll
Post by: Nao on June 30th, 2013, 07:53 AM
Bumpies..?
Title: Re: Infinite Scroll
Post by: Arantor on June 30th, 2013, 08:00 AM
I get the feeling that whatever you do, I'm going to end up rewriting it (or you are) because one of the things I want to do is introduce truly AJAXive posting,[1] which means fetching a single post entry with menus etc. and injecting it into the page. If we have the ability to pull one, pulling more is simply a change to the function. But that's going to have to wait until I get back. This C# is still kicking my arse.[2]
 1. Quick reply doesn't have to leave the page, in other words. It's been done for SMF, other platforms do it natively too. I see no reason why we shouldn't be able to.
 2. I mean, I'm using a third party component, and I took it to the author's site with an explanation of what I'm doing and his reply started, "Er... what?" because what I was doing was that messed up. Made perfect sense to me at the time, though he's right and I changed what I was doing.
Title: Re: Infinite Scroll
Post by: Nao on June 30th, 2013, 10:31 AM
Ajax quick reply is easy. I can write it if you want.
Problem is the same when it comes to adding plugin data though... other than that, it's just the same as doing infinite scrolling with one post.

One major issue is if someone else posted in the meantime. But then you can always do a hard redirect to the post page then...
Title: Re: Infinite Scroll
Post by: Arantor on June 30th, 2013, 05:22 PM
If there are posts in the meantime, we can check that when saving the draft and offer to fetch them then and fetch them AJAXively. It works extremely well for XenForo...

The thing is, using iframes and whatnot is really not the best way when you're dealing with individual posts.
Title: Re: Infinite Scroll
Post by: Nao on June 30th, 2013, 05:58 PM
Quote from Arantor on June 30th, 2013, 05:22 PM
If there are posts in the meantime, we can check that when saving the draft and offer to fetch them then and fetch them AJAXively. It works extremely well for XenForo...
Yes, but you may not 'notice' the new posts, though... In general, you'd want to be informed that there have been more posts.
Also, don't forget that if you have 15 posts on a page, and you post a quick reply, you'll get the post on the same page, so if you're copying the URL of the page to show a friend, they may not see the post you were pointing to, because it's really on the next page, etc...

Short summary about infinite scrolling: I thought I had the 'perfect' UX for this, and implemented it. I was quite happy with it. Then I did some further research, and noticed that another forum software (Discourse) bragged about having infinite scrolling, but it seems like it only does it for topic lists, not for topic pages, so they took the easy way out, I'd say... Unfortunately, from my countless experiences, and observation of other non-forum implementations, I can only say one thing: infinite scrolling is only possible if you have one of these two implementations: either an app setup using a customized JS framework like Backbone.js (which would force a forum system to rewrite its JS entirely), or a setup where you know *beforehand* what the contents of the post will be, and you can control it... Because if you can control it, then you can easily get away with incremental rewrites of your JS to apply to the new posts, and you're good. It is doable for Wedge, *even* for video embeds, but this is where the limitation is: we have no way to know what plugins will do to posts, and while it's unrealistic to expect many plugins to apply JS to a post (and if they do, the author might be aware of things to do to update for the infinite scroll's new posts), and thus it might break at any point, which is not good... :-/

So, two possible solutions, I'd say...

- Rewrite the current JS more thoroughly, to 'ensure' everything will work fine, and expect plugin authors to be aware of this.
- Give up on Ajax loading of new posts, and instead turn my infinite scroller into a generic helper function. This is my fallback idea, and it makes sense: detect 'Previous' and 'Next' links, and if the mouse wheel shows intent to go to Prev/Next, automatically follow these links, which would be applicable to *any* page with a pageindex, such as the topic lists, topic pages, member lists, etc...

I don't really see myself do *both*, but it's also doable, I guess...
To begin with -- what do you think of this fallback solution, is it any good to you..?
Quote
The thing is, using iframes and whatnot is really not the best way when you're dealing with individual posts.
I tried iframes as content holders... And I gave up. It sucks, in so many ways. Then I tried iframes as temporary content holders, until I can move their contents to the main page, and destroy the iframe. Problem is: while the events get copied properly, the event's targets stay in the iframe. e.g., if you click 'Delete' on a post, the confirm box shows up in the iframe, not in the main page...
That was a real bummer, for me...

Still, I'm counting on your insights, maybe you're less lost than I am, eh.. ;)
Title: Re: Infinite Scroll
Post by: Arantor on June 30th, 2013, 06:27 PM
Quote
Yes, but you may not 'notice' the new posts, though... In general, you'd want to be informed that there have been more posts.
When doing the callback for saving drafts, check if there's been new posts and if so, prompt the user just above the quick reply area, i.e. somewhere they'd probably notice while typing.

The fallback solution is a nice fallback but I can't immediately think of a reason why we can't do something more elegant. As a rule, I wouldn't be too worried about plugin authors doing totally crazy stuff. As long as they can extend the menus (which they would normally define in the first page load so it's always 'defined'), it should normally be sufficient. Plugin authors can suggest changes we can make - but ultimately they need to accommodate the code we make. It just means we generally need to write it once and get it right and they will just deal with it.

I don't have any ideas right now, but it's something I'm willing to look at when I get back.
Title: Re: Infinite Scroll
Post by: live627 on June 30th, 2013, 07:16 PM
Why would plugins be a problem? Theoretical guessing?
Title: Re: Infinite Scroll
Post by: Nao on July 1st, 2013, 04:30 PM
Okay, let's just say... You wrote a plugin that adds a bbcode. And that bbcode is related to a feature offered by an external service, and thus implements a script (add_js_file) that's located on another server. It's an example among plenty possible. It's very likely that it will break, in these conditions...

Unless I can get to do the iframe version, and then move the code, including events and scripts (and not re-running them), to the parent page, after it's finished loading. So far, I wasn't able to prevent alerts from being shown in the iframe, so...
Title: Re: Infinite Scroll
Post by: Dragooon on July 1st, 2013, 05:46 PM
Hook something?
Title: Re: Infinite Scroll
Post by: Arantor on July 1st, 2013, 08:12 PM
Which is a classic example of what I already mentioned, actually.

If you're using that bbcode to add to the editor, you're going to have done that on the first page already because the editor will already have been loaded for quick reply (or not at all if QR is off, but then you don't need it for the other load either)

If you're using that bbcode to add to the page itself, trying to defer like that is going to likely get you into a mess anyway for all kinds of fun and exciting reasons. I have actually done this in the past and it's a complete pain in the arse to do correctly, though it is possible.[1]

Anyway. You're preparing a payload for the user. Use XML, contain the post contents in XML + CDATA tags (one per post? one for the lot? I dunno) and also include a block for scripts that page should be loading. Then you can dynamically check which ones are already loaded and exclude them and just add script tags at that point for the ones that need it. Same sort of deal with style sheets really.

I still don't really like the idea of having an iframe. There is one scenario we will need to deal with - SMF for reasons I have never entirely understood, does not play properly inside an iframe, the session can get messed up. We will need to investigate and figure that out.
 1. Game Memorial does it, incidentally, since the image embedding via lightbox in articles is actually a bbcode I added, which only runs if the bbcode is used.
Title: Re: Infinite Scroll
Post by: godboko71 on July 4th, 2013, 12:02 AM
How do you use IS on iOS? I noticed somewhere in this or anther  thread that you said it worked on mobile.
Title: Re: Infinite Scroll
Post by: Nao on July 4th, 2013, 12:09 AM
Just swipe to the bottom of the page, then again a few times when you reach it...
Title: Re: Infinite Scroll
Post by: godboko71 on July 4th, 2013, 12:59 AM
Quote from Nao on July 4th, 2013, 12:09 AM
Just swipe to the bottom of the page, then again a few times when you reach it...
Doesn't seem to load the next page here on iOS 6.1.3 and safari... Edited to add tried weaving and wireless
Title: Re: Infinite Scroll
Post by: Nao on July 4th, 2013, 08:32 PM
Indeed, looks like it's no longer working...
This might be due to the sidebar stuff, I don't know... jQuery should be allowing me to accumulate multiple touchmove events, but if for any reason it only executes one, then there's your problem... :-/

Code: [Select]
Sorry, just testing something else... Can't bother to find another topic that has a code tag... Please bear with me...

(Hmm, looks like I can't reproduce the scrollbar bug today... Is this a bug fix in Chrome 30, maybe..?)
:edit: Nope, happened as soon as I quick-edited the post... Goes away if I happen to change any of the CSS properties, so it's not even fixable in a convenient way, arggg...
Title: Re: Infinite Scroll
Post by: godboko71 on July 5th, 2013, 01:04 AM
Well atleast I haven't lost my mind sorry holiday today so only partly here.
Title: Re: Infinite Scroll
Post by: Nao on August 1st, 2013, 05:26 PM
Quote from Nao on July 4th, 2013, 08:32 PM
(Hmm, looks like I can't reproduce the scrollbar bug today... Is this a bug fix in Chrome 30, maybe..?)
Nope, it's still there on new pageloads... It fixes itself if quick-editing the post in question, and some other situations, but... It's still quite annoying, really. The only clue I have, is that it's a Chrome-only bug, and it happens with overflow: auto inside a div that's using the flexible layout model. (Talk about an awfully buggy system, eh... And people say it's the future..? Okay, but fix it first, right..?)
Title: Re: Infinite Scroll
Post by: Arantor on August 1st, 2013, 05:43 PM
That scrollbar still can't be scrolled in Chrome 29 either.
Title: Re: Infinite Scroll
Post by: ChalkCat on August 22nd, 2013, 09:03 PM
I love the infinity scroll!  A couple of things I've noticed though:

In my Firefox 23.0.1, after the IS has kicked in and I'm scrolling through the second (or more) page in the topic, the whole display goes very jittery, the kind of effect you'd expect when the graphics card can't keep up with a game.  I disabled the browser's "smooth scrolling" option and the issue is resolved (other than making scrolling everywhere jerky - LOL)

Whilst confirming that disabling smooth scrolling stopped the jitteriness and scrolling through this very thread to see if anybody had already mentioned the jitter, I noticed the strange effect you see in the attached screenshot.  Only with replies #22 and #24 of this thread.  After scrolling through the whole thread I went back again and sure enough, with those two same posts, the same thing happened as the user box approached the top of the screen.  I could not recreate the effect with any other posts in this thread, but I haven't looked for it on any other threads.

(Ooh I like how you see a diddy-preview of attached image as soon as you attach it - cool!)
Title: Re: Infinite Scroll
Post by: Nao on September 28th, 2013, 09:45 PM
So... Infinite scrolling. We meet again.

I just wanted to say something about it.

Really, infinite scrolling is for *static content*. All websites that show infinite scrolling will only do it on items that they know are built in a way to 'accept' being nested into other pages and not corrupting them.

Earlier today, I noticed that the More button was broken in infinite-scrolling-loaded pages. I then realized it was broken by a small change in rev 2262 that fixed infinite scrolling on IE 11, or something... But broke many things everywhere else. So, back to the old code...
Unfortunately, it still doesn't execute some things correctly-- e.g. the code BBC hack for Chrome... And, I'm not exactly sure why.
It also tends to duplicate DOM objects that are modified by JavaScript. For instance, the board selector. I tend to fix these manually. Up until now, the quick edit button would be duplicated; it's no longer the case, but...

It's freaking annoying, knowing that in years from now, some people will just break their teeth on their plugin because it does some modifications to individual posts, and it doesn't play along with infinite scrolling.

I gave another try to the iframe-based version, but it's even worse, really... I should have kept a copy of the 'working' version I had before. Maybe it was fixable. I'm not so sure, right now... What I do know, though, is that it's unrealistic to use that right now.

So, I'm asking again... Guys, do you think the infinite scrolling feature is fantastic enough to guarantee that plugin authors will happily comply with its complicated rules..? Or should infinite scrolling simply, well... Redirect to the previous/next page through insistent mouse wheel scrolling? (i.e. if you scroll down for a second, instead of loading the next page via Ajax and showing it below the current page, it'll simply redirect you to the next page.)
That's the 'chicken' solution, but honestly... It also carries zero issues with it, and when I say zero, I do mean zero...
Title: Re: Infinite Scroll
Post by: Johnny54 on September 28th, 2013, 10:57 PM
Infinite scrolling looks real nice, but the difference between the present version and the one just loading the next page on further scrolling is visible for a second or so.
I am plugin author, but if even you the developer has problems making and keeping everything work correctly then to me that is a sign that it's probably best to ditch it.
Title: Re: Infinite Scroll
Post by: Aaron Smith on September 29th, 2013, 12:45 PM
I really like the idea of infinite scrolling, but it's not IMHO fantastic enough to spend this kind of time on it. I think if a simple redirect to the next page is doable with no issues then I'm content with this middle ground solution.
Title: Re: Infinite Scroll
Post by: Nao on September 29th, 2013, 05:09 PM
Quote from Johnny54 on September 28th, 2013, 10:57 PM
Infinite scrolling looks real nice, but the difference between the present version and the one just loading the next page on further scrolling is visible for a second or so.
What difference..? :huh:

Okay, regarding the use of an iframe. I should have remembered that... The problem with iframes is two-fold:
- if I just want to load the next page into an iframe and have it take the correct height etc, it'll still run its JavaScript inside of the frame, and thus, a popup animation will take place inside of it, not inside of the main page.
- if I want to 'import' the HTML from within the iframe towards the main page, the JavaScript will STILL execute within the iframe, or, if the iframe is removed consequently, it won't execute at all.

I tried to find a proper way to 'move' the scripts, but the current solution has been doing that, and it's what I wanted to avoid: any changes to the DOM affect the entire page, not just the new stuff...

And doing a trick such as overriding jQuery.fn.init to always add the new content's div as the 'context' variable doesn't seem to work. It didn't back when I first thought of it last month, and it still doesn't.

The big, big issue with infinite scrolling, is really that it's tailored to one of two situations:
- the new content is really, really simple, and we are 100% sure there's not (much) JavaScript in it; making it possible to just show it without dealing with JS...
- or on the contrary, it's very complicated, but the whole website is a 'web app' in style, that is, the HTML is only a placeholder to run Ajax queries, and show them after applying some magic to the results. For instance, Backbone.js allows for this kind of thing.

Wedge is not the former, and as for the latter, it would require passing all message-related functions to a single pass-through function that would then reapply its modifications on demand. Basically, while it's DOABLE, it's not realistic. It would put far too much pressure on plugin developers and themers, and I don't want that.

I'm considering, though, the possibility of keeping the current code but as a plugin; i.e., it's the responsibility of the webmaster to determine whether they want the cool effect, and whether they're ready to accept they'll have to disable some other plugins that may conflict with it.
Title: Re: Infinite Scroll
Post by: Suki on September 29th, 2013, 07:23 PM
I faced the same annoyances :( infinitescroll is nice and dandy but it is really a pain in the posterior.

I used the jquery plugin along with my custom pagination class, later and for performance, I changed my big fat query (I was loading every single message) for the SMF approach of using $start and LIMIT, turns out the jquery script was borked (because how it works vs how SMF works) so I have to code my very own version(https://github.com/MissAllSunday/Breeze/blob/develop/Themes/default/js/breeze_scroll.js) of it.

I couldn't get a fine and stable code for scrolling events, yes jQuery has .scroll() and I can get if the user has reached the bottom of a page, however, it was very unstable (if the user stays at the bottom the event gets fire constantly) so I decided to use a "load more" button.

Another issue was handling all the HTML, I had 2 options, sent the entire data plus HTML as a json object or just send the pure data and have all the HTML either created on-the-fly or as an empty shell on the template itself, I decided to just sent the already constructed HTML as a json object and then just use .append() on an empty <ul> created on-the-fly by jQuery.

I didn't want to have multiple template structures so I took the message HTML, isolated it on a  single function with all the data (content, poster, time, etc) passed as a param and thats the only template I use for every place where I show a message, it is a little hackish because in the same function I can either return the structured HTML or just print it, depending on where exactly I'm using that template function, my solution was to use a var and at the end simple decide what to do, return it or print it, not nice but it works.

I also faced the duplicate DOM elements, in my case it wasn't that much of an issue since I don't handle that many features and options, my solution was handling all JS events using jQuery(document).on() to differentiate between events I use the ID in the ID attribute so:

Code: [Select]
jQuery(document).on('submit', '.form_comment', function(event){

// The most important thing is... the ID
var StatusID = parseInt(jQuery(this).attr('id').replace('form_comment_', ''));

var comment = {
'commentStatus' : StatusID,
'commentOwner' : jQuery('#commentOwner_' + StatusID).val(),
'commentPoster' : jQuery('#commentPoster_' + StatusID).val(),
'commentStatusPoster' : jQuery('#commentStatusPoster_' + StatusID).val(),
'commentContent' : jQuery('#commentContent_' + StatusID).val(),
};

But I recon, the amount of DOM elements I manage is extremely low and this approach wouldn't work on handling forum messages.
Title: Re: Infinite Scroll
Post by: Nao on September 29th, 2013, 08:04 PM
Quote from Suki on September 29th, 2013, 07:23 PM
I faced the same annoyances :( infinitescroll is nice and dandy but it is really a pain in the posterior.
Glad to know I'm not alone... ;)
Quote
I used the jquery plugin
Which one..?
Quote
I couldn't get a fine and stable code for scrolling events, yes jQuery has .scroll() and I can get if the user has reached the bottom of a page, however, it was very unstable (if the user stays at the bottom the event gets fire constantly) so I decided to use a "load more" button.
Yes, it's better for accessibility. Although, as you may have noticed, Wedge does it differently: it only triggers on mouse wheels, and only starts counting mouse wheels after you reach the end of the page. It was a deliberate decision, to ensure that the user actually wants to see the next page.
I must admit, I'm a mouse wheel freak... I tend to roll it everywhere, including at the end of a page, so it was a no-brainer for me. The counterpart, though, is that I can't decide whether to use the system to just load the next page the 'regular' way, because the current solution at least allows me to keep reading the last post in the page, even if I'm wheeling a bit too much.
Quote
Another issue was handling all the HTML, I had 2 options, sent the entire data plus HTML as a json object or just send the pure data and have all the HTML either created on-the-fly or as an empty shell on the template itself, I decided to just sent the already constructed HTML as a json object and then just use .append() on an empty <ul> created on-the-fly by jQuery.
Did your data have any events attached to them..?
Quote
I didn't want to have multiple template structures so I took the message HTML, isolated it on a  single function with all the data (content, poster, time, etc) passed as a param and thats the only template I use for every place where I show a message, it is a little hackish because in the same function I can either return the structured HTML or just print it, depending on where exactly I'm using that template function, my solution was to use a var and at the end simple decide what to do, return it or print it, not nice but it works.
At this point, I'd be glad to have an ugly solution that just ensures developers can freely work around this infinite scrolling thing... :-/

I'm trying to figure out a 'different way', but it's hard. Something like, take all functions that knowingly modify messages (layout, contents...), and have them declare themselves to a special hook that will call them again when new posts are inserted. But I need to figure out a clean way to do that. And I don't even know if it's viable.

Either way, it probably won't be ready for v1.0... In fact, I'm likely to keep things as they are for now, because it 'mostly works', and I'll just fix my existing broken code (i.e. duplicate HTML.) I think that the face value of having this nice infinite scrolling effect is important for Wedge to gain some momentum among the SMF community, and if removed later and replaced with a plugin, it'll have less visibility and I'll be sad about it. (I DID spend a lot of time on this...)
Quote
I also faced the duplicate DOM elements, in my case it wasn't that much of an issue since I don't handle that many features and options, my solution was handling all JS events using jQuery(document).on() to differentiate between events I use the ID in the ID attribute so:
That's a good thing, but it's still something that should be kept to a minimum or to very specific events like the one in your example, because it does mean all events of the same type will bubble up the DOM, be caught by jQuery, which will determine if it was in the 'domain' it was watching, etc... Heck, I'm not exactly sure why the jQuery team replaced .live() with that. Maybe they wanted to make it harder to use the function, and thus encourage dropping it..?
Quote
But I recon, the amount of DOM elements I manage is extremely low and this approach wouldn't work on handling forum messages.
Oh, it might work, after all it's 2013, not 2004. Of course, IE6 won't like this... :P But it's only a matter of months before I definitely drop IE6 support anyway. Whatever, eh...
Title: Re: Infinite Scroll
Post by: Suki on September 29th, 2013, 10:21 PM
Quote from Nao on September 29th, 2013, 08:04 PM
Which one..?
The very same one that its named infinite scroll(http://www.infinite-scroll.com/) :P I tried others, most of them was built around custom needs so they wouldn't work for me anyway.
Quote from Nao on September 29th, 2013, 08:04 PM
Yes, it's better for accessibility. Although, as you may have noticed, Wedge does it differently: it only triggers on mouse wheels, and only starts counting mouse wheels after you reach the end of the page. It was a deliberate decision, to ensure that the user actually wants to see the next page.
I must admit, I'm a mouse wheel freak... I tend to roll it everywhere, including at the end of a page, so it was a no-brainer for me. The counterpart, though, is that I can't decide whether to use the system to just load the next page the 'regular' way, because the current solution at least allows me to keep reading the last post in the page, even if I'm wheeling a bit too much.
Thats an interesting approach, I'll give it a try :)  I also like the refresh one!
Quote from Nao on September 29th, 2013, 08:04 PM
Did your data have any events attached to them..?
Yes, if the message is a status, users can make a comment on it as well as deleting it, if the message was a comment, theres only the deletion part, thats all I have at the moment, I don't think I'll ever implement editing or even a comment of a comment (child comment) that would be a nightmare!
Quote from Nao on September 29th, 2013, 08:04 PM
At this point, I'd be glad to have an ugly solution that just ensures developers can freely work around this infinite scrolling thing... :-/

I'm trying to figure out a 'different way', but it's hard. Something like, take all functions that knowingly modify messages (layout, contents...), and have them declare themselves to a special hook that will call them again when new posts are inserted. But I need to figure out a clean way to do that. And I don't even know if it's viable.

Either way, it probably won't be ready for v1.0... In fact, I'm likely to keep things as they are for now, because it 'mostly works', and I'll just fix my existing broken code (i.e. duplicate HTML.) I think that the face value of having this nice infinite scrolling effect is important for Wedge to gain some momentum among the SMF community, and if removed later and replaced with a plugin, it'll have less visibility and I'll be sad about it. (I DID spend a lot of time on this...)
Yep, after taking a lot of approaches, suddenly ugly code doesn't seem so ugly anymore :P

Having a single template for messages sure is handy but it comes with its own set of issues, everything gotta be normalized, I'm (ab)using $context to show the poster data (it shows in a fancy lightbox) so before I show the data, I load all possible users IDs and pass them to an instantiated class that sets a $context array, then on the template I use $context['userData'][$userID]['avatar']  but since sometimes I call the template from another instantiated class, the whole global scope gets lose (I haven't really figure it out why exactly :( since I use Dependency Injection, I suspect it has something to do with it but I'm not sure) so I again do some nasty tricks to successfully keep $context in global scope .
Quote from Nao on September 29th, 2013, 08:04 PM
That's a good thing, but it's still something that should be kept to a minimum or to very specific events like the one in your example, because it does mean all events of the same type will bubble up the DOM, be caught by jQuery, which will determine if it was in the 'domain' it was watching, etc... Heck, I'm not exactly sure why the jQuery team replaced .live() with that. Maybe they wanted to make it harder to use the function, and thus encourage dropping it..?
Well, the number of events is an user option, they decide how many messages are showing per page, I'm sure they will chose something like 10 to 15.

I don't know how .live() used to work, from what I read, now its just a duplicate of .on() but I learned not to trust the first (or the most voted) answer I found on stackoverflow :P
Title: Re: Infinite Scroll
Post by: Nao on October 1st, 2013, 12:45 AM
Another day working on a potential infinite scrolling rewrite-- another failure. Yesterday, tried to do something with the Shadow DOM. Today, it was with createHTMLDocument(), and executing scripts in a parallel document. Yes, another failure... The new script tags still execute globally the moment the additional document is added to the main DOM. Ah, well. I thought I was onto something, really...!
Title: Re: Infinite Scroll
Post by: MultiformeIngegno on October 1st, 2013, 07:21 PM
Seems a nightmare :(
Title: Re: Infinite Scroll
Post by: Nao on October 1st, 2013, 11:38 PM
Got it working a bit better... Well, to be honest, right now on wedge.org, it's working perfectly fine. The updated version is pretty much the same... In fact, they both have the same limitation: if the new page has JS errors in it, it screw up everything. And since I'm doing half of my tests on a page that specifically has JS errors (a buggy video embedding, apparently), I consistently see THAT problem.

I think I've found a solution for the duplicate thingy, though, but mostly, it'll be down to the plugin authors to see to it that their code can execute twice without issues.
Title: Re: Infinite Scroll
Post by: Nao on October 3rd, 2013, 12:50 AM
Can't believe it, I actually fixed my test page with broken embeds and all that crap...!!

I started going into complicated stuff, for several DAYS of course, and then I fixed it all by reverting all of my changes, and doing a simple test.
I'd completely forgotten that swfobjects was hard to load from an Ajax page -- and ultimately, this is what an infinite scroller is; but internally, Wedge considers infinite scroll pages as 'normal' pages, so that it gets the proper rendering. That's a bit of a wrong thing to do, especially because in some places, infscroll needs the Ajax code path (e.g. embeds), and in others, it needs the non-Ajax code path. Very funny, really...
So, I just double-checked, and now all Flash embeds should properly work in infinite scroll pages, and thus NOT stop the new page from loading, and my friends, that is a frigging victory!

I also rewrote many things in the infscroll process, so that it sends MUCH less data per request; you can save up to 80% of the page data, if there's not much content in the next page. Otherwise, it's between 20% to 50%. Also executes a bit faster.

Tomorrow, I'm gonna give a try at pre-fetching the next page while marking the previous page (not the current page) as read, to ensure that one can safely stop reading through an infinitely scrolling page, and later come back through an Unread link, and find themselves on the page they were currently viewing at that point (i.e. last 15 posts in the infinite scroll page), which is cool. Well, I'm not very familiar with the markread code, so every little victory like this is good to me.

Phew... Then, it means I can keep the current implementation. And that it's going to become much more useful. :)
Title: Re: Infinite Scroll
Post by: MultiformeIngegno on October 3rd, 2013, 01:02 PM
I can't see the like button from my phone (Wireless theme) but I like this A LOT!! Compliments :-))
Title: Re: Infinite Scroll
Post by: Nao on October 3rd, 2013, 05:59 PM
It's not my local version, so I'm guessing you completely missed on this feature before, right..? ;)

Also, normally Wireless has a Like button, actually I'm in Wireless right now... :^^;:

Okay, today I've been rewriting it again, attempting to solve its main drawback, i.e. the sometimes long Ajax loading times. Instead of wheeling several times past the page end, I'm rewriting to adopt a more 'classic' method, i.e. prefetching the page while you're reading the posts, but with a trick to, hopefully, keep usability at its best:

- first of all, Wedge will determine if you've been scrolling past a certain point (3 pages before the end of the page).
- if yes, it'll prefetch the page. Mark the topic as read up to the post BEFORE the new page being prefetched. (Meaning, if you come back later through non-infinite scrolling, you'll be redirected to the last 'safe' page that we know you've been through, it's important to me...)
- then, it'll test whether you've attempted to scroll past the end. I'm no longer waiting for an extra wheel roll, because at this point, it's likely that the page is already in cache, so there's no reason not to show it. Also, I'm not showing it as soon as it's available to show, because I want to give users the opportunity to interact with the footer.
- if the page newly shown is the last in the topic, mark the topic as read.
- I'm considering showing a 'Click for more posts' banner at the bottom of the page when more posts are available to show; this would make it possible to show the next page without ever 'knowing' that you have to scroll past the end, I guess...

Unfortunately, it's not working right now, I'm having some difficulties, but I've been fighting difficulties all day, and I've made progress, so... Whatever!
Title: Re: Infinite Scroll
Post by: MultiformeIngegno on October 3rd, 2013, 06:30 PM
Oh I see the problem with the like icon, it's at the edge of the screen and you can't zoom out:h ttps://www.dropbox.com/s/n58twtqluflwmi7/Foto%2003-10-13%2018%2028%2058.png
Title: Re: Infinite Scroll
Post by: Nao on October 3rd, 2013, 09:05 PM
It's not Wireless...?!
Title: Re: Infinite Scroll
Post by: MultiformeIngegno on October 4th, 2013, 04:23 AM
I assumed I had Wireless set by default when I was browsing from mobile..
Title: Re: Infinite Scroll
Post by: Nao on October 4th, 2013, 07:29 AM
Unless you changed the skin manually.

Why didn't you ever report the bugs of a severely broken skin, otherwise? I assume you would have..?
Title: Re: Infinite Scroll
Post by: MultiformeIngegno on October 4th, 2013, 03:00 PM
Quote from Nao on October 4th, 2013, 07:29 AM
Unless you changed the skin manually.

Why didn't you ever report the bugs of a severely broken skin, otherwise? I assume you would have..?
It looked better some days ago!
Title: Re: Infinite Scroll
Post by: Nao on October 4th, 2013, 03:55 PM
Well, I'm just surprised you're getting that viewport size. In non-Wireless, normally it shouldn't adapt to your screen, it's got a set size.
Anyway, infinite scrolling is available in Wireless, so it shouldn't be a problem...

I've finally stabilized my local codebase for inf scrolling, BTW.

And it's super-cool now. :) Will try to commit soon, but I've got many changes to sort through, as often.
Title: Re: Infinite Scroll
Post by: MultiformeIngegno on October 4th, 2013, 04:37 PM
I checked in my settings and I have Wireless set!! :o
Title: Re: Infinite Scroll
Post by: Nao on October 4th, 2013, 07:52 PM
On what device..?
Title: Re: Infinite Scroll
Post by: MultiformeIngegno on October 4th, 2013, 08:48 PM
Quote from Nao on October 4th, 2013, 07:52 PM
On what device..?
iPhone, iOS 7
Title: Re: Infinite Scroll
Post by: Nao on October 4th, 2013, 11:55 PM
Would it be due to your upgrade to v7..?
Posted: October 4th, 2013, 10:13 PM

I'm sure it's the OS version. Definitely.
The difference is that iOS 7 Safari supports flexbox, so I enabled it by default for Safari 7, but... Well, if the result looks like this, their implementation is definitely buggy, I'd say...!

The one problem I have, is that I don't remember using flexbox in Wireless, but perhaps it's really, really fucked up.
Since flexbox works in IE 10, IE 11, Chrome and Firefox, I'm assuming I 'got it right', and iOS has to behave. If it doesn't, I'll have to disable flexbox on Safari, which I really wouldn't mind doing, since I have no interest in Safari at this point.

Anyway...

Anyone else with Safari 7 around..? I tried browserstacks and browsershots, but they only provide Safari 6 screenshots, argh...
Title: Re: Infinite Scroll
Post by: Nao on October 5th, 2013, 08:46 AM
Quote from Nao on October 3rd, 2013, 05:59 PM
It's not my local version, so I'm guessing you completely missed on this feature before, right..? ;)
Lol...
I re-read the early posts. Obviously I should have, before suggesting that... ;)
Title: Re: Infinite Scroll
Post by: Nao on October 5th, 2013, 01:15 PM
So... What do you guys think about the rewrite..? Like if you do! :P

From what I can see, it works better than the previous version, but it has one definitive drawback: it executes the new page in the background before showing it, and it 'stops' my page from scrolling for a second or so. I don't know if it will happen in any browser, this is what I'm getting on this very topic in Wireless on my Windows 7 rig under Chrome 30.
Title: Re: Infinite Scroll
Post by: Nao on October 5th, 2013, 04:42 PM
So, err... I think I've got it mostly right, this time...!
I did a test on the New Revs topic, which is just a lot of text, and it loaded the first 10 pages pretty much instantly. After 10 pages, though, it started getting a bit slower.
After 32 pages loaded, the page was really slow to load. At least, it wasn't slow to process, but it finished internal execution *after* I'd reached the bottom, and since the event is now only called on 'scroll', I can't just scroll down to show the page, since the event doesn't trigger at all. I could alternatively 'install' a temporary mouse wheel event when the end of the page is reached, and remove it later, but that sounds a bit awkward, I don't know... The point of the 'scroll' event is that you can still trigger the page prefetch by simply hitting the 'Page End' key on your keyboard, but then you have to use Up and Down arrows once to actually show the content.
Still, I don't like the idea of automatically showing available content as it becomes ready, because I want people to still be able to easily access the footer, and most importantly, the page index list (of course, they can do it by going to the top of the page, but it's rather inconvenient.)

Basically, we're in user experience land, here, and I'm not what I can, but... I guess I need *user* feedback, eh... ;)

I think the method I used in rev 2268 is pretty fine for 10 pages, but beyond that, I should instead specifically target the new posts, e.g. with a div ID as context.
I'm not sure it's for the best, though... I mean, 10 pages is a lot to read through, and beyond that, you may get lost. I'm thinking, *maybe* I could forcibly stop the infinite scrolling process after 10 pages, and invite the user to just press the Next link, and then they'll be free to start another session of 10 pages. I don't know, what do you think..? Or is it better to give absolute freedom, like now?
Title: Re: Infinite Scroll
Post by: MultiformeIngegno on October 5th, 2013, 09:02 PM
Seems to work fine! :)
Yeah maybe after 10 pages "block" the infinite scroll and target to new pages links...
Title: Re: Infinite Scroll
Post by: Pandos on October 5th, 2013, 09:07 PM
Yes, please make ist start new after 10 Pages.
We have several topics with more than 1700 pages+.  :whistle:
Title: Re: Infinite Scroll
Post by: Nao on October 7th, 2013, 02:33 PM
An interesting bug... Don't know if I can, or will, fix it.

- Change to Wireless, go to a topic.
- Open new tab, change to Weaving in it.
- Go to previous tab, go to bottom, trigger infinite scrolling.
- ???
- Profit.

I'll let you see the bug for yourself, because it's sort-of funny... These are the limits of per-skin custom HTML, I guess... :lol:
Title: Re: Infinite Scroll
Post by: Pandos on October 7th, 2013, 09:31 PM
Not a bug, it's a feature. It's called instant skin changer :lol: