https://github.com/mgrsskls/timeline

arranges items like the former facebook timeline did
https://github.com/mgrsskls/timeline

Last synced: 27 days ago
JSON representation

arranges items like the former facebook timeline did

• Host: GitHub
• URL: https://github.com/mgrsskls/timeline
• Owner: mgrsskls
• License: other
• Created: 2013-12-08T18:55:27.000Z (almost 11 years ago)
• Default Branch: master
• Last Pushed: 2016-10-13T12:54:15.000Z (about 8 years ago)
• Last Synced: 2023-08-06T20:56:23.367Z (over 1 year ago)
• Language: JavaScript
• Homepage: https://mgrsskls.github.io/timeline/
• Size: 8.79 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
Timeline.js

=================

**Timeline** is a JavaScript plugin, that arranges items in a given list similar to the old facebook stream. You can see an example at [https://mgrsskls.github.io/timeline/](https://mgrsskls.github.io/timeline/).

Usage

=================

Include the `timeline.css` and `timeline.js` and use a markup like the following:

```html



  


  ...

  




```

Create an instance of the Timeline like this:

```javascript

var timeline = new Timeline(document.getElementById('timeline'));

```

Afterwards you can update the list by calling `timeline.updateList();`. This rearranges all the items, what could be useful if you e.g. changed the items content and therefore their height.


After appending a new item `foo` to the list, you can call `timeline.arrangeItem(foo)` to set it to the correct position.

Settings

=================

**Timeline** accepts one DOM element as the first parameter and an optional settings object as the second parameter:

```javascript

  var timeline = new Timeline(document.getElementById('timeline'), {

    item: 'item-class',

    odd:  'item-class--odd',

    even: 'item-class--even',

});

```

| option | default | explanation |

|---|---|---|

| `item` | `timeline__item` | CSS class of all items in a Timeline list element |

| `odd` | `timeline__item--odd` | CSS class for items that will be put to the left |

| `even` | `timeline__item--even` | CSS class for items that will be put to the right |

Todos

=================

* Updating the list after prepending elements