History: Simple vertical timeline
Source of version: 16 (current)
Copy to clipboard
! {{page}}
~tc~ - - - - - - - - - - - - - - - - Documentation source - - - - - - - - - - - - - - - - ~/tc~
{DIV(class="lead")}Timelines are useful for presenting chronological information in a way that's easy to understand. Timelines come in horizontal and vertical varieties, and can have nifty animated presentations and so on. The timeline described and demonstrated on this page, though, is a simple one that presents events, each with a date, title, and content, along a vertical axis that also contains markers that separate the events into periods of time.{DIV}
The data for this timeline implementation is stored in a tracker, and two wiki pages are used to create the display of the information - a page that is the template for each event, and the page for the final display. PluginList can also be used but this demo uses the legacy Trackerlist method. This timeline uses HTML and CSS based on an example at https://codepen.io/brady_wright/pen/NNOvrW .
No JavaScript is used, and the CSS for the timeline is in the wiki text in this demo, although it could be provided in the other ways that Tiki supports, such as the theme stylesheet, a custom.css stylesheet, or as custom CSS entered on the Look and Feel admin page.
!! The tracker and its fields
The tracker has five fields: __Time period__ (type: text field), __Event title__ (text field), __Event date__ (date and time - date picker), __Event content__ (text area), and __Timeline item container class__ (text field).
{img src="display1438" link="display1438" width="600" rel="box[g]" imalign="center" desc="Click to expand" align="center" styleimage="border" title="Tracker fields - Simple vertical timeline demo" alt="screenshot"}
The __Time period__ field is to hold the label for the sections of the timeline, which may be months, years, geological periods, historical eras, or whatever is appropriate for the content.
{img src="display1437" link="display1437" width="600" rel="box[g]" imalign="center" desc="Click to expand" align="center" styleimage="border" title="Time period trackerfield properties" alt="screenshot"}
This field isn't filled out for every timeline event - only for the one that is first (closest to the top) in each time period. For example, if the time period is 2017, then a December event will be closer to the top (so closer to the time period label) than a July event, so "2017" would be in put in the "Time period" field for the December event.
The __Event title__ is a text field that contains simply the name of the event or timeline item.
The __Event date__ field is a Date and Time (Date picker) type. In this demo, there is no need to record hours and minutes, so the option is set to only record the date. Of course if hours and minutes are significant in the timeline, then these should be enabled as a field option, and the field probably should be called "Event time".
__Event content__ is the field that contains the text information, images and so on for the event. Like other Tiki text areas, this one can use wiki syntax or HTML if enabled, and can use all activated wiki plugins and so on. It could event contain simply an Include plugin and draw all of its content from a wiki page. Generally speaking, though, timeline event descriptions are fairly short and simple.
__Timeline item container class__ is the last field in this tracker, and it is used to style an event's information through the use of a CSS class that is defined in the theme stylesheet or on the Look & Feel page's custom CSS section. For example, in Tiki 13 through 18, the alert or error message boxes use these classes: ''alert-info, alert-danger, alert-warning, alert-success'' (see what these look like on [https://themes.tiki.org/Sample-Page#Alerts]).
The tracker itself has these properties that need to be set:
{img src="display1440" link="display1440" width="400" rel="box[g]" imalign="center" desc="Click to expand" align="center" styleimage="border" title="Timeline tracker properties" alt="screenshot"}
{img src="display1439" link="display1439" width="400" rel="box[g]" imalign="center" desc="Click to expand" align="center" styleimage="border" title="Timeline tracker properties" alt="screenshot"}
The ''Template to display an item'' is specified as "wiki:Simple_vertical_timeline_TPL", and the ''Default sort order'' based on "Event date" (this option will be displayed along with the other field names after the fields are created), with the ''Default sort direction'' "descending".
!! The template page (Simple_vertical_timeline_TPL)
As mentioned, this timeline uses a wiki page tracker template, ((Simple_vertical_timeline_TPL)), and its name is input in "Template to display an item", appended by "wiki:" to indicate that a wiki page is being used. The template contains the HTML list item ( -+ <li> +- ) syntax that is used for each event in the timeline. Tracker field ID variables are used that will be replaced with the various information for each event, for each record in the tracker, when the page loads.
(Tracker field ID numbers are incremented automatically by each Tiki installation, so the numbers in other timeline implementations will be different from the numbers used in this demo.)
After this template page is made, a permission needs to be assigned so it can be used as a tracker template. Click the "More" button at the left side of the page bar's row of buttons, and "Permissions" will display in the "dropup" list. Click "Permissions" and the perms page for this wiki page (titled "Assign permissions to wiki page: Simple_vertical_timeline_TPL") will display. Go to the ''Wiki'' section and, for Anonymous users, check the checkbox "Can use the page as a template for a tracker or unified search (tiki_p_use_as_template)". Then click the "Assign" button at the top or bottom of the page.
The wiki template page has this content:
{CODE()}{HTML(wiki="1")}{if$f_207!=""}
<li class="timeline-itemperiod">
<div class="timeline-info"></div>
<div class="timeline-marker"></div>
<div class="timeline-content"><h2class="timeline-title">{$f_207}</h2></div>
</li>
{/if}
<li class="timeline-item">
<div class="timeline-info"><span>{$f_209}</span></div>
<div class="timeline-marker"></div>
<div class="timeline-content{$f_211}"><h3class="timeline-title">{$f_208}</h3>{$f_210}</div>
</li>
{HTML}{CODE}
With white space removed, the page content looks like this:
{CODE()} {HTML(wiki="1")} {if $f_207 != ""}<li class="timeline-item period"><div class="timeline-info"></div><div class="timeline-marker"></div><div class="timeline-content"><h2 class="timeline-title">{$f_207}</h2></div></li>{/if}<li class="timeline-item"><div class="timeline-info"><span>{$f_209}</span></div><div class="timeline-marker"></div><div class="timeline-content {$f_211}"><h3 class="timeline-title">{$f_208}</h3>{$f_210}</div></li>{HTML}{CODE}
In this demo, there were unwanted break tags caused by new lines in the template page because, in the HTML plugin, "wiki='1'" is used in order to enable the tracker field tags, which are wiki syntax, to work. Removing all the new lines (carriage returns) prevents the unwanted break tags, but does make the code harder to read. For complex pages of this type, it's good practice to have a properly formatted original to work with, and a no-new-lines version to use that doesn't have unwanted display artifacts ( -+ <br> +- tags).
!! The display page (Simple Vertical Timeline)
The timeline is an HTML unordered list, and the page that displays the timeline has the HTML to create the list except for the HTML for the items of the list, which the TPL page supplies, and a trackerlist plugin that indicates which tracker and fields to access for each event. The page source looks like this:
{CODE()}{HTML(wiki="1")}<ul class="rawlinks timeline timeline-centered">{trackerlist trackerId="19" fields="207:208:209:210:211" wiki="Simple_vertical_timeline_TPL" /}</ul>{HTML}{CODE}
The "rawlinks" class is special to tiki.org sites, to prevent the "project site" popup label that appears for links to other tiki.org subdomains but that can cause content, especially images, to jump around on hover. For other websites, the "rawlinks" class isn't needed.
This wiki page also contains the CSS to style the list. (HTML5 permits CSS for the page to be in the body of the page, so it's fine to put it in wiki pages.)
!!+ Here is the CSS used to create and style the timeline:
{CODE()}
/*- - - - - - - - - - - - - - - - - - - - - - - -
GENERAL STYLES
- - - - - - - - - - - - - - - - - - - - - - - -*/
.timeline {
/* line-height: 1.4em; */
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
/* .timeline h1, .timeline h2, .timeline h3, .timeline h4, .timeline h5, .timeline h6 {
line-height: inherit;
} */
/* - - - TIMELINE ITEM - - - */
.timeline-item {
padding-left: 40px;
position: relative;
}
/* For this implementation */
.timeline-item + br,
.timeline-item + br + br {
display: none;
}
.timeline-item:last-child {
padding-bottom: 0;
}
/* - - - TIMELINE INFO - - - */
.timeline-info {
font-size: /*12px*/ 1em;
font-weight: 700;
letter-spacing: 3px;
margin: 0 0 .5em 0;
text-transform: uppercase;
white-space: nowrap;
}
/* - - - TIMELINE MARKER - - - */
.timeline-marker {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 15px;
}
.timeline-marker:before {
background: #FF6B6B;
border: 3px solid transparent;
border-radius: 100%;
content: "";
display: block;
height: 15px;
position: absolute;
top: 4px;
left: 0;
width: 15px;
transition: background 0.3s ease-in-out, border 0.3s ease-in-out;
}
.timeline-marker:after {
content: "";
width: 3px;
background: #CCD5DB;
display: block;
position: absolute;
top: 24px;
bottom: 0;
left: 6px;
}
.timeline-item:last-child .timeline-marker:after {
content: none;
}
.timeline-item:not(.period):hover .timeline-marker:before {
background: transparent;
border: 3px solid #FF6B6B;
}
/* - - - TIMELINE CONTENT - - - */
.timeline-content {
padding-bottom: 40px;
}
.timeline-content p:last-child {
margin-bottom: 0;
}
/* - - - TIMELINE PERIOD - - - */
.period {
padding: 0;
}
.period .timeline-info {
display: none;
}
.period .timeline-marker:before {
background: transparent;
content: "";
width: 15px;
height: auto;
border: none;
border-radius: 0;
top: 0;
bottom: 30px;
position: absolute;
border-top: 3px solid #CCD5DB;
border-bottom: 3px solid #CCD5DB;
}
.period .timeline-marker:after {
content: "";
height: 32px;
top: auto;
}
.period .timeline-content {
padding: 40px 0 70px;
}
.period .timeline-title {
margin: 0;
}
/*- - - - - - - - - - - - - - - - - - - - - - - -
MOD: TIMELINE CENTERED
- - - - - - - - - - - - - - - - - - - - - - - -*/
@media (min-width: 992px) {
.timeline-centered,
.timeline-centered .timeline-item,
.timeline-centered .timeline-info,
.timeline-centered .timeline-marker,
.timeline-centered .timeline-content {
display: block;
margin: 0;
padding: 0;
}
.timeline-centered .timeline-item {
padding-bottom: 40px;
overflow: hidden;
}
.timeline-centered .timeline-marker {
position: absolute;
left: 50%;
margin-left: -7.5px;
}
.timeline-centered .timeline-info,
.timeline-centered .timeline-content {
width: 50%;
}
.timeline-centered > .timeline-item:nth-child(odd) .timeline-info {
float: left;
text-align: right;
padding-right: 30px;
}
.timeline-centered > .timeline-item:nth-child(odd) .timeline-content {
float: right;
text-align: left;
padding-left: 30px;
}
.timeline-centered > .timeline-item:nth-child(even) .timeline-info {
float: right;
text-align: left;
padding-left: 30px;
}
.timeline-centered > .timeline-item:nth-child(even) .timeline-content {
float: left;
/* text-align: right; */
padding-right: 30px;
}
.timeline-centered > .timeline-item:nth-child(even) h3.timeline-title {
text-align: right;
}
.timeline-centered > .timeline-item.period .timeline-content {
float: none;
padding: 0;
width: 100%;
text-align: center;
}
.timeline-centered .timeline-item.period {
padding: 50px 0 90px;
}
.timeline-centered .period .timeline-marker:after {
height: 30px;
bottom: 0;
top: auto;
}
.timeline-centered .period .timeline-title {
left: auto;
}
}
/*- - - - - - - - - - - - - - - - - - - - - - - -
MOD: MARKER OUTLINE
- - - - - - - - - - - - - - - - - - - - - - - -*/
.marker-outline .timeline-marker:before {
background: transparent;
border-color: #FF6B6B;
}
.marker-outline .timeline-item:hover .timeline-marker:before {
background: #FF6B6B; }
{CODE}
!! The timeline
And here is the finished timeline. If there are any questions or comments, please post in the [https://tiki.org/forum4|tiki.org forums].
~tc~ - - - - - - - - - - - - - - - - - - - Timeline source - - - - - - - - - - - - - - - - - - ~/tc~
{HTML()}<style>
/*- - - - - - - - - - - - - - - - - - - - - - - -
GENERAL STYLES
- - - - - - - - - - - - - - - - - - - - - - - -*/
.timeline {
/* line-height: 1.4em; */
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
/* .timeline h1, .timeline h2, .timeline h3, .timeline h4, .timeline h5, .timeline h6 {
line-height: inherit;
} */
/* - - - TIMELINE ITEM - - - */
.timeline-item {
padding-left: 40px;
position: relative;
}
/* For this implementation */
.timeline-item + br,
.timeline-item + br + br {
display: none;
}
.timeline-item:last-child {
padding-bottom: 0;
}
/* - - - TIMELINE INFO - - - */
.timeline-info {
font-size: /*12px*/ 1em;
font-weight: 700;
letter-spacing: 3px;
margin: 0 0 .5em 0;
text-transform: uppercase;
white-space: nowrap;
}
/* - - - TIMELINE MARKER - - - */
.timeline-marker {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 15px;
}
.timeline-marker:before {
background: #FF6B6B;
border: 3px solid transparent;
border-radius: 100%;
content: "";
display: block;
height: 15px;
position: absolute;
top: 4px;
left: 0;
width: 15px;
transition: background 0.3s ease-in-out, border 0.3s ease-in-out;
}
.timeline-marker:after {
content: "";
width: 3px;
background: #CCD5DB;
display: block;
position: absolute;
top: 24px;
bottom: 0;
left: 6px;
}
.timeline-item:last-child .timeline-marker:after {
content: none;
}
.timeline-item:not(.period):hover .timeline-marker:before {
background: transparent;
border: 3px solid #FF6B6B;
}
/* - - - TIMELINE CONTENT - - - */
.timeline-content {
padding-bottom: 40px;
}
.timeline-content p:last-child {
margin-bottom: 0;
}
/* - - - TIMELINE PERIOD - - - */
.period {
padding: 0;
}
.period .timeline-info {
display: none;
}
.period .timeline-marker:before {
background: transparent;
content: "";
width: 15px;
height: auto;
border: none;
border-radius: 0;
top: 0;
bottom: 30px;
position: absolute;
border-top: 3px solid #CCD5DB;
border-bottom: 3px solid #CCD5DB;
}
.period .timeline-marker:after {
content: "";
height: 32px;
top: auto;
}
.period .timeline-content {
padding: 40px 0 70px;
}
.period .timeline-title {
margin: 0;
}
/*- - - - - - - - - - - - - - - - - - - - - - - -
MOD: TIMELINE CENTERED
- - - - - - - - - - - - - - - - - - - - - - - -*/
@media (min-width: 992px) {
.timeline-centered,
.timeline-centered .timeline-item,
.timeline-centered .timeline-info,
.timeline-centered .timeline-marker,
.timeline-centered .timeline-content {
display: block;
margin: 0;
padding: 0;
}
.timeline-centered .timeline-item {
padding-bottom: 40px;
overflow: hidden;
}
.timeline-centered .timeline-marker {
position: absolute;
left: 50%;
margin-left: -7.5px;
}
.timeline-centered .timeline-info,
.timeline-centered .timeline-content {
width: 50%;
}
.timeline-centered > .timeline-item:nth-child(odd) .timeline-info {
float: left;
text-align: right;
padding-right: 30px;
}
.timeline-centered > .timeline-item:nth-child(odd) .timeline-content {
float: right;
text-align: left;
padding-left: 30px;
}
.timeline-centered > .timeline-item:nth-child(even) .timeline-info {
float: right;
text-align: left;
padding-left: 30px;
}
.timeline-centered > .timeline-item:nth-child(even) .timeline-content {
float: left;
/* text-align: right; */
padding-right: 30px;
}
.timeline-centered > .timeline-item:nth-child(even) h3.timeline-title {
text-align: right;
}
.timeline-centered > .timeline-item.period .timeline-content {
float: none;
padding: 0;
width: 100%;
text-align: center;
}
.timeline-centered .timeline-item.period {
padding: 50px 0 90px;
}
.timeline-centered .period .timeline-marker:after {
height: 30px;
bottom: 0;
top: auto;
}
.timeline-centered .period .timeline-title {
left: auto;
}
}
/*- - - - - - - - - - - - - - - - - - - - - - - -
MOD: MARKER OUTLINE
- - - - - - - - - - - - - - - - - - - - - - - -*/
.marker-outline .timeline-marker:before {
background: transparent;
border-color: #FF6B6B;
}
.marker-outline .timeline-item:hover .timeline-marker:before {
background: #FF6B6B; }</style>{HTML}
{HTML(wiki="1")}<ul class="rawlinks timeline timeline-centered">{trackerlist trackerId="19" fields="207:208:209:210:211" wiki="Simple_vertical_timeline_TPL" /}</ul>{HTML}