In my RW/Stacks/Foundry site I am trying to build a page with complete screen size sections that you can scroll through section by section or, more accurately, screen-size section by screen-size section, a.k.a. ‘full page scrolling’.
I tried doing so with the Sections app, part of Foundry’s very own Potion Pack, and that looks beautiful on mid-sized and large screens, but ran into the problem that I have too much content for small screens while for understandable technical reasons this stack does not allow hiding the content for those same small screens.
Does anybody know about a stack, add-on, or trick, that could help me build a full page scrolling page in RW/Stacks/Foundry?
As a semi aside, I did some snooping around and the only thing stack I found is actually called Full Page Scrolling, developed by Cosculture, but I have a sneaking suspicion that this does not work with Foundry. This for the simple reason that the one comment left by a user states that it does not work with Foundation, giving me the idea that it may only work with no-theme RW sites. But not sure about this at all. I did just email Cosculture, but would love anybody’s input who has experience with this stack.
I guess my first question is: what do you want to happen when there is too much content to fit on a screen? Should a stack split your content into multiple “screens”? How should it decide to break the content? Should it hide some of the content? How should it decide what to hide? I think you’ll be unhappy with a lot of how it splits/hides content on the wide variety of screen sizes.
You may want to think about simplifying what content is displayed on small devices and use a Visibility stack to hide the non-essential content, so that your content still fits on a screen. Include a link to provide more information on that “sections” content.
My idea would be to hide the ‘total page scrolling’ stack/content on mobile devices and use a more common (non-total page scrolling) set of stacks for mobile only.
I would not want to deal with a stack, or a rule, to decide for me when/where to break the content. Does that answer your question?
Lastly, I do not know what a visibility stack is. I can guess, but I have never worked with it.
When I asked @Elixir - Foundry’s developer - about building a one page site with Sections, here’s what he said:
"That said… Personally I would build an anchor based site using Mega Menu and the Anchor stacks instead of using Sections. You’re likely to end up there after working with Sections anyway I think. Sections is for VERY limited amounts of content, which always seems to end up being too limiting for the vast majority of users.
If you need tips of using Mega Menu for such a site, let me know!"
Joe workman’s Screens stack does this nicely and even offers horizontal scrolling. One could imagine on content heavy pages using vertical scroll to the main full page, them scrolling horizontally for other content (just an idea…not knowing your exact requirements). Don’t have foundry so not sure how joes stack would behave in that framework…but I assume it would work.
While I haven’t done it specifically, I feel like one could achieve this with big white duck’s sections pro set of stacks, combined with link anchors to full page sections. Sections pro also offers great responsive controls so one could easily set up different behaviors for desktop, tablet, and mobile. Might be worth a look?
The goal is to hide content within the sections to limit the amount of content at the mobile breakpoint, as I mentioned in my last email correspondence with you today. For hiding content inside of sections the Visibility stack would be a good option. You were trying to hide the whole of the Sections stack, which isn’t doable.
Screens: I emailed Joe to check if Screens also works with Foundry and if I can hide the stack for smaller screen sizes.
Sections Pro + Anchors: Sounds very interesting. I already downloaded Sections Pro. However, I would not know how to build ‘full page scrolling’ with Sections Pro + Anchors. I guess the main issue is that I do not know which Sections Pro settings I would use to get full browser screen sections, and to what size/dimensions to set them. Any idea?
Thank you Adam, I understand. The problem is that hiding content within the sections would not work in this case, as I am working with Question & Answer sections here and I cannot hide any part of that.
Hi Jim,
No worries on the questions that’s what this forum is for . The anchors are just links set to each section. I know one can easily create full page sections (or any percentage of the browser screen for that matter) in Sections Pro, and easily set the links for each section. Then a button would be necessary to move/scroll to the next section. So essentially a link is set at the top of each section pro section, each section pro section is set to 100% v height (i.e. fill the screen), when one clicks on a button (let’s say it says “next”) the page scrolls to the next sections pro section (which again as the other sections fill the browser window).
After hearing that your working in a question and answer type of interface, ate you trying to create a form like environment where one answers questions and is taken to the next question? Like https://www.typeform.com/ for example? If so there is a stack (who’s name escapes me at the moment) that recreates the typform approach very well.
You wrote: “I know one can easily create full page sections (or any percentage of the browser screen for that matter) in Sections Pro”.
How exactly do you do that?
No, I am not trying to set up a form like environment. It’s just a Q&A based on the questions our customers have been asking us over the past few weeks.
Hi Jim,
Drag in a Sections Pro stack, as your main container for your page and place whatever other stacks/content you have within that Sections Pro stack. Then in the Sections Pro settings find Section - Flexible Height (see settings in the attached pic), essentially you set the section height to proportional and 100% of browser height. For the links scroll down a bit in your Sections Pro settings and find Section - Markers. Click Add Magellan Marker and name that marker as you wish. One can then set a link on a button as #yourlinkname. In the case of my attached pic my button link would be #reviews. If I recall there might be an additional step/trick to ensure that button link smooth scrolls (vs jump scrolls) to your Magellan Marker links. Can’t recall it off top of my head but if issues arise perhaps the community here can help. Anyway, not entirely sure this will fit your use case but it’s worth a look. Best of luck.
If one wants four sections on their page they would have four Sections Pro stacks on their page each with the associated section content and the settings above. Essentially giving one four full page sections for their page. Hope that makes sense?
Thank you Dan, I tried this and worked fine on the fist two sections, but the third section, which has much less content, it did not make the section ‘browser height’…
Unless you or somebody else can point out what I am doing wrong here, I think for this page I am just going to go with different section heights.
For future use, I will continue looking for a stack that really does allow for ‘full page scrolling’, works with Foundry AND can be hid for mobile screen sizes. I emailed Joe Workman to ask him if his Screens stack does all that, but I did not get an answer yet. But I am sure he will reply soon and I shall let you know what he said.
Awesome great work. As for that last section I suspect something has to be off settings wise, as you’ve discovered there are quite a few settings in the sections pro stack. If you haven’t done so already…delete that last section (the one not working) and duplicate (copy and past) one of the other sections that work. See if at that point all sections act as they should.
. The anchors are just links set to each section. I know one can easily create full page sections (or any percentage of the browser screen for that matter) in Sections Pro, and easily set the links for each section. Then a button would be necessary to move/scroll to the next section. So essentially a link is set at the top of each section pro section, each section pro section is set to 100% v height (i.e. fill the screen), when one clicks on a button (let’s say it says “next”) the page scrolls to the next sections pro section (which again as the other sections fill the browser window).
