[Pro] Infinite Scroll

macsterdam1 · July 4, 2011, 9:14am

I would like to use Infinite Scroll on my site, can this be done in Freeway?

Here’s an example of what I mean: http://aurgasm.us/ (scroll to the end of the page, and a new page is automatically loaded beneath it.)

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

waltd · July 4, 2011, 4:21pm

This is actually pretty simple to do using Prototype/Scriptaculous. (Please note: heavy JavaScript geekery ahead – there are no easy Action-ized methods for doing this, and you have to do some methodical prep work for it to happen at all.)

###Prep work
There is one basic requirement that you have to observe, no matter how you are performing this trick: all content that you plan to load into the page after the initial page load must be page fragments, not entire pages. If you load a complete valid HTML page into another valid HTML page, then they will both become invalid, and further JavaScript manipulation of the combination will become iffy at best.

The first thing to start with is your extra content. If it’s the result of a search, or some other server-side process like that, then you need to figure out how that process is paging its results, and what you need to modify about that query to tell the server to send the next set of results. If it’s just static content, then you need to know all the URLs to the content ahead of time, and your main page needs to know both what has loaded so far and what is next.

###Static pages
Let’s take the simplest possible route to an endless scroll. First, lay out your main page. Make note of the width of your endless element, you’ll need it later. Also, you are strongly recommended to create an inline layout (sometimes referred to by Dan Jasker as a “box model” layout – see http://freewaycast.com for links to one or more screencasts on the topic) because otherwise your page footer will be overlapped by the content you are loading in.

Next, make a new Master page, and set its width to the same dimension as your main content element on your first page. Apply the PHP Make Insert Page Action to the master page. This will strip off the HTML, head, and body tags from the generated code, leaving only the content of the body behind. Pro tip: make sure “Use external stylesheets” is turned on in your Document Setup dialog.

Now make each of your latter pages, taking care when naming them to follow a pattern you can remember, or simply writing down their filenames (not the titles, which won’t show up anyway) for future geekery.

###Loading indicators
Now, back at your starting page, double-click inside your main HTML element, and use the main menu command “Insert/HTML item” to create the loading indicator. This will insert initially as a 100px square. Let’s style it up: first visit http://www.ajaxload.info/ and create a nice loading image. Now set that as the background image of your inline HTML box. Set the background position to center, center, no-repeat. All of this is done using the background segment of the Style tab on the Inspector while the box is selected (handles showing). Now stretch the box out to full width, so it completely fills the main HTML box from left to right. Set its height to just tall enough to show the animated background.

Next, click once on the loading indicator HTML box so its handles are showing and open the Item / Extended dialog. Click the New button, and enter the following Name/Value pair:

Name: data-load
Value: filename_of_next_page.html

Obviously, change that filename to match the first filename from your list of latter pages. Okay the dialog, then press New again. Enter this pair of Name/Value:

Name: class
Value: loading

Okay out of the teetering stack of sub-sub-sub dialog boxes, and copy the loading indicator box to the clipboard. Now double-click above or below the loading indicator so you have a flashing text cursor, and paste as many times as you have additional latter pages. Click once on each duplicate loading indicator, and use the Item/Extended dialog stack to change the filename to match each of the pages in your list. You should end up with one loading indicator for each page you wish to load, inserted at the bottom of your main HTML box in the order you expect them to appear.

###The Geekery, as promised
Now apply Protaculous to the page, and set the Library picker to prototype-packed. Click once on the top Function Body button, and paste in the following code:

gist.github.com

https://gist.github.com/walterdavis/1063549

gistfile1.js

Element.addMethods({
  showMe: function(element){
    var element = $(element);
    var top = document.viewport.getScrollOffsets()["top"];
    var bottom = document.viewport.getHeight() + top;
    var elementTop = element.cumulativeOffset()["top"];
    var elementBottom = elementTop + element.getHeight();
    if((elementTop <= bottom) && (elementBottom >= top)) {
      var path = element.readAttribute("data-load");
      if(path){

This file has been truncated. show original

Now publish your site, and preview in a browser. (This might work in Freeway’s Preview, but most likely will not.)

If you see the error message instead of your requested content after you scroll to the bottom of your first page, look carefully at it to see what the URL is it’s trying to load, and make sure that the file is named precisely that and exists alongside your main page in the site folder. If it doesn’t, then you have to figure out why.

Post a link to your page when you’re done, so we can revel in your handiwork!

Walter

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

macsterdam1 · July 4, 2011, 4:30pm

As a comic-strip figure in a very popular 1960’s TV series used to say: ‘Holy hole in the donut Batman…’. Once again I’m in awe of your knowledge, Walter.

Thanks very very much for your quick and very detailed reply. I hope I can get it to work, and if I do, I will post it here.

Thanks again!

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

macsterdam1 · July 4, 2011, 7:38pm

Hello again,

Just created a few dummy pages to see if I could get it to work, but no unfortunately.
I printed you instructions, and as far as I can tell, did exactly as you described, but nothing happens.

The main URL is: http://prime-pixels.nl/walter/ and the four html items that should load are on http://prime-pixels.nl/walter/continous01 (continous02, continous03, continous04).

Any suggestion as to what I may have done wrong?

Agin, thanks for all the help!

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

waltd · July 4, 2011, 8:11pm

Looks like you got a little bit too much of the Gist in your markup
window. This part:

view raw
gistfile1.js
This Gist brought to you by GitHub.

Should be taken out.

It also looks like your layout isn’t inline, because the first photo
is appearing on top of the others, rather than pushing them down the
page. So you have to draw a large HTML box, then put your first
content inside that box, and then below that put all of your loading
divs. All of these elements have to be together, inline, within the
element that will receive them.

Walter

On Jul 4, 2011, at 3:38 PM, macsterdam wrote:

Hello again,

Just created a few dummy pages to see if I could get it to work, but
no unfortunately.
I printed you instructions, and as far as I can tell, did exactly as
you described, but nothing happens.

The main URL is: http://prime-pixels.nl/walter/ and the four html
items that should load are on http://prime-pixels.nl/walter/continous01
(continous02, continous03, continous04).

Any suggestion as to what I may have done wrong?

Agin, thanks for all the help!

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

macsterdam1 · July 4, 2011, 8:44pm

thanks again for the quick help.

I see where I went wrong with the script, and have corrected that. Same goes for the inline error, I think, but still no go unfortunately. Would you mind having a quick look again? Thanks.

main url: http://prime-pixels.nl/walter/. loading items are on pages 1, 2, 3, 4: http://prime-pixels.nl/walter/1

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

waltd · July 4, 2011, 9:49pm

Yes, looks like you did everything right. I have to go out now to a
party, but I’ll take a look at this tomorrow morning. It’s probably
something simple. No errors, so it’s hard to say what.

Walter

On Jul 4, 2011, at 4:44 PM, macsterdam wrote:

thanks again for the quick help.

I see where I went wrong with the script, and have corrected that.
Same goes for the inline error, I think, but still no go
unfortunately. Would you mind having a quick look again? Thanks.

main url: http://prime-pixels.nl/walter/. loading items are on pages
1, 2, 3, 4: http://prime-pixels.nl/walter/1

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

waltd · July 5, 2011, 12:56pm

I just updated the Gist, so if you’re looking at this on the Web, just refresh the page in Freewaytalk to see the updated code. This should replace everything in your Function Body editor in Protaculous.

Walter

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

waltd · July 5, 2011, 1:18pm

Oh, and one other thing – make sure the value of data-load precisely matches the filename of the page you’re trying to load into its place. I noticed that your URLs were 1.html, 2.html – the URLs to the actual pages, that is. But the data-load attribute was set to c1.html, c2.html, etc.

Walter

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

macsterdam1 · July 5, 2011, 4:05pm

Hi Walter, once again thank you for all your wonderful help.

Meanwhile I’ve applied the new version of the script, but although now something now happen, it’s still not quite right.

With regards to your last remark, I tried various things, including referring to both pages and individual divs, but as nothing worked, I left the last version uploaded, hence the incorrect settings probably.

Right now the the data-load setting is linked to the individual html pages, such as 1.html etc, and what happens is this:

I open the page http://prime-pixels.nl/walter/, and immediately it goes from index.html to 1.html, and then nothing.
When I resize the browser window, however, page 4.html is loaded.

Any ideas? Thanks!

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

waltd · July 5, 2011, 4:19pm

This technique is best suited to a page that has individual “pages” of
content taller than the browser window. I have it coded to do the
following:

At initial page load, see if there is room to show the first extra
page, and if so, load it. At this point, there are two ‘pages’ worth
of content on the screen, and hopefully there is a vertical scrollbar.
If the page is either scrolled or resized at this point, the next
‘page’ is loaded.
So on, until you run out of extra pages.

If you want to use this technique for smaller content (and enormous
screens), then you could modify the script slightly. Try changing line
25 in the Gist to read thus:

$$('div.loading').invoke('hide').invoke('showMe').first().show();

(I recommend you click on the link to the Gist if you’re viewing this
in the FreewayTalk Web interface, since I don’t think you get the line
numbers unless you’re on the full Gist site. Plus, I just made another
tiny change to support this new syntax, so you’ll want to get the very
latest version. Once you get there, clicking the ‘raw’ link will give
you a copy-and-paste-friendly view of just the text of the functions.)

Walter

On Jul 5, 2011, at 12:05 PM, macsterdam wrote:

Hi Walter, once again thank you for all your wonderful help.

Meanwhile I’ve applied the new version of the script, but although
now something now happen, it’s still not quite right.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

macsterdam1 · July 5, 2011, 4:27pm

ah, that explains it, thanks a lot. I’m going to put together a new test-document, with taller pages this time. Will let you know how things go!

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

macsterdam1 · July 5, 2011, 6:00pm

made a new version (same link), and although it does more than my previous efforts, it’s still not quite right. I think I can figure it out from here, though.

One last question, if you don’t mind.
The example-link in my first post, loads the extra content beneath the main page, something that doesn’t happen when building according to the information you provided. Is that due to an error on my behalf, or isn’t that supposed to happen anyway?

Once again, that very much for all your time and effort, Walter. Very much appreciated!

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

waltd · July 5, 2011, 6:13pm

It looks to me as though that page is loading everything into a single
div, which just gets taller as you go. That’s the same layout
mechanism I had you do. What’s not clear to me though is whether this
page actually loads ahead, or if it waits for you to scroll the bottom
into view before loading the next batch of content. If it does load
ahead, you could simply chain the effect to load each element one
right after the next, by removing the test for “is this element in
view or not” within the showMe function. If that’s what you’re after,
then I question why you want to do that rather than just load
everything in one page. I mean, it’s an interesting look to be sure,
but it’s not really serving any purpose to the user if it doesn’t
respond to the user’s actions.

I’ve most usually seen this interface metaphor used in news sites, or
catalogue pages, where you have read most of a “page” full of content
(maybe the more relevant search results) and then you get to the
bottom of the list, which means you haven’t found what you were
looking for yet. At that point, the page wakes up and gets you the
next batch of results so you can keep on looking without clicking on a
paging control. Think of this as a drop-in replacement for the sort of
links you see in some sites:

< … 9 10 11 12 13 … >

Walter

On Jul 5, 2011, at 2:00 PM, macsterdam wrote:

made a new version (same link), and although it does more than my
previous efforts, it’s still not quite right. I think I can figure
it out from here, though.

One last question, if you don’t mind.
The example-link in my first post, loads the extra content beneath
the main page, something that doesn’t happen when building according
to the information you provided. Is that due to an error on my
behalf, or isn’t that supposed to happen anyway?

Once again, that very much for all your time and effort, Walter.
Very much appreciated!

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

macsterdam1 · July 14, 2011, 11:22am

Sorry for the late reply.

You’re right about loading everything in one page, but I do feel that this page-loading effect does give the page a more dynamic feel, especially on an iPad (or similar)

Thanks again for all the help - I learned a whole lot!

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

luke1 · August 27, 2013, 7:53am

Hi

I’ve been trying with little success to recreate the inline scrolling functionality after the 10th image on this page…

http://lukecarterwilton.com/aecombayview.html

the loading gif doesn’t appear once the extended dialogue values are assigned & the page loads the entirety of the data ie all 20 images rather than 10 + 10 as desired.

Also I see that using the PHP action strips away the formatting of the images so that I can’t control layout, is there a way to recover this control?

Thanks in advance

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

waltd · August 27, 2013, 2:05pm

On Aug 27, 2013, at 3:53 AM, luke wrote:

Hi

I’ve been trying with little success to recreate the inline scrolling functionality after the 10th image on this page…

http://lukecarterwilton.com/aecombayview.html

the loading gif doesn’t appear once the extended dialogue values are assigned & the page loads the entirety of the data ie all 20 images rather than 10 + 10 as desired.

Also I see that using the PHP action strips away the formatting of the images so that I can’t control layout, is there a way to recover this control?

Note this warning from long ago in this thread:

Next, make a new Master page, and set its width to the same dimension as your main content element on your first page. Apply the PHP Make Insert Page Action to the master page. This will strip off the HTML, head, and body tags from the generated code, leaving only the content of the body behind. Pro tip: make sure “Use external stylesheets” is turned on in your Document Setup dialog.

This advice would work perfectly in Freeway 5.6 and lower, because all of the style information was inlined in the HTML, and the external stylesheet only carried the font styling. In Freeway 6 and greater, each page gets its own external stylesheet, so you won’t get the object styling if you do follow this suggestion. In Freeway 6, I would instead suggest that you turn off external stylesheets in Freeway, and in the PHP Make Insert Page Action, enable the Preserve HEAD Content checkbox. This will inline the style block and any script blocks into your page fragment.

Walter

Thanks in advance

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

luke1 · August 27, 2013, 3:04pm

thanks Walter,

still not working I’m afraid

I’ve left the old link as is & created a new set of pages to reflect your suggestion here

http://lukecarterwilton.com/aecombayview3.html

and it looks the same. I can live with the loss of formatting as I can pad the images to reflect the look of the rest of the site but I can’t seem to get the effect of the ‘infinite scroll’ loader to work, because on load the page still loads all 20 images from the outset, rather than the initial 10 in the first html document then the following 10 of the next html document when I scroll down to the loading graphic.

L

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

luke1 · August 28, 2013, 3:38am

not really what I intended, but its functional… Thanks for the code Walter.

http://lukecarterwilton.com/aecombayview.html

L

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

jgalicia · September 13, 2013, 1:05am

hello walter, i try to do this but i cant… do yo have some example file for this ?
thanks so much.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options