Jump to content
jaggermeister

Using Scrollspy with sections (Like the sections demo)

Recommended Posts

jaggermeister    0
jaggermeister

Ok, so I've been jacking with this scrollspy for a while now... first adding content to the "appropriate" area... the content section. Works great, looks like shit.

I'd like my own services page to replicate the look of the PageLines "sections" demo page, with the scrollspy scrolling to the different sections being shown.

I've added my own box sets, and messed around with the html side of the content box in each individual box to try and get results with no dice. I've read twice now that the scrollspy was not designed to do what I'm asking for, however, the PageLines demo page clearly uses this functionality... something i'm sure many users were expecting to be able to replicate because it was demonstrated on the demo.

If I could get some personal help getting this set up I'd spend the time to get a proper walkthrough up outlining how to get this functionality working on customers' sites.

*Even downloading the dat file and sample content on a separate installation of WordPress did not yield the same results as the "official" demo page. The scrollspy on the separate installation was not "active" - meaning the default "how-to enable" instructions were being shown, and not the nav links to sections as they shouldve been.

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Hi,

The way the demo was done was like this:

Basically on one of your templates in Drag & Drop, you need to have the following setup:

Content Box - Use the Scroll Spy HTML to target this area and call it Boxes

Section ~ Boxes

Content Box - Use the Scroll Spy HTML to target this area and call it Banners

Section ~ Banners

Content Box - Use the Scroll Spy HTML to target this area and call it Highlight

Section ~ Highlight

And so on...


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
dobynsbc    0
dobynsbc

Hi,

The way the demo was done was like this:

Basically on one of your templates in Drag & Drop, you need to have the following setup:

Content Box - Use the Scroll Spy HTML to target this area and call it Boxes

Section ~ Boxes

Content Box - Use the Scroll Spy HTML to target this area and call it Banners

Section ~ Banners

Content Box - Use the Scroll Spy HTML to target this area and call it Highlight

Section ~ Highlight

And so on...

 

Thanks, this answers a lot of questions! I've worked out just about every issue for what I'm trying to accomplish, but I can't muddle through the exact syntax that I need to use in the  Content Box "Class" and "Content" to trigger Scroll Spy. Could you clarify?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Similar Content

    • oseehys
      By oseehys+
      Hello There,
      So i want to use platform 5 and DMS sections on a single page, i am using a child theme with pinspro as my main theme and i activated platform 5, the only problem am having so far is the fixed option, my navbars are not aligning to their default size, and it will be great if platform 5 header and footer section will function, has anyone used this option, how can i make the best use of platform 5 and DMS on a site
      Cheers
    • yemoonyah
      By yemoonyah+
      Hi,
      I tried to make a simple change on my opt-in page today by reordering two sections.
      Now they won't save and whatever I do, the same 2 section will be stuck to the top.
      This is a huge problem since it is my opt-in page!
      http://yemoonyah.com/quiz
      (I'm on the latest WP & PL version)
      Thanks.
       
    • Anthony King
      By Anthony King+
      I have to say that I like the Layout and the Template based sections. Some of them are really impressive.
      One of the things that I would like to request though is the possibility of being able to dynamically rearrange the layout.
      An example of what I am talking about is take the Agency Section. It's current layout starts with the
      Splash Module then the Portfolio Module then the Service Module and so on and so forth.
      What would be great is if we were able to move these modules around. I.e have the Service Module first
      then maybe the Splash, and then the portfolio.
       
    • nandorj78
      By nandorj78+
      This discussion has appeared today on the Facebook User Group and we decided to have a vote to know what the users judge more important.
      Let me know which questions you want me to add to the poll.
    • Audun MB
      By Audun MB+
      Just for reference if someone else needs to do this. 
      The Sitemap footer doesn't support nested menus, which makes it kind of pointless. Who doesn't have a nested site structure? Anyway, this allows for more finegrained control over the footer, while keeping the nice look. 
      Anyway, I liked the style of the sitemap, so I recreated it with sections. Here's the setup.

      Add one main container. Too allow for styling, give this the additional class "footer". Add a text section with the two social buttons shortcodes ( [pl_facebook_like] [pl_twitter_follow] ), place it to the left (and left align the text). Add another for the copyright/privacy text (right align the text). 6 columns for each text section, and font size should be around 80%.
      Add another container, place it above the two text sections. Give it the class "footer-border", and add a transparent bottom border to that class (see CSS below).
      Add a widget section with the three menus (you probably need a custom sidebar, I'm using the Custom Sidebar plugin). Next to it add a container again. In this container add a text section for your adress (left-align text), and a Social links section. Give the social links section the class "footer-social", left-align the text, set padding to 0.0 and set font size to 150%. Somehow the social links section escapes the opacity I set for the rest of the footer and shows as much darker, so used the custom class to adjust that to make it look nice.  Below is my full CSS/LESS for footer-styling (I prefer menu items to be normal text color instead of link color, but wanted the mailto link in my linkcolor (@linkcolor is defined at the top of my Custom LESS/CSS, you need to define it as well or just ignore that part of the styling). 
      /*footer styling*/ .footer{ opacity: .95; a { color: inherit; } a:hover{ color: inherit; text-decoration: none; font-weight: bold; } a[href^="mailto"]{ color: @linkcolor; } .footer-social{ opacity: 0.5; } .footer-border { border-bottom: solid 1px rgba(0,0,0,0.2); } } This is what it looks like:
       
       
×