Timeline JS

https://timeline.knightlab.com
Admin
Easy-to-make, beautiful timelines. TimelineJS is an open-source tool that enables anyone to build...
Tokens:9,462
Snippets:170
Trust Score:9.3
Update:1 month ago
Show doc for...
Tokens:
Raw
### TimelineJS URL Parameters Example

Source: https://timeline.knightlab.com/docs/options.html

Illustrates how to configure TimelineJS options using URL parameters. Append `&option_name=_value_` to the embed URL for each desired option.

```url
https://cdn.knightlab.com/libs/timeline3/latest/embed/index.html?source=1cWqQBZCkX9GpzFtxCWHoqFXCHg-ylTVUWlnrdYMzKUI&font=Default&lang=en&initial_zoom=3&height=650&hash_bookmark=false
```

--------------------------------

### Timeline Integration with Local JSON Data

Source: https://timeline.knightlab.com/docs/instantiate-a-timeline.html

This example demonstrates how to create a TimelineJS instance when your data is in a Javascript object rather than a URL. Ensure your Javascript function correctly generates the JSON configuration.

```javascript
var timeline_json = make_the_json(); 
window.timeline = new TL.Timeline('timeline-embed', timeline_json);
```

--------------------------------

### Initialize TimelineJS with Options

Source: https://timeline.knightlab.com/docs/options.html

Demonstrates how to create a new TimelineJS instance with custom presentation options. The options object is passed as the third argument to the TL.Timeline constructor.

```javascript
var options = {
    hash_bookmark: false,
    initial_zoom: 5
  }
  var timeline = new TL.Timeline('timeline-embed',
                                 'https://docs.google.com/spreadsheets/d/1cWqQBZCkX9GpzFtxCWHoqFXCHg-ylTVUWlnrdYMzKUI/pubhtml',
                                 options);
      
```

--------------------------------

### Timeline Integration with Custom Options

Source: https://timeline.knightlab.com/docs/instantiate-a-timeline.html

This snippet shows how to pass custom configuration options to the TimelineJS constructor. Options like `start_at_end` and `timenav_height` can be used to modify the timeline's behavior and appearance.

```javascript
var additionalOptions = {
              start_at_end: true,
              default_bg_color: {r:0, g:0, b:0},
              timenav_height: 250
            }

            timeline = new TL.Timeline('timeline-embed',
            'https://docs.google.com/spreadsheets/d/1cWqQBZCkX9GpzFtxCWHoqFXCHg-ylTVUWlnrdYMzKUI/pubhtml',
            additionalOptions);
```

--------------------------------

### Configure TimelineJS with Local Files and Options

Source: https://timeline.knightlab.com/docs/instantiate-a-timeline.html

When loading TimelineJS files locally, set the 'script_path' option to the directory containing the core JavaScript files. This helps TimelineJS locate language and font files.

```javascript
var additionalOptions = {
    script_path: '/timeline/js/',
    language: 'es',
    font: 'amatic-andika'
}

timeline = new TL.Timeline('timeline-embed',
'https://docs.google.com/spreadsheets/d/1cWqQBZCkX9GpzFtxCWHoqFXCHg-ylTVUWlnrdYMzKUI/pubhtml',
additionalOptions);

```

--------------------------------

### Basic Timeline Integration with Javascript

Source: https://timeline.knightlab.com/docs/instantiate-a-timeline.html

This snippet shows the essential HTML and Javascript required to embed a TimelineJS instance. It includes loading the Timeline CSS and JS, defining a container div, and creating the timeline with a Google Sheet as the data source.

```html
<link title="timeline-styles" rel="stylesheet" 
              href="https://cdn.knightlab.com/libs/timeline3/latest/css/timeline.css">

        <script src="https://cdn.knightlab.com/libs/timeline3/latest/js/timeline.js"></script>

        <div id='timeline-embed' style="width: 100%; height: 600px"></div>

        <script type="text/javascript">
            // The TL.Timeline constructor takes at least two arguments:
            // the id of the Timeline container (no '#'), and
            // the URL to your JSON data file or Google spreadsheet.
            // the id must refer to an element "above" this code,
            // and the element must have CSS styling to give it width and height
            // optionally, a third argument with configuration options can be passed.
            // See below for more about options.
            timeline = new TL.Timeline('timeline-embed',
            'https://docs.google.com/spreadsheets/d/1cWqQBZCkX9GpzFtxCWHoqFXCHg-ylTVUWlnrdYMzKUI/pubhtml');
        </script>
```

--------------------------------

### Configure TimelineJS Font with Custom CSS

Source: https://timeline.knightlab.com/docs/instantiate-a-timeline.html

To use your own font styles, provide a path to your custom CSS file in the 'font' option. Ensure the CSS file is correctly linked.

```javascript
var additionalOptions = {
    font: '/css/my-custom-timeline-fonts.css'
}

timeline = new TL.Timeline('timeline-embed',
'https://docs.google.com/spreadsheets/d/1cWqQBZCkX9GpzFtxCWHoqFXCHg-ylTVUWlnrdYMzKUI/pubhtml',
additionalOptions);

```

--------------------------------

### Configure TimelineJS Font Option

Source: https://timeline.knightlab.com/docs/instantiate-a-timeline.html

Use the 'font' option to specify a pre-selected font set for your timeline. This is required when not using the timeline authoring tool.

```javascript
var additionalOptions = {
    font: 'opensans-gentiumbook'
}

timeline = new TL.Timeline('timeline-embed',
'https://docs.google.com/spreadsheets/d/1cWqQBZCkX9GpzFtxCWHoqFXCHg-ylTVUWlnrdYMzKUI/pubhtml',
additionalOptions);

```

--------------------------------

### Embed TimelineJS via iframe

Source: https://timeline.knightlab.com/index.html

Use this HTML snippet to embed a generated timeline directly into your website.

```html
<iframe src="https://cdn.knightlab.com/libs/timeline3/latest/embed/index.html?source=1xuY4upIooEeszZ_lCmeNx24eSFWe0rHe9ZdqH2xqVNk&font=Default&lang=en&initial_zoom=2&height=650" width="100%" height="650" frameborder="0"></iframe>
```

--------------------------------

### Reset TimelineJS Font to Default

Source: https://timeline.knightlab.com/docs/instantiate-a-timeline.html

Set the 'font' option to null to revert to the default font styles. This is useful if you've previously set a custom font and want to use the default.

```javascript
<link rel="stylesheet" href="/css/my-custom-timeline-fonts.css">
<script type="text/javascript">
    var additionalOptions = {
        font: null
    }

    timeline = new TL.Timeline('timeline-embed',
    'https://docs.google.com/spreadsheets/d/1cWqQBZCkX9GpzFtxCWHoqFXCHg-ylTVUWlnrdYMzKUI/pubhtml',
    additionalOptions);
</script>

```
Tokens:
Raw