Multiple pages shown as one single long page

For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
Post Reply
User avatar
caigner
Forum Members
Forum Members
Posts: 46
Joined: Sun Aug 16, 2020 5:29 am

Multiple pages shown as one single long page

Post by caigner »

How can I produce a layout like on the following web page in CMSMS?

https://library.elementor.com/landing-page-wedding/

Obviously multiple pages are shown right after each other by scrolling down.

How can multiple content pages be added together to form one single scrolling page?
I am using CMSms 2.2.19
User avatar
Rolf
Dev Team Member
Dev Team Member
Posts: 7825
Joined: Wed Apr 23, 2008 7:53 am
Location: The Netherlands
Contact:

Re: Multiple pages shown as one single long page

Post by Rolf »

- + - + - + - + - + - + -
LATEST TUTORIAL AT CMS CAN BE SIMPLE:
Migrating Company Directory module to LISE
- + - + - + - + - + - + -
Image
User avatar
DIGI3
Dev Team Member
Dev Team Member
Posts: 1609
Joined: Wed Feb 25, 2009 4:25 am
Location: Victoria, BC

Re: Multiple pages shown as one single long page

Post by DIGI3 »

I use Navigator to build the page divs and anchors, then jQuery to populate and, optionally, lazy load them:

Navigator template for building the divs:

Code: Select all

{if isset($nodes)}
  {foreach $nodes as $node}
    <span id="anchor-{$node->alias}" class="anchor"></span>
    <div id="{$node->alias}">
      {* content will be loaded here by jQuery *}
    </div>
  {/foreach}
{/if}
Then another one for building the script:

Code: Select all

{if isset($nodes)}
  {foreach $nodes as $node}
    $( "#{$node->alias}" ).load( "{$node->url}" );
  {/foreach}
{/if}
Call the first one with a Navigator tag excluding the current page, and loadprops=0, where the content should go, and the second one the same way in <__script__> tags after jQuery is loaded. The content pages should either have a blank template that just contains {content} and any layout html needed, or you'll need to add ?showtemplate=false to the url called with .load()

You can then get fancier by adding lazy loading, navigation links, etc. The Eat (free) and Eat Pro themes on easythemes.ca use the above, the paid version having lazy load.
Not getting the answer you need? CMSMS support options
User avatar
caigner
Forum Members
Forum Members
Posts: 46
Joined: Sun Aug 16, 2020 5:29 am

Re: Multiple pages shown as one single long page

Post by caigner »

Thanks for your answers. Seems to be heavy stuff. At least a lot of what I read sounds quite alien to me. I will give it a try. Let's see how far I get.
I am using CMSms 2.2.19
Post Reply

Return to “Layout and Design (CSS & HTML)”