Transforming UB’s digital communications.
On This Page Component
Table of contents built dynamically from page headings.
On this page:
Last reviewed: May 20, 2022
Overview
On This Page automatically displays all title headings on a page as anchor links in a list. Clicking on an item in the list jumps you down to that content on the same page.
This component can be placed in the center well, in a Related Content Container, or a sidebar.
Using This Component
Add the component to the page. There is only one tab.
When the component is placed on a regular Web page in Author, and the page is refreshed, the index will show all matching headings on the page. On a shared content page, it will just state "There are no links to display in this On This Page component." but when that shared content is displayed on a regular webpage, the index will be populated normally.
- Some components (e.g. Title) have a setting to be excluded from On This Page lists.
Technical Restrictions
None.
Configure - Main Settings
Click the wrench icon to 'configure' these settings.
The component opened for editing.
Header: Enter a descriptive heading. The default is "On This Page:". Leave blank to hide the heading.
Heading level: Choose from 1 to 4; the default is 2.
- If you choose Custom, more choices are provided — see Advanced Use.
Item Range: Specify if you wish to only show some of the page's titles (e.g. 1-3 or 4-6). This is especially useful in column mode.
Home pages and single-column pages need custom settings
On This Page is designed to display headings from the center column of a standard page. To work on a home page or a single column page, use the Custom Filters option: "#center-nocols h2". Read more about Custom Filters in the Advanced Use section.
Does Your Page Use Shared Content?
Links to headings that are actually within Shared Content will not work correctly unless they are given an ID on each Title component in the Shared Content page.
Link back to top of the page
Advanced Use - Customize the List
The component opened for editing showing custom Heading Level option (e.g. "#center h2").
- Choose Heading Level: Custom to switch on Custom Filters. Then enter a valid jQuery selector expression.
- Some examples follow:
- "#center-nocols h2" includes level 2 headings from the main content on a home page.
- "#center h2" limits your list to level 2 headings found in the DIV element with an ID of "center" (i.e. the center well).
- "#right h2" limits your list to level 2 headings found in the DIV element with an ID of "right" (i.e. the right sidebar).
- "#left h2" limits your list to level 2 headings found in the DIV element with an ID of "left" (i.e. the left nav sidebar).
- "#right h2" limits your list to level 2 headings found in the DIV element with an ID of "right" (i.e. the right sidebar).
- "#center h2, #right h2" includes level 2 headings from the center well AND the right sidebar.
- ".collapsible h3" includes all level 3 headings from all Collapsible Content Containers anywhere on the page.
- "h3[id^=abc]" includes all level 3 headings from one Collapsible Content Container with the ID of 'abc'.
- Title and Collapsible Content Container components can be excluded from the On This Page listing by selecting the checkbox within the settings of those individual components.