Jump to:

3444 Posts in 1030 Topics by 871 members

Template Questions

SilverStripe Forums » Template Questions » Jquery One Page scrolling site

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

Page: 1
Go to End
Author Topic: 1775 Views
  • tee 1977
    Avatar
    Community Member
    6 Posts

    Jquery One Page scrolling site Link to this post

    Hi

    i'm trying to implement a jquery powered one page website into silverstripe, i have a static website that uses this but would really like to get this working as a cms editable site.

    Basically im stumped with getting the menu to work because it's made up of anchor links that animate up the relevent section. i've looked at using redirector urls and this works but really want to show the relevent link as active when on a section.

    below is how the menu would be set up if on a static html website:

    <ul id="navigation">
             <li><a class="active" href="#home">Home</a></li>
             <li><a href="#about">About</a></li>
             <li><a href="#portfolio">Portfolio</a></li>
             <li><a href="#blog">Blog</a></li>
             <li><a href="#contact">Contact</a></li>
          </ul>

    I really hope someone can help me with this, it would be great to get this type of site working within silverstripe.

    Thanks

    Tamara

  • monk
    Avatar
    Community Member
    5 Posts

    Re: Jquery One Page scrolling site Link to this post

    Assuming you create your page sections as separate pages in the backend, one way you could build your navigation is

    <ul id="navigation">
    <% control Menu(1) %>
    <li><a href="#{$URLSegment}">$Title</a></li>
    <% end_control %>
    </ul>

    and then display your page content by looping again through all pages and outputting them sequentially like this:

    <div id="content">
    <% control Menu(1) %>
    <div id="$URLSegment">
    $Content
    </div>
    <% end_control %>
    </div>

    1775 Views
Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.