Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Control over Nav Rows #547

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Control over Nav Rows #547

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ef66521
Fixed handling of as interval. This helps in sequences that last onl…
Dec 26, 2013
6e50f1b
added control over swimlanes in TimeNav. Up until now adding a tag to…
Dec 26, 2013
8a2b804
Adding control over row count, size, and ordering.
Dec 26, 2013
2f5fdc1
typos and broken links
Dec 26, 2013
9d7d75a
fixed:
Dec 31, 2013
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
68 changes: 68 additions & 0 deletions README.markdown
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
- [Map Style Types](#map-style-types)
- [Font Options](#font-options)
- [Font Combination Preview:](#font-combination-preview)
- [Nav Rows](#nav-rows)
- [File Formats](#file-formats)
- [JSON:](#json)
- [JSONP :](#jsonp-)
Expand Down Expand Up @@ -246,6 +247,61 @@ Due to recent changes to the Google Maps API, you need a [API Key](https://devel
####Font Combination Preview:
![Font Combination Preview](http://timeline.verite.co/gfx/font-options.png)

###Nav Rows
To enable finer control over the navigation slider, the following are
used:

* `nav.height` describes total height of the nav-slider, including the ruler
(default 200px)
* `nav.content_height` describes the height without the ruler. As the ruler is
generally 50px (unless you do some CSS changes) this is `nav.height-50`, so
default is 150px
* `nav.marker.height` describes marker/row height, default is 50px. Note that if you
have more than `nav.content_height`/`nav.marker.height` rows - then the row
height reduces to half. So in the default case you can fit 3 rows, and if more rows are
added, the height is reduced to 25px and 6 rows can fit. No fitting is done
beyond this, so if you have more rows, increase your nav sizes.

Controlling rows is done by placing tags on `date` items (see [JSON:](#json) below). The tags label the rows and create affinity for events.
Also - by adding a `tags` section you can list the desired order of the tagged
rows.

Finally - any change in size requires you to also handle the CSS. The common
case is just adding space for more rows, keeping the nicely formatted 50/25px
height. Here is an example of doing just that; There are also full files in git:
[example_json.rows.html](https://github.com/rpeleg1970/TimelineJS/blob/swimlanes/examples/example_json.rows.html)
and [example_json.rows.json](https://github.com/rpeleg1970/TimelineJS/blob/swimlanes/examples/example_json.rows.json)
```html
<!-- BEGIN Timeline Embed -->
<div id="timeline-embed"></div>
<script type="text/javascript">
var timeline_config = {
width: "100%",
height: "100%",
nav: {
content_height: 300,
height: 350,
marker: {
height: 50
}
},
source: 'example_json.rows.json'
}
</script>
<script type="text/javascript" src="../dev_examples/build/js/storyjs-embed.js"></script>
<style>
.vco-timeline .vco-navigation{height:350px;}
.vco-timeline .vco-navigation .timenav-background{height: 300px;}
.vco-timeline .vco-navigation .timenav-background .timenav-line{height: 300px;}
.vco-timeline .vco-navigation .timenav-background .timenav-interval-background{top:301px;}
.vco-timeline .vco-navigation .timenav .content .marker .dot{top:300px;}
.vco-timeline .vco-navigation .timenav .content .marker .line{height:300px;}
.vco-timeline .vco-navigation .timenav .time{top:300px;}
</style>
<!-- END Timeline Embed-->

```

## File Formats

### JSON:
Expand All @@ -255,6 +311,10 @@ JSON is the native data format for TimelineJS.
Remember, JSON is picky. A misplaced comma or quotation mark can
prevent the timeline from loading properly.

Note that optional tags on events (dates) puts them in an annotated row
in the TimeNav. Adding the `tags` list to the JSON file allows you to control
the order of these rows.

Here is the full model:
```javascript

Expand All @@ -269,6 +329,10 @@ Here is the full model:
"credit":"Credit Name Goes Here",
"caption":"Caption text goes here"
},
"tags": [
"optional",
"list"
],
"date": [
{
"startDate":"2011,12,10",
Expand Down Expand Up @@ -318,6 +382,10 @@ storyjs_jsonp_data = {
"credit":"Credit Name Goes Here",
"caption":"Caption text goes here"
},
"tags": [
"optional",
"list"
],
"date": [
{
"startDate":"2011,12,10",
Expand Down
63 changes: 63 additions & 0 deletions examples/example_json.rows.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
<!DOCTYPE html>
<html lang="en"><!--

88888888888 d8b 888 d8b 888888 d8888b
888 Y8P 888 Y8P 88b d88P Y88b
888 888 888 Y88b
888 888 88888b d88b d88b 888 888 88888b d88b 888 Y888b
888 888 888 888 88b d8P Y8b 888 888 888 88b d8P Y8b 888 Y88b
888 888 888 888 888 88888888 888 888 888 888 88888888 888 888
888 888 888 888 888 Y8b 888 888 888 888 Y8b 88P Y88b d88P
888 888 888 888 888 Y8888 888 888 888 888 Y8888 888 Y8888P
d88P
d88P
888P
-->
<head>
<title>Timeline JS Example</title>
<meta charset="utf-8">
<meta name="description" content="TimelineJS example">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<!-- Style-->
<style>
html, body {
height:100%;
padding: 0px;
margin: 0px;
}
</style>
<!-- HTML5 shim, for IE6-8 support of HTML elements--><!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
<!-- BEGIN Timeline Embed -->
<div id="timeline-embed"></div>
<script type="text/javascript">
var timeline_config = {
width: "100%",
height: "100%",
nav: {
content_height: 300,
height: 350,
marker: {
height: 50
}
},
source: 'example_json.rows.json'
}
</script>
<script type="text/javascript" src="../build/js/storyjs-embed.js"></script>
<style>
.vco-timeline .vco-navigation{height:350px;}
.vco-timeline .vco-navigation .timenav-background{height: 300px;}
.vco-timeline .vco-navigation .timenav-background .timenav-line{height: 300px;}
.vco-timeline .vco-navigation .timenav-background .timenav-interval-background{top:301px;}
.vco-timeline .vco-navigation .timenav .content .marker .dot{top:300px;}
.vco-timeline .vco-navigation .timenav .content .marker .line{height:300px;}
.vco-timeline .vco-navigation .timenav .time{top:300px;}
</style>
<!-- END Timeline Embed-->
</body>
</html>
Loading