https://github.com/angelodlfrtr/tiny-timeline-js
https://github.com/angelodlfrtr/tiny-timeline-js
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/angelodlfrtr/tiny-timeline-js
- Owner: angelodlfrtr
- License: mit
- Created: 2017-02-03T23:27:48.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-02-03T23:28:33.000Z (over 8 years ago)
- Last Synced: 2025-01-02T05:30:03.797Z (5 months ago)
- Language: JavaScript
- Size: 17.6 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Une super timeline -- School project
A simple timeline, just for you.
## Installation
Just add `timeline.min.js` at the end of html, and the css `dist/timeline.css` in head of your document.
## Usage
Create timeline :
```javascript
var element = document.getElementById('mydiv');
var timeline_duration = 10000; // in milliseconds
var timeline = new Timeline(element, duration);
```
Add line to timeline :
```javascript
var line1 = timeline.addLine('line_one', { "color": "red" }); // Color will be apply to events
var line2 = timeline.addLine('line_two', { "color": "green" }); // You can use hex color
```
Add event to a line :
```javascript
var event = line1.addEvent('Cool', {
"start": 2000,
"end": 8000
});
```
Move cursor :
```javascript
timeline.goTo(5000);
```
Detect when cursor is on event :
```javascript
event.onActive(function(event){
console.log(event);
});
```