Simple vertical timeline

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.

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).

Click to expand

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.

Click to expand

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:

Click to expand

Click to expand

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:

Copy to clipboard
{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}

With white space removed, the page content looks like this:

Copy to clipboard
{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}

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:

Copy to clipboard
{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}

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:

Copy to clipboard
/*- - - - - - - - - - - - - - - - - - - - - - - - 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; }

The timeline

And here is the finished timeline. If there are any questions or comments, please post in the tiki.org forums.

Created by Gary Cunningham-Lee. Last Modification: Wednesday 16 August, 2023 18:40:35 GMT-0000 by Marc Laporte.


Get Started

Admin Guide User Guide


Keywords serve as "hubs" for navigation within the Tiki documentation. They correspond to development keywords (bug reports and feature requests):

Accessibility (WAI and 508)
Articles and Submissions
BigBlueButton audio/video/chat/screensharing
Browser Compatibility
Link Cache
Clean URLs
Communication Center
Compression (gzip)
Contacts (Address Book)
Contact us
Content Templates
Custom Home and Group Home Page
Date and Time
Debugger Console
Directory of hyperlinks
Documentation link from Tiki to doc.tiki.org (Help System)
Dynamic Content
Dynamic Variable
External Authentication
Featured links
File Gallery
Friendship Network (Community)
Gmap Google maps
i18n (Multilingual, l10n)
Image Gallery
Inter-User Messages
Kaltura video management
Live Support
Logs (system & action)
Look and Feel
Map with Mapserver
Meta Elements
Mobile Tiki and Voice Tiki
Performance Speed / Load
Platform independence (Linux-Apache, Windows/IIS, Mac, BSD)
Profile Manager
Search engine optimization
Search and Replace
Semantic links
Shadow Layers
Shopping cart
Social Networks
Spam protection (Anti-bot CATPCHA)
Tell a Friend, alert + Social Bookmarking
Theme CSS & Smarty
Tiki Manager
User Administration including registration and banning
User Files
User Menu
Web Services
Wiki History, page rename, etc
Wiki Syntax
Wiki structure (book and table of content)

Tiki Newsletter

Delivered fresh to your email inbox!
Newsletter subscribe icon
Don't miss major announcements and other news!
Contribute to Tiki