Building partnerships through collaboration.
A scrollable component useful for creating visually interesting and interactive timelines.
This component requires some knowledge of HTML. The code is annotated, but proceeding without experience may result in errors. To learn more about HTML, CSS and Javascript, visit W3Schools.
Last Updated: 12/18/2024
The HTML Snippet is where the majority of the component resides. It contains the HTML code which, in turn, contains the CSS styles, HTML elements and scripts.
| Property | Value |
|---|---|
| Open the default code in Box. | |
| Property | Value |
|---|---|
| Description | unchanged |
| HTML Filter | Off |
| Component Handle | Show (default) |
To make basic edits to this component, only knowledge of HTML is needed. More advanced edits can be made by changing the stylesheet which requires knowledge of CSS.
Initially, the default component provides four phases with generic names and placeholder text. The component should have at least two phases and has no maximum.
Each phase contains one block of HTML which contains four total elements:
<a href="#" alt="">
<div class="Pending">
<h2>Phase One</h2>
<p>Completed</p>
</div>
</a>
| Element Tag | Additional Properties | Description |
|---|---|---|
| <div id="timeline-component"> | none | Acts as a wrapper for the component so the HTML Snippet only changes itself. |
| <a href="#" alt=""> | href | Where clicking on the phase should link to. See Writing and Adding Links for best practices. |
| alt | Provide a short, detailed description of where the link goes. | |
| <div class="completed"> | class | The class determines the appearance of the phase. There are three appearances available: pending, in-progress and completed. |
| <h2>Phase One</h2> | none | Should contain the phase name. |
| <p>Completed</p> | none | Should contain either the phase status, phase description or the time frame of the phase (i.e. December 2024 to April 2025). |
To add more phases, copy-paste and edit the phase HTML elements. Each phase begins with <a> and ends with <a>. There is no maximum number of phases, though it's recommended not to exceed 10.
To remove a phase, delete that phase's HTML elements. Each phase begins with <a> and ends with <a>. The other phases should automatically collapse to avoid leaving a white space.
Making advanced edits may cause the component to break. Use caution and only edit these sections if experienced with CSS and Javascript.
The width of the phase component is dynamic but has a default minimum width of 200px. To change the minimum width, change the min-width property of the #timeline-component a div on line 72 to the desired width. If the change is not visible, the text within the elements is too long since the element resizes to fit the text.
The default statuses and colors for the timeline component are after line 88. To add a status, add a new class like #timeline-component status-name, add properties for background-color and color, and change their values as desired. Note: background-color defines the color of the element's background and color defines the color of the text.
These classes can then be referenced in lieu of the existing ones in the HTML element of the phases.
To change the color of the existing statuses, navigate to line 88 in the HTML Snippet. The background-color and color of #timeline-component .completed, #timeline-component .in-progress and #timeline-component .pending can be changed to new colors as desired.
Colors must follow UB brand guidelines and be accessible.
To remove the linking capability of the phases, remove the href and alt attributes from the opening <a> and change the <a></a> to <div></div>
For example:
<a href="#" alt=""> <!-- Change <a> to <div> and remove the attributes. -->
<div class="completed">
<h2>Phase One</h2>
<p>Completed</p>
</div>
</a> <!-- Change </a> to </div>. -->
Becomes:
<div>
<div class="completed">
<h2>Phase One</h2>
<p>Completed</p>
</div>
</div>
The amount the timeline is scrolled can be forced to make sure the correct phase is in view. By default, the component is set to scroll until the first pending phase is in view.
To change the scrolling behavior of the component, scroll to line 167:
const scrollToElement = timelineComponent.getElementsByClassName("pending")[0];
Changing .getElementsByClassName("pending") will change the class the script looks for and changing [0] will change which instance of that class will be scrolled to. For example:
const scrollToElement = timelineComponent.getElementsByClassName("in-progress")[0];
This scrolls the component to the first element with the in-progress class.
const scrollToElement = timelineComponent.getElementsByClassName("completed")[2];
This scrolls the component to the third element with the completed class.
Javascript arrays are zero-indexed. The first item is [0], the second [1] and so on.