Jump to content


Photo
- - - - -

Scroll Spy with Content Section

bootstrap scrollspy demo

Best Answer ellenmva , 25 January 2013 - 11:19 PM

First you need to install the section ContentBox -- it is different from the Content Section.  In the Pagelines Store it is under Free Sections.  Once installed it will show up in the Drag & Drop Area.  Drag it into the Active Sections, click on Options and clone it.  When you go to your page and down to Pagelines Meta Options you will see your ContentBox sections and you can add the HTML code there.

 

Screenshot_1_25_13_6_16_PM-2.png

 

Hope that explains it a bit better.

Go to the full post


  • Please log in to reply
10 replies to this topic

#1 thomasr

thomasr

    Newbie

  • Members
  • 7 posts
  • Country: Country Flag

Posted 25 January 2013 - 06:08 PM

On the sections demo page found here (

Please Login or Register to see this Hidden Content

) there is scroll spy enabled that moves down each section. 

 

When I downloaded and installed the demo content the sections were all setup (masthead, banners, boxes, etc) but scroll spy doesn't move between those sections. 

 

The issue scroll spy needs both a class and title attribute. However I don't think I can add that to sections. 

 

I can add some HTML to the content, but that is one block only, not interspersed throughout the page. 

 

The demo page seems to be setup like this 

 

[Sroll Spy]

[HTML with scroll spy classes and title for boxes]

[Boxes]

[HTML with scroll spy classes and title for banners]

[Banners]

[HTML with scroll spy classes and title for masthead]

[Masthead]

 

I can only figure out how to do the following:

[Sroll Spy]

[HTML with scroll spy classes and title for boxes]

[Boxes]

[Banners]

[Masthead] 

 

How do I get the ability to inject raw html between the sections in a template? Attached is a screenshot on how it looks on my development site. 

 

Attached Files



#2 Jenny

Jenny

    Advocate

  • Unicorn Store Dev

  • 2924 posts
  • LocationWV
  • Country: Country Flag

Posted 25 January 2013 - 07:17 PM

This isn't something I've messed around with yet but have you tried adding the HTML for scroll spy at the top of each section? In other words, don't expect to add html in between sections but rather in the top of each section. Hope that makes sense. :)



#3 ellenmva

ellenmva

    Advocate

  • Members

  • 290 posts
  • LocationMassachusetts
  • Country: Country Flag

Posted 25 January 2013 - 07:30 PM

Use the section ContentBox and put one in between each section with the html for the scroll spy. You can clone ContentBox so that you can use more than one instance on a template.



#4 thomasr

thomasr

    Newbie

  • Members
  • 7 posts
  • Country: Country Flag

Posted 25 January 2013 - 10:57 PM

Ellenmva,

 

Can you give me a screenshot of what you are referring to? Because I don't undertand. In the "Drag and Drop" section I don't see the ability to clone content. How would that even work since it pulls the content from the wordpress editor. 

 

Jenny: I don't understand; how would you add HTML before a section of boxes like in the demo.pagelines.com/sections/ ?



#5 ellenmva

ellenmva

    Advocate

  • Members

  • 290 posts
  • LocationMassachusetts
  • Country: Country Flag

Posted 25 January 2013 - 11:19 PM   Best Answer

First you need to install the section ContentBox -- it is different from the Content Section.  In the Pagelines Store it is under Free Sections.  Once installed it will show up in the Drag & Drop Area.  Drag it into the Active Sections, click on Options and clone it.  When you go to your page and down to Pagelines Meta Options you will see your ContentBox sections and you can add the HTML code there.

 

Screenshot_1_25_13_6_16_PM-2.png

 

Hope that explains it a bit better.



#6 thomasr

thomasr

    Newbie

  • Members
  • 7 posts
  • Country: Country Flag

Posted 26 January 2013 - 09:53 PM

Ellenmva: That is exactly what I needed. And I got it to work. Thanks so much for your help. 



#7 ellenmva

ellenmva

    Advocate

  • Members

  • 290 posts
  • LocationMassachusetts
  • Country: Country Flag

Posted 26 January 2013 - 10:05 PM

Super!  ContentBox is a nice little section that helps in these kinds of situations. 



#8 tindel

tindel

    Member

  • Members
  • 21 posts
  • Country: Country Flag

Posted 24 March 2013 - 04:18 AM

i am almost following this.  just started with the scoll spy. when you say add the "scroll spy html" to the content box.. i am not sure if i am following correctly what that means... what does that look like.  I have gotten the scroll spy to scroll on one page (johntindel.com) like documentatino does on scroll spy, but I want it to be able to scroll to sections on the page that may have the blog in that section, or a gallery or my boxes? can this be done? All I can tell is that I can only scroll on the content area?   and if anyone has a good hint of what I am missing,,, much appreciated.

 

Got to wrap my head around the scroll spy.



#9 Danny

Danny

    Is Awesome!

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

Posted 24 March 2013 - 10:50 AM

Hi,

I recommend you review our Scroll Spy documentation for the Scroll Spy html.

 

Please Login or Register to see this Hidden Content

 

Unfortunately, the Scroll spy uses HTML to know where to scroll, therefore you're unable to scroll to sections. That is why Ellen suggested the ContentBox above.



#10 tindel

tindel

    Member

  • Members
  • 21 posts
  • Country: Country Flag

Posted 29 March 2013 - 02:22 PM

Thanks,

I guess I am confused as to what to exactly put into the content box to call the scroll spy?  I understand that the content box is used for the location to scroll to, just not sure exactly what to put into it.  I think it is something easy, just confused on that a little.



#11 tindel

tindel

    Member

  • Members
  • 21 posts
  • Country: Country Flag

Posted 29 March 2013 - 02:55 PM

i think I might have figured it out.  Can you in turn pull any section (ie. blog) into a content box?







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