Scrolling sidebar

[hansv]

Ryan has opened my eyes with his skyscrapers2-demo.  Uikit is really a fantastic frontend-framework.  My question is about  scrolling uikit-side-nav and the pw-code to use for the content.

Is it possible to realize a scrolling nav-side-bar as the uikit-layout-example: https://getuikit.com/docs/layouts_documentation.html ?  The scrolling-bar should show the headers for example h3 en h2 of the body-part of the page When scrolling down the page, the headers in the sidebar, e.g. h3 h2, show where you are in the page.

Can anyone show me the way to the code to trigger e.g. the h3 and h2 headers?

[kongondo]

Moved topic to Dev Talk as it is not, strictly speaking,  a ProcessWire question.

[fbg13]

http://stackoverflow.com/questions/32395988/highlight-menu-item-when-scrolling-down-to-section

[hansv]

Thx Kongondo & fbg13 for your replies.  I think this is a pure PW-question, the integration of uikit is a side-issue. 

I can rephrase the question in different ways

• how can I make an index of page-content?
• how can I find all subtitles and paragraph titles in a page and show them together as a summary

[fbg13]

Don't quite understand what you mean.

Do you have a textarea (page-content) field that has multiple <h2>, <h3> tags and you want to have a navigation for them?

If i got it right please mention if this tags are always the same.

[hansv]

Maybe it's better to visualize

In the body-field of a page there is content.   

1 Lorem with H3-tag

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit sapien, pulvinar sit amet mi nec, consequat rhoncus nunc. Cras est urna, finibus ut elementum elementum, tincidunt id enim.

1.1 Lorem with H2-tag

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit sapien, pulvinar sit amet mi nec, consequat rhoncus nunc. Cras est urna, finibus ut elementum elementum, tincidunt id enim.

1.2 Lorem with H2-tag

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit sapien, pulvinar sit amet mi nec, consequat rhoncus nunc. Cras est urna, finibus ut elementum elementum, tincidunt id enim.

2 Lorem with H3-tag

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit sapien, pulvinar sit amet mi nec, consequat rhoncus nunc. Cras est urna, finibus ut elementum elementum, tincidunt id enim.

3 Lorem with H3-tag

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit sapien, pulvinar sit amet mi nec, consequat rhoncus nunc. Cras est urna, finibus ut elementum elementum, tincidunt id enim.

 

In e.g. a sidebar (see below), the headers (h2, h3, may also h4) are generated, and when scrolling down the page-content (body-field),  you scroll down to the headers in the sidebar.   The tags are always, h2, h3 and h4

1 Lorem with H3-tag

1.1 Lorem with H3-tag    

1.2 Lorem with H3-tag    

2 Lorem with H3-tag

3 Lorem with H3-tag

I try to find a way to generate the headers of the page-body-field and show them in a side-bar-panel.  This is PW-related, the scrolling down part is for the front-end framework, e.g. Uikit.  

In the cheatsheet of PW  I find way's to refer to page-fields (title, summary, body, ..) but I try to find a way to recognize specific html-content (headers, h2 -> h4) within the body-field.

 

[Robin S]

1 hour ago, hansv said:

I try to find a way to generate the headers of the page-body-field and show them in a side-bar-panel.

I think the easiest way to do this is with Javascript/jQuery.

Not too hard to write a script for this from scratch (that's what I've done in the past) but Google reveals a nice looking plugin that does it all for you: http://renaysha.me/anchorific-js/

[hansv]

@Robin S

Thx for showing me the right direction, I used http://projects.jga.me/toc/