hansv Posted November 8, 2016 Share Posted November 8, 2016 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? Link to comment Share on other sites More sharing options...
kongondo Posted November 8, 2016 Share Posted November 8, 2016 Moved topic to Dev Talk as it is not, strictly speaking, a ProcessWire question. Link to comment Share on other sites More sharing options...
fbg13 Posted November 8, 2016 Share Posted November 8, 2016 http://stackoverflow.com/questions/32395988/highlight-menu-item-when-scrolling-down-to-section Link to comment Share on other sites More sharing options...
hansv Posted November 9, 2016 Author Share Posted November 9, 2016 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 Link to comment Share on other sites More sharing options...
fbg13 Posted November 9, 2016 Share Posted November 9, 2016 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. Link to comment Share on other sites More sharing options...
hansv Posted November 10, 2016 Author Share Posted November 10, 2016 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. Link to comment Share on other sites More sharing options...
Robin S Posted November 10, 2016 Share Posted November 10, 2016 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/ 4 Link to comment Share on other sites More sharing options...
hansv Posted November 16, 2016 Author Share Posted November 16, 2016 @Robin S Thx for showing me the right direction, I used http://projects.jga.me/toc/ Link to comment Share on other sites More sharing options...
Recommended Posts