This CommonSpot Widget, Scroll Spy, renders a jump menu with auto-generated from the H2 and H3 html tags found in the page content. This widget is built as a container render handler so the ScrollSpy jump menu is added to the page in a responsive column next to the content placed in the container.
This widget comes with a Custom Render Handler for the CommonSpot Container Standard Element and a Custom Metadata Form. The Metadata Form is bound to the Render Handler and is used to offer the widget specific configuration options.
With several options, like selecting Scroll Spy’s Scroll and Affix Offsets, setting the Link, Active and Hover colors, selecting the menu position as well as setting two column Grid proportions for Large, Medium, Small and X-Small devices, this widget can be configured to display to fit your needs.
For developers, the configurable Widget Options, the Custom Render Handler file and the included Cascading Style Sheet and JavaScript files can be customized fit your specific display scenario.
The Scroll Spy Widget offers the following configurable properties via the Custom Metadata Form bound to the standard element Custom Render Handler:
Scroll Spy Options (tab)
- Enable Menu - yes or no
- Fixed Menu Top - The number of pixels for the top fixed position of the Jump Menu.
- Affix Offset - The number of pixels used to calculate the Jump Menu's fixed position.
- Scroll Offset - The number of pixels to offset from the top when calculating the position of scroll.
Text & Link Properties (tab)
- Title Text - Title that renders above the Jump Menu
- Title Style
- Tag - p, div, h1, h2, h3, h4, h5
- Align - left, center, right or inherit
- Font Settings
- Bold
- Italic
- Underline
- Initial Case
- Title Case
- Upper Case
- Lower Case
- Color - many color options including 'not set'
- Menu Links Style
- Font Settings
- Bold
- Italic
- Underline
- Initial Case
- Title Case
- Upper Case
- Lower Case
- Link Color - many options including 'not set'
- Hover Color - many options including 'not set'
- Active Color - many options including 'not set'
- Font Settings
Scroll Spy Layout (tab)
- Menu Position - right or left - Place the Jump Menu on the Right or the left of the Page.
- Columns For Device - Responsive design options include various percentages and hidden
- Small Phone
- Phone
- Tablet
- Desktop
- Large Desktop
- The size options for each column type are: hidden, 50%/50%, 66%/33%, 75%/25%, 83%/17%, 92%/8%
CommonSpot Standard Elements:
Layout Elements:
- Container
Required Custom Elements
Metadata Form:
-
CSW Scroll Spy
Custom Render Handler:
- CSW Scroll Spy Container
The ScrollSpy Navigation Widget has the following downloadable components:
- Standard Container Element
- Metadata Form
- Generic Render Handler
Because this widget's render handler is written as a “generic" Render Handler you use your own existing Container Element.
To use the standard Container Element, do the following:
- Download the master import packet
- Import the supporting custom elements, metadata form and custom render handler
- Confirm the Metadata Form is bound to the Render Handler. The import should bind the render handler automatically.
For detailed information on how to import the various components, please see Importing Widgets.