Loading...
 
Skip to main content
1
Page actions
PDF Print Get a short URL Open in WebDAV

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

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:

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.


  • 2018

  • Sun 04 Feb, 2018

    TikiFest FOSDEM 2018

    Image See https://tiki.org/TikiFest-Fosdem-2018-Whiteboard.

  • 2017

  • Mon 09 Oct, 2017

    TikiFest Japan 2017

    Celebrated Tiki's 15th birthday, and discussed the Bootstrap 3 to 4 transition, the Packages feature, and improving the file hierarchy in regard to custom files, etc.

  • 2016

  • Tue 23 Aug, 2016

    TikiFest Hungary 2016

    Meetup with old and new friends of the Tiki Community, work together on Tiki marketing and branding (and possibly some bugfixing, yay!) and have a great time in one of the most famous cities of Europe.
    Image
  • Mon 01 Feb, 2016

    TikiFest2016 Brussels Fosdem

    Topics / Activities

    • Tiki 15 preparation
      • Upgrade jquery and jquery-ui
      • Remove MapServer, ThemeGenerator and others?
      • Sort out prefs for stats collection and review forthcoming stats control panel

    (This timeline item has an "alert-info" CSS container class applied.)

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