{"id":13622237,"url":"https://github.com/RyanFitzgerald/vertical-timeline","last_synced_at":"2025-04-15T05:34:05.375Z","repository":{"id":99021497,"uuid":"50964424","full_name":"RyanFitzgerald/vertical-timeline","owner":"RyanFitzgerald","description":"Responsive, jQuery-based vertical timeline generator","archived":false,"fork":false,"pushed_at":"2017-09-12T19:42:31.000Z","size":164,"stargazers_count":83,"open_issues_count":2,"forks_count":19,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-03T03:51:08.892Z","etag":null,"topics":["javascript","jquery","timeline","vertical"],"latest_commit_sha":null,"homepage":"http://ryanfitzgerald.github.io/vertical-timeline/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/RyanFitzgerald.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2016-02-03T01:18:19.000Z","updated_at":"2025-02-19T06:58:31.000Z","dependencies_parsed_at":null,"dependency_job_id":"feb399c8-3cbd-425c-985d-fbe98d85e33c","html_url":"https://github.com/RyanFitzgerald/vertical-timeline","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RyanFitzgerald%2Fvertical-timeline","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RyanFitzgerald%2Fvertical-timeline/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RyanFitzgerald%2Fvertical-timeline/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RyanFitzgerald%2Fvertical-timeline/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RyanFitzgerald","download_url":"https://codeload.github.com/RyanFitzgerald/vertical-timeline/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249016072,"owners_count":21198826,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","jquery","timeline","vertical"],"created_at":"2024-08-01T21:01:16.377Z","updated_at":"2025-04-15T05:34:05.126Z","avatar_url":"https://github.com/RyanFitzgerald.png","language":"HTML","funding_links":[],"categories":["HTML"],"sub_categories":[],"readme":"# Vertical Timeline\n\nVertical Timeline is a responsive, jQuery-based generator that builds a timeline based on user input. It comes with a number of customization options out of the box such as displaying dates, alternating toggle, animation, and choosing which side it starts on. It comes with little to no styling other than what it required, so it can be styled to suite your specific needs. I originally created a timeline for my personal website, however I have since found a number of possible reuse options for it, so I decided to create this simple plugin.\n\nThe website for this plugin can be found [here](http://ryanfitzgerald.github.io/vertical-timeline/), which has the demo.\n\n## Installation \u0026 Setup\n\nAll the installation that is required is simply including the compiled CSS and JS file in your document (minified or not) and then initializing it.\n\nTop of page:\n```html\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"path/to/vertical-timeline.css\"\u003e\n```\n\nBottom of page:\n```html\n\u003cscript src=\"path/to/vertical-timeline.min.js\"\u003e\u003c/script\u003e\n```\n\nFinally, initialize it:\n```javascript\n$('#someIDorClass').verticalTimeline();\n```\n\n## How to Use\n\nTimeline has a few options that can be customized to suite your specific needs. The included options that can be utilized are:\n\nName | Description | Default\n---- | ----------- | -------\nstartLeft | Choose whether or not it starts on the left (false = right side) | true\nalternate | Choose whether or not the points alternate sides | true\nanimate | Choose whether or not points fade in as they appear in viewport (options: \"fade\", \"slide\") | false\narrows | Choose whether or not the content arrows show | true\n\n## Example Usage\n\nAnother example usage of timeline using it's available options is as follows:\n\n```javascript\n$('#myID').verticalTimeline({\n    startLeft: false,\n    alternate: true,\n    animate: \"fade\",\n    arrows: false\n});\n```\n\n## Adding Dates\n\nDates can easily be added by utilizing data attributes. In order to have dates show up, the following data attribute is used:\n\n```html\n\u003cdiv id=\"myTimeline\"\u003e\n    \u003cdiv data-vtdate=\"February 2016\"\u003e\n        My Content 1\n    \u003c/div\u003e\n    \u003cdiv data-vtdate=\"March 2016\"\u003e\n        My Content 2\n    \u003c/div\u003e\n    \u003cdiv data-vtdate=\"April 2016\"\u003e\n        My Content 3\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\nEvery time that data attribute is used, that date will be displayed.\n\n## Override Side\n\nIf you want, you can override the side that the content block shows up on by default. By adding the override, it will ignore whatever alternation or start side the other elements use. This can be done as follows:\n\n```html\n\u003cdiv id=\"myTimeline\"\u003e\n    \u003cdiv data-vtside=\"left\"\u003e\n        My Content 1\n    \u003c/div\u003e\n    \u003cdiv\u003e\n        My Content 2\n    \u003c/div\u003e\n    \u003cdiv\u003e\n        My Content 3\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\n## Modifying Styles\n\nAll elements use classes so their styles can be easily overwritten. You can add styles for any of the following elements:\n\nName | Description | Class Used\n---- | ----------- | -------\nTimelime Wrapper | This wraps the entire timeline | .vtimeline\nTimeline Point | This wraps the entirety of each point on the timeline | .vtimeline-point\nTimeline Icon | This is the icon associated with each point | .vtimeline-icon\nTimeline Block | This holds the date and content for each point | .vtimeline-block\nTimeline Date | This holds the date, if provided | .vtimeline-date\nTimeline Content | This holds the actual content of each point | .vtimeline-content\n\n## Adding Icons\n\nYou can optionally add an icon inside of the circle corresponding to each timeline point. To do this, create a div inside of your content and give it the data attribute `data-vticon=\"true\"`. Anything inside this div will get placed inside `.vtimeline-icon` of the corresponding element. You can use this to easily associate SVG icons, font-awesome icons, etc. with every point or only certain points. An example usage is as follows:\n\n```html\n\u003cdiv id=\"myTimeline\"\u003e\n    \u003cdiv\u003e\n        \u003cdiv data-vticon=\"true\"\u003e\n            \u003cimg src=\"some/icon/here.png\"\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n    \u003cdiv\u003e\n        My Content 2\n    \u003c/div\u003e\n    \u003cdiv\u003e\n        My Content 3\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\n## Special Mention\n\n#### [CodyHouse.co](https://codyhouse.co/)\n\nProvided initial idea for the layout of the timeline from a published tutorial\n\n## License\n\nMIT License (Free - see LICENSE.md)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FRyanFitzgerald%2Fvertical-timeline","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FRyanFitzgerald%2Fvertical-timeline","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FRyanFitzgerald%2Fvertical-timeline/lists"}