Loading...
 

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

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

screenshot
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:

screenshot
Click to expand


screenshot
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:
{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:
{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:

{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:

[-]
/*- - - - - - - - - - - - - - - - - - - - - - - -
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.





Page last modified on Saturday 05 May, 2018 14:38:10 GMT-0000

doc.tiki.org


Bootstrap

AdminGuide

UserGuide

Keywords

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

Accessibility (WAI and 508)
Accounting
Articles and Submissions
Backlinks
Banners
Batch
BigBlueButton audio/video/chat/screensharing
Blog
Bookmark
Browser Compatibility
Link Cache
Calendar
Category
Chat
Clean URLs
Comments
Communication Center
Compression (gzip)
Contacts (Address Book)
Contact us
Content Templates
Contribution
Cookie
Copyright
Credit
Custom Home and Group Home Page
Date and Time
Debugger Console
Directory of hyperlinks
Documentation link from Tiki to doc.tiki.org (Help System)
Docs
Draw
Dynamic Content
Dynamic Variable
External Authentication
FAQ
Featured links
File Gallery
Forum
Friendship Network (Community)
Gmap Google maps
Groups
Hotword
HTML Page
i18n (Multilingual, l10n, Babelfish)
Image Gallery
Import-Export
Install
Integrator
Interoperability
Inter-User Messages
InterTiki
Kaltura video management
Karma
Live Support
Login
Logs (system & action)
Look and Feel
Lost edit protection
Mail-in
Map with Mapserver
Menu
Meta Tags
Mobile Tiki and Voice Tiki
Mods
Module
MultiTiki
MyTiki
Newsletter
Notepad
Payment
Performance Speed / Load
Permissions
Platform independence (Linux-Apache, Windows/IIS, Mac, BSD)
Polls
Profiles
Profile Manager
Report
Toolbar
Quiz
Rating
Feeds
Score
Search engine optimization
Search
Search and Replace
Security
Semantic links
Shadowbox
Shadow Layers
Share
Shopping cart
Shoutbox
Slideshow
Smiley
Social Networks
Spam protection (Anti-bot CATPCHA)
Spellcheck
Spreadsheet
Stats
Surveys
Tags
Task
Tell a Friend, alert + Social Bookmarking
TikiTests
Theme CSS & Smarty
Trackers
Transitions
TRIM
User Administration including registration and banning
User Files
User Menu
Watch
WebDAV
Webmail
Web Services
Wiki History, page rename, etc
Wiki Plugin extends basic syntax
Wiki Syntax
Wiki structure (book and table of content)
Workspace
WSOD
WYSIWYCA
WYSIWYG
XMLRPC


Tiki Newsletter

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