Jump to content


Photo
- - - - -

Using Scrollspy with sections (Like the sections demo)

scrollspy sections demo tutorial

  • Please log in to reply
3 replies to this topic

#1 jaggermeister

jaggermeister

    Newbie

  • Members
  • 1 posts
  • LocationKansas City, Missouri
  • Country: Country Flag

Posted 15 October 2012 - 03:17 AM

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.

#2 Danny

Danny

    Is Awesome!

  • Moderators
  • 16982 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 15 October 2012 - 08:22 AM

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...

#3 dobynsbc

dobynsbc

    Newbie

  • Members
  • 4 posts
  • Country: Country Flag

Posted 13 December 2012 - 07:55 AM

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?



#4 Danny

Danny

    Is Awesome!

  • Moderators
  • 16982 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 13 December 2012 - 08:49 AM

Please take a look at our documentation - 

Please Login or Register to see this Hidden Content







Also tagged with one or more of these keywords: scrollspy, sections, demo, tutorial