├── README.md ├── css ├── .DS_Store ├── demo.css ├── demo.less ├── responsive.css ├── responsive.min.css ├── timeliner.css ├── timeliner.less └── timeliner.min.css ├── demo-future ├── css │ ├── timeliner-future.css │ └── timeliner-future.less ├── img │ ├── bg-space-mod.jpg │ ├── event-cars.jpg │ ├── event-robots.jpg │ ├── event-singularity.gif │ ├── event-teleportation.jpg │ └── event-urbanity.jpg └── timeliner-future.html ├── images ├── .DS_Store ├── timeline_century_tick.gif └── timeline_decade_tick.gif ├── inc ├── .DS_Store ├── colorbox.css ├── colorbox.js └── images │ ├── border.png │ ├── controls.png │ ├── loading.gif │ ├── loading_background.png │ └── overlay.png ├── js ├── .DS_Store ├── jquery.min.js ├── timeliner.js ├── timeliner.min.js └── vendor │ └── venobox │ ├── close.gif │ ├── next.gif │ ├── preload-circle.png │ ├── preload-dots.png │ ├── preload-ios.png │ ├── preload-quads.png │ ├── preload.png │ ├── prev.gif │ ├── venobox.css │ ├── venobox.js │ └── venobox.min.js └── timeliner.html /README.md: -------------------------------------------------------------------------------- 1 | # Timeliner 2 | 3 | ## Overview 4 | Build a simple, interactive, historical timeline with HTML, CSS, and jQuery. The benefits of this timeline script are that it's (1) simple, (2) able to handle nearly any form of content (including images, video, audio), (3) printer friendly, and highly customizable with just CSS and HTML. 5 | 6 | Please [drop me a line](http://www.technotarek.com/contact "drop me a line") if you do do something interesting with it. See below for samples from other users. 7 | 8 | ## Demos and Live Implementations 9 | 10 | ###### Advanced CSS3 Customization Demo 11 | https://technotarek.com/timeliner/demo-future/timeliner-future.html 12 | 13 | ###### Implementation with Custom CSS: Investigating Power 14 | https://investigatingpower.org/civil-rights/ 15 | 16 | ###### Original Demo 17 | https://www.technotarek.com/timeliner/timeliner.html 18 | 19 | ## Quick Start 20 | 21 | #### Load Plugin and Dependencies 22 | 23 | ```html 24 | 25 | 26 | 27 | 28 | ``` 29 | 30 | #### Instantiate 31 | 32 | ```html 33 | 38 | ``` 39 | 40 | #### Markup 41 | Using the plugin's defaults and recommended markup, a timeline with two major time markers (1976 and 1984) and a total of three events looks like this: 42 | 43 | ```html 44 |
45 |
46 |

1976

47 | 48 |
49 | 50 |
Event
51 |
52 |

Content about the event goes here.

53 |
54 | 55 |
Another Event
56 |
57 |

Content about the other event.

58 |
59 | 60 |
61 |
62 |
63 |

1984

64 | 65 |
66 | 67 |
Yet Another Event
68 |
69 |

Content about the event goes here.

70 |
71 | 72 |
73 |
74 |
75 |
76 | ``` 77 | 78 | [Emmet](http://emmet.io/) snippet: 79 | 80 | div#timeline.timeline-container>div.timeline-wrapper>h2.timeline-time+dl.timeline-series>dt.timeline-event#my-event-01+dd.timeline-event-content#my-event-01EX 81 | 82 | ## Important Upgrade Notes 83 | 84 | Users wishing to upgrade from v1.x to v2.x should note that the default markup for timeliner.js has changed. Specifically, most of the default class names have changed. 85 | 86 | * screen.css was divided into two separate files, demo.css and timeliner.css 87 | * "timelineContainer" ==> "timeline-container" 88 | * "timelineMajor" ==> "timeline-wrapper" 89 | * "timelineMajorMarker" ==> "timeline-time" 90 | * "timelineMinor" ==> "timeline-series" 91 | * "timelineEvent" ==> "timeline-event-content" 92 | 93 | To resolve these changes, either update your markup and/or use the new customization options introducted with v2.0. For example, you could use the new "timelineSection" option to change the selector from "timeline-wrapper" back to "timelineMajor". Otherwise, simply replace your original timeliner javascript and css files with the 2.x versions. 94 | 95 | In addition, note: 96 | 97 | * Each minor marker tag needs a class of timeline-event 98 | * The display:none property from the previous timelineEvent (now timeline-event-content) element is no longer necessary 99 | * The expand/collapse element uses new and simplified markup. See the Usage section for details. 100 | * The license has been changed from a _Creative Commons Attribution-ShareAlike 3.0 Unported License_ to a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. The former continues to apply to version 1.x implementations. 101 | 102 | The 2.x changes provide an improved semantic markup. They also help other developers use a custom markup structure. Whereas version 1.x required the use of dl, dt, dd tags, it is now possible to use your own markup in coordination with the plugin's options. Other changes were made for the sake of consistency and to simplify future development. 103 | 104 | ## Requirements 105 | * jQuery 106 | * Optional: Jack Moore's ColorBox jQuery plugin 107 | 108 | ## Detailed Usage Instructions 109 | 1. Include timeliner.css (or timeliner.min.css) and timeliner.js (or timeliner.min.js). Optionally, also include responsive.css / responsive.min.css for basic responsive behavior on phones and mobile devices below 480px wide (iPad responsive behavior forthcoming). 110 | 111 | 2. Wrap your timeline in an element with an ID of "timeline" and CLASS of timeline-container. You can set your own container ID using the plugin's options. If you need to use a customized class value as well, update the CSS accordingly. 112 | 113 | ```html 114 |
115 | ... 116 |
117 | ``` 118 | 119 | 3. Separate the major marker content (e.g., content for each century, year, decade etc) into elements with a class of timeline-wrapper. See the options if you need to customize this class value. 120 | 121 | ```html 122 |
123 | ... 124 |
125 | ``` 126 | 127 | 4. Wrap the major markers in an element with a class of 'timeline-year'. See the options if you need to customize this class value. 128 | 129 | ```html 130 |

1954

131 | ``` 132 | 133 | 5. Separate the individual events into DL elements with a class of "timeline-series". See the options if you need to customize this class value. 134 | 135 | ```html 136 |
137 | ... 138 |
139 | ``` 140 | 141 | 6. Wrap the title of the individual events in a DT tag surrounding an A tag; give each DT a unique ID and the class of "timeline-event". 142 | 143 | ```html 144 |
Brown vs Board of Education
145 | ``` 146 | 147 | 7. Wrap the full event content in a DD tag; give each DD an ID based on the DT with 'EX' appended and a class of 'timeline-event-content'. See the options to customize these values. 148 | 149 | ```html 150 |
151 | ... 152 |
153 | ``` 154 | 155 | 8. Instantiate: 156 | 157 | ```js 158 | $.timeliner({}); 159 | ``` 160 | 161 | 9. Or, instantiate with multiple timelines: 162 | 163 | ```js 164 | $.timeliner({timelineContainer: '#timeline'}); 165 | $.timeliner({timelineContainer: '#timeline2'}); 166 | ``` 167 | 168 | 10. Or, instantiate with options. Use as many or as few as you like. If you're using multiple timelines on a single page, options can be set on each individual timeline. 169 | 170 | ```js 171 | $.timeliner({ 172 | timelineContainer: '#timeline', 173 | // Container for the element holding the entire timeline (e.g. a DIV) 174 | // value: ID or class selector 175 | // default: #timeline 176 | // note: must be unique for each timeline on page 177 | 178 | timelineSection: '.timeline-wrapper', 179 | // Wrapper that contains items under a specific marker (e.g., all of the events under a year on the timeline) 180 | // value: class selector 181 | // default: .timeline-wrapper 182 | // note: changing this selector from the default will require modifications to the CSS file in order to retain default styling 183 | 184 | timelineSectionMarker: '.timeline-time', 185 | // Class selector applied to each major item on the timeline, such as each year 186 | // value: class selector 187 | // default: .timeline-year 188 | 189 | timelineTriggerContainer: '.timeline-series', 190 | // Class assigned to wrappers surrounding each individual event 191 | // value: selector 192 | // default: .timeline-series 193 | // note: changing this selector from the default will require modifications to the CSS file in order to retain default styling 194 | 195 | timelineTriggerAnchor: '.timeline-event', 196 | // Element that is wrapped around the event's title; when clicked, expands the event and reveals its full contents 197 | // value: class selector 198 | // default: .timeline-event 199 | // note: changing this tag from the default will require modifications to the CSS file in order to retain default styling 200 | 201 | timelineEventContainer: options['timelineEventContainer'] || 'dt', 202 | // Wrapper surrounding a series of events corresponding to the timelineSectionMarker 203 | // value: tag or class selector 204 | // default: dt 205 | // note: When leaving this value at its default, you do not need to apply a class to the dt element if you use the plugins recommended tag structure and markup 206 | // note: Change this from the default, perhaps to a class like ".timeline-event", in the case that you do not want to use the plugins recommened markup structure and prefer to use anothe element (e.g, div) instead of a dt tag to mark each event within a series. 207 | // note: Changing this value from the default will require modifications to the CSS file in order to retain default styling 208 | 209 | timelineEXContent: '.timeline-event-content', 210 | // Element that contains the event's full content to be displayed when event is expanded, an event's expanded ID should alway be on this item 211 | // value: class selector 212 | // default: .timeline-event-ex 213 | // note: changing this selector from the default will require modifications to the CSS file in order to retain default styling 214 | 215 | EXContentIdSuffix: 'EX', 216 | // ID suffix to identify expanded (aka EX) content 217 | // value: string 218 | // default: EX 219 | 220 | oneOpen: false, 221 | // sets whether only one item on the timeline can be open at a time. If true, other items will close when one is opened. 222 | // value: true | false 223 | // default: false 224 | // note: does not apply to events identified in startOpen option 225 | 226 | startState: options['startState'] || 'closed', 227 | // sets whether the timeline is initially collapsed, fully expanded, or "flat" mode 228 | // value: closed | open | flat 229 | // default: closed 230 | // note: setting to "open" makes the startOpen option meaningless 231 | // note: flat mode initally collapses the entire timeline except for the major markers 232 | // note: the flat state is an initial display option only -- the timeline major markers return to normal once they've been opened/displayed 233 | 234 | startOpen: options['startOpen'] || ['.start-open'], 235 | // As of version 2.3, you can simply add the "start-open" class to each timeline-event you want to have open by default; see the demo source code or code sample below 236 | // sets the events to display expanded on page load 237 | // value: array of IDs of single timelineEvents (e.g., ['#event01'] or ['#event01','#event02']) 238 | // default: ['.start-open'] 239 | 240 | baseSpeed: 200, 241 | // sets the base speed for animation of an event 242 | // value: numeric 243 | // default: 200 244 | 245 | speed: 4, 246 | // multiplier applied to the base speed that sets the speed at which an event's contents are displayed and hidden 247 | // value: numeric 248 | // default: 4 249 | 250 | fontOpen: '1.2em', 251 | // sets the font size of an event after it is opened 252 | // value: any valid CSS font-size value, 253 | // default: 1.2em 254 | 255 | fontClosed: '1em', 256 | // sets the font size of an event after it is closed 257 | // value: any valid CSS font-size value 258 | // defaults: 1em 259 | 260 | expandAllText: '+ expand all', 261 | // sets the text of the expandAll selector after the timeline is fully collapsed 262 | // value: string 263 | // default: + expand all 264 | 265 | collapseAllText: '- collapse all' 266 | //sets the text of the expandAll selector after the timeline is fully expanded 267 | // value: string 268 | // default: - collapse all 269 | 270 | }); 271 | ``` 272 | 273 | 11. Add an expand/collapse all events by adding the following inside of the main #timeline. Use the expandAllText and collapseAllText options to customize this button. You may include more than one expand/collapse button per timeline, such as at the top and bottom of your timeline. When the state of one changes, it will update all others. 274 | 275 | ```html 276 | 277 | ``` 278 | 279 | ## Sample 280 | 281 | Using the plugins defaults and recommended markup, a timeline with only one time marker and two events would look like this: 282 | 283 | ```html 284 |
285 |
286 |

1976

287 | 288 |
289 | 290 |
Event
291 |
292 |

Content about the event goes here.

293 |
294 | 295 |
Another Event
296 |
297 |

Content about the other event.

298 |
299 | 300 |
301 |
302 |
303 |
304 | ``` 305 | 306 | Using the customization options introduced in v2.0, it's possible to customize the tags and class names used by the plugin. For example, the "timeline-time" class applied to the h2 tag can be customized. Perhaps, if you're using the plugin to outline the steps involved in a task (like putting together a piece of furniture), you could use "timeline-step" instead. 307 | 308 | In fact, it's possible to use a different markup structure entirely by fully using the v2.0 customization options. 309 | 310 | ## Additional Examples 311 | 312 | * https://technotarek.com/timeliner/demo-future/timeliner-future.html 313 | * https://investigatingpower.org/vietnam-war/ 314 | * http://www.ncld-youth.info/index.php?id=61 315 | 316 | ## Change Log 317 | 318 | ###### v2.3.1 (3/23/2018) 319 | * Added minified responsive css file. 320 | 321 | ###### v2.3 (5/12/2017) 322 | * Confirmed compatibility with jQuery 3.x. See issue #22. 323 | 324 | ###### v2.3 (5/9/2016) 325 | * Add ability to set .start-open class on events (resolves #17) 326 | 327 | ###### v2.2 (10/12/2014) 328 | * Added new "flat" startState which allows for a fully collapsed timeline upon load 329 | 330 | ###### v2.1 (10/10/2014) 331 | * Separated css into two separate files to isolate demo from plugin styles (demo.css and timeliner.css) 332 | * Added minified css file (timeliner.min.css) 333 | * Support multiple expand/collapse buttons per timeline 334 | * Added new demo files for "Future" theme 335 | 336 | ###### v2.0 (10/10/2014) 337 | * Merged customization efforts developed by https://github.com/ascloutier/timeliner 338 | * Merge includes new oneOpen option 339 | * Revised plugin's default selector labels to reflect semantic naming in the case of a traditional timeline 340 | * Fixed issue where major markers would not re-open after one cycle 341 | * Added LESS file for faster CSS revisions and customization 342 | 343 | ###### v1.6 (1/7/2013) 344 | * Merged multiple-timeline per page enhancement \( supported by https://github.com/luisalima \) 345 | 346 | ###### v1.5.1 (10/1/2013) 347 | * Changed click events to use jQuery delegated events via the .on\(\) method \( supported partially by code contributed by https://github.com/gkarka \) 348 | 349 | ###### v1.5.responsive (7/9/2013) 350 | * Added basic responsive behavior for phone/mobile devices below 480px wide \(supported partially by code contributed by Geus Maxime\) 351 | 352 | ###### v1.5 (6/7/2013) 353 | * startOpen option now accepts multiple timeline events 354 | 355 | ###### v1.4.1 (6/7/2013) 356 | * Merged in openStart-fix \( via https://github.com/rs017991 \) 357 | 358 | ###### v1.4 (4/27/2013) 359 | * Fixed jQuery 1.9 Toggle deprecation \( #0d2755 via https://github.com/Marco129 \) 360 | * Customization for expand/collpase all \( #927fac via https://github.com/Marco129 \) 361 | * Updated ColorBox plugin for jQuery 1.9 362 | 363 | ###### v1.3 (1/25/2013) 364 | * Major js code simplification and optimization 365 | 366 | ###### v1.2 (1/24/2013) 367 | * Added in additional instantiation options 368 | * Fixed startOpen bug 369 | 370 | ###### v1.1 (1/23/2013) 371 | * Added startOpen option 372 | 373 | ###### v1.0 (5/1/2012) 374 | * First release 375 | 376 | ## Accessbility 377 | 378 | The original 1.0 version was also fully accessible and 508 compliant as of its original production (mid-2000s). Accessibility technologies have since changed as have coding practices to address accessibility (e.g., the adoption of ARIA). It is recommended that you review your own implementation to ensure accessiblity if that is a requirement of your project. I hope to re-review and update the plugin's native accessiblity at a later date. 379 | 380 | ## Roadmap 381 | 382 | * Replace ColorBox plugin with alternative 383 | * Improve responsiveness for a variety of device sizes 384 | * Add easy theming and new visual options 385 | * Revisit accesibility: add in ARIA and keyboard controls 386 | 387 | ## Ideas for v3 388 | 389 | http://codepen.io/plasm/pen/oZbXmj 390 | 391 | ## Credits 392 | The content used in the repo and in the demo is from the Investigating Power project (https://investigatingpower.org), a website which I developed on behalf of author and journalist Charles Lewis. 393 | 394 | Thanks to on-going development and contributions from the community, timeliner continues to improve. Notable enhancements include basic responsiveness for mobile devices, the ability to add multiple timelines to a single page, and customizable selectors to allow for semantic markup. 395 | 396 | The repo is packaged with a version of Jack Moore's ColorBox jQuery plugin (http://www.jacklmoore.com/colorbox). It is for demonstration purposes only. See https://github.com/jackmoore/colorbox for support. 397 | 398 | ## License 399 | What's most important to me is that you [let me know](http://www.technotarek.com/contact "contact") if you implement it somewhere so I can take a peek. As of version 2.0, I've changed the license to prohibit commerical usage without my consent. The intent is not to limit a single implementation (e.g,. on a company website), but to prohibit the use and packaging of this plugin within other commercial products (e.g, themes, applications etc). 400 | 401 | ##### version 2.x+ 402 | Timeliner.js by Tarek Anandan, version 2.x+, is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. 403 | 404 | ![License](https://i.creativecommons.org/l/by-nc-sa/4.0/80x15.png "Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License") 405 | 406 | ##### version 1.x 407 | Timeliner.js by Tarek Anandan, version 1.x, is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License. 408 | -------------------------------------------------------------------------------- /css/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/technotarek/timeliner/82321f03f17e1fa765c956e111124953a8c1c376/css/.DS_Store -------------------------------------------------------------------------------- /css/demo.css: -------------------------------------------------------------------------------- 1 | /* ======= DEMO LAYOUT ======= */ 2 | body { 3 | background-color: #2f2f2f; 4 | color: #eeefef; 5 | font-size: 62.5%; 6 | font-family: Arial, Helvetica, sans-serif; 7 | margin: 0; 8 | padding: 0; 9 | } 10 | .container { 11 | width: 940px; 12 | margin-left: auto; 13 | margin-right: auto; 14 | padding: 10px; 15 | *zoom: 1; 16 | } 17 | h1 { 18 | color: #7DBADF; 19 | font-size: 36px; 20 | font-weight: 400; 21 | margin: 0; 22 | } 23 | h2 { 24 | font-size: 22px; 25 | font-weight: 400; 26 | margin: 5px 0; 27 | letter-spacing: .1em; 28 | } 29 | h3 { 30 | font-size: 1.6em; 31 | margin: 10px 0 10px 10px; 32 | } 33 | a:link, 34 | a:visited { 35 | color: #7097af; 36 | text-decoration: none; 37 | } 38 | a:hover { 39 | color: #7DBADF; 40 | } 41 | a img { 42 | border: none; 43 | } 44 | p { 45 | margin: 0 0 10px 8px; 46 | font-size: 1.5em; 47 | font-weight: 400; 48 | line-height: 1.6em; 49 | } 50 | .lead { 51 | font-size: 2em; 52 | margin-bottom: 40px; 53 | } 54 | .clear { 55 | clear: both; 56 | line-height: 0; 57 | font-size: 0; 58 | } 59 | -------------------------------------------------------------------------------- /css/demo.less: -------------------------------------------------------------------------------- 1 | /* ======= DEMO LAYOUT ======= */ 2 | 3 | body { 4 | background-color:#2f2f2f; 5 | color:#eeefef; 6 | font-size:62.5%; 7 | font-family:Arial, Helvetica, sans-serif; 8 | margin:0; 9 | padding:0; 10 | } 11 | 12 | .container { 13 | width:940px; 14 | margin-left:auto; 15 | margin-right:auto; 16 | padding:10px; 17 | *zoom:1; 18 | } 19 | 20 | h1 { 21 | color:#7DBADF; 22 | font-size:36px; 23 | font-weight:400; 24 | margin:0; 25 | } 26 | 27 | h2 { 28 | font-size:22px; 29 | font-weight:400; 30 | margin:5px 0; 31 | letter-spacing:.1em; 32 | } 33 | 34 | h3 { 35 | font-size:1.6em; 36 | margin:10px 0 10px 10px; 37 | } 38 | 39 | a:link,a:visited { 40 | color:#7097af; 41 | text-decoration:none; 42 | } 43 | 44 | a:hover { 45 | color:#7DBADF; 46 | } 47 | 48 | a img { 49 | border:none; 50 | } 51 | 52 | p { 53 | margin:0 0 10px 8px; 54 | font-size:1.5em; 55 | font-weight:400; 56 | line-height:1.6em; 57 | } 58 | 59 | .lead { 60 | font-size:2em; 61 | margin-bottom:40px; 62 | } 63 | 64 | .clear { 65 | clear:both; 66 | line-height:0; 67 | font-size:0; 68 | } -------------------------------------------------------------------------------- /css/responsive.css: -------------------------------------------------------------------------------- 1 | /* Smartphones (landscape and portrait) ----------- */ 2 | @media screen and (max-width: 768px) { 3 | 4 | * { 5 | max-width: 460px; 6 | } 7 | 8 | body { 9 | font-size: large; 10 | } 11 | 12 | .container { 13 | padding:10px; 14 | } 15 | 16 | div.timelineToggle { 17 | float:none; 18 | } 19 | 20 | .timelineEvent div.media { 21 | display:none; 22 | float:none; 23 | } 24 | 25 | .timelineMinor dt { 26 | font-size:1.2em; 27 | white-space: normal; 28 | } 29 | 30 | .timelineMinor dd h3 { 31 | font-size:1em; 32 | white-space: normal; 33 | } 34 | 35 | div#timelineContainer { 36 | } 37 | 38 | .timelineMinor dd { 39 | margin-left:20px; 40 | padding-left:0; 41 | width:100%; 42 | } 43 | 44 | .timelineEvent .media p { 45 | font-size:1em; 46 | } 47 | 48 | dl.timelineMinor { 49 | float:none; 50 | max-width:80%; 51 | } 52 | 53 | .timelineEvent p { 54 | float:none; 55 | width:100%; 56 | } 57 | 58 | .timelineEvent blockquote { 59 | float:none; 60 | width:200px; 61 | font-size:1em; 62 | } 63 | } 64 | /* Smartphones (portrait) ----------- */ 65 | @media only screen and (max-width : 320px) { 66 | 67 | * { 68 | max-width: 300px; 69 | } 70 | 71 | } -------------------------------------------------------------------------------- /css/responsive.min.css: -------------------------------------------------------------------------------- 1 | @media screen and (max-width:768px){*{max-width:460px}body{font-size:large}.container{padding:10px}div.timelineToggle{float:none}.timelineEvent div.media{display:none;float:none}.timelineMinor dt{font-size:1.2em;white-space:normal}.timelineMinor dd h3{font-size:1em;white-space:normal}.timelineMinor dd{margin-left:20px;padding-left:0;width:100%}.timelineEvent .media p{font-size:1em}dl.timelineMinor{float:none;max-width:80%}.timelineEvent p{float:none;width:100%}.timelineEvent blockquote{float:none;width:200px;font-size:1em}}@media only screen and (max-width :320px){*{max-width:300px}} -------------------------------------------------------------------------------- /css/timeliner.css: -------------------------------------------------------------------------------- 1 | /* ============ TIMELINER.JS ============= */ 2 | .timeline-container { 3 | border-left: 2px solid #ccc; 4 | margin: 20px auto; 5 | width: 900px; 6 | } 7 | .timeline-toggle { 8 | background: #000; 9 | border-color: #161616; 10 | -webkit-border-radius: 4px; 11 | -moz-border-radius: 4px; 12 | border-radius: 4px; 13 | color: #ccc; 14 | cursor: pointer; 15 | float: right; 16 | font-size: 12px; 17 | margin-right: 0; 18 | padding: 3px 5px; 19 | white-space: nowrap; 20 | } 21 | .timeline-wrapper { 22 | clear: left; 23 | float: left; 24 | margin: 0 0 12px; 25 | width: 900px; 26 | } 27 | .timeline-wrapper h2 { 28 | background: url(../images/timeline_century_tick.gif) left center no-repeat; 29 | font-family: Palatino, "Times New Roman", Times, serif; 30 | cursor: pointer; 31 | font-size: 3em; 32 | font-weight: 400; 33 | margin: 0 0 10px; 34 | padding: 4px 4px 4px 20px; 35 | } 36 | .timeline-wrapper h2 span { 37 | background: #ccc; 38 | -webkit-border-radius: 4px; 39 | -moz-border-radius: 4px; 40 | border-radius: 4px; 41 | color: #131313; 42 | letter-spacing: 0.1em; 43 | line-height: 1.7em; 44 | padding: 3px 5px 1px; 45 | } 46 | .timeline-series { 47 | clear: left; 48 | float: left; 49 | margin: 0 12px 0 0; 50 | padding: 4px 4px 4px 0; 51 | position: relative; 52 | width: 880px; 53 | } 54 | .timeline-series dt { 55 | background: url(../images/timeline_decade_tick.gif) left center no-repeat; 56 | clear: left; 57 | font-size: 1.6em; 58 | list-style-type: none; 59 | line-height: 1.2em; 60 | margin: 0 0 12px; 61 | padding: 0 0 0 24px; 62 | white-space: nowrap; 63 | } 64 | .timeline-series dt a { 65 | color: #999; 66 | cursor: pointer; 67 | } 68 | .timeline-series dt a .closed { 69 | color: #999; 70 | font-size: 1em; 71 | margin-left: 0; 72 | } 73 | .timeline-series dt a .open { 74 | color: #7DBADF; 75 | } 76 | .timeline-series dt a:hover { 77 | color: #7DBADF; 78 | } 79 | .timeline-series dd { 80 | padding-left: 24px; 81 | width: 100%; 82 | } 83 | .timeline-series dd h3 { 84 | color: #FFF; 85 | clear: both; 86 | float: left; 87 | font-size: 1.5em; 88 | margin: 0; 89 | white-space: nowrap; 90 | } 91 | .timeline-event-content { 92 | display: none; 93 | } 94 | .timeline-event-content p { 95 | clear: left; 96 | float: left; 97 | line-height: 1.5em; 98 | margin: 6px 0 10px; 99 | width: 500px; 100 | } 101 | .timeline-event-content h4 { 102 | clear: left; 103 | float: left; 104 | font-size: 1.4em; 105 | font-weight: 400; 106 | margin: 10px 0 0; 107 | padding: 0 0 0 20px; 108 | } 109 | .timeline-event-content blockquote { 110 | border-left: 2px solid #ccc; 111 | clear: left; 112 | float: left; 113 | font-size: 1.8em; 114 | margin-left: 0; 115 | padding: 0 30px; 116 | width: 400px; 117 | } 118 | .timeline-event-content blockquote .attribution { 119 | font-size: 0.7em; 120 | text-align: right; 121 | } 122 | .timeline-event-content .media { 123 | float: right; 124 | padding: 0 0 12px; 125 | width: 300px; 126 | } 127 | .timeline-event-content .media img { 128 | border: 2px solid #000; 129 | margin: 0; 130 | } 131 | .timeline-event-content .media p { 132 | font-size: 1.2em; 133 | margin: 0; 134 | padding: 0; 135 | } 136 | .timeline-event-content .media a:link, 137 | .timeline-event-content .media a:visited { 138 | color: #ab221b; 139 | } 140 | .timeline-event-content .media a:hover { 141 | color: #7DBADF; 142 | } 143 | .clear { 144 | clear: both; 145 | } 146 | -------------------------------------------------------------------------------- /css/timeliner.less: -------------------------------------------------------------------------------- 1 | /* ============ TIMELINER.JS ============= */ 2 | 3 | .timeline-container { 4 | border-left:2px solid #ccc; 5 | margin:20px auto; 6 | width:900px; 7 | } 8 | 9 | .timeline-toggle { 10 | background:#000; 11 | border-color:#161616; 12 | -webkit-border-radius:4px; 13 | -moz-border-radius:4px; 14 | border-radius:4px; 15 | color:#ccc; 16 | cursor:pointer; 17 | float:right; 18 | font-size:12px; 19 | margin-right:0; 20 | padding:3px 5px; 21 | white-space:nowrap; 22 | } 23 | 24 | .timeline-wrapper { 25 | clear:left; 26 | float:left; 27 | margin:0 0 12px; 28 | width:900px; 29 | h2 { 30 | background:url(../images/timeline_century_tick.gif) left center no-repeat; 31 | font-family:Palatino,"Times New Roman", Times, serif; 32 | cursor: pointer; 33 | font-size:3em; 34 | font-weight:400; 35 | margin:0 0 10px; 36 | padding:4px 4px 4px 20px; 37 | span { 38 | background:#ccc; 39 | -webkit-border-radius:4px; 40 | -moz-border-radius:4px; 41 | border-radius:4px; 42 | color:#131313; 43 | letter-spacing:0.1em; 44 | line-height:1.7em; 45 | padding:3px 5px 1px; 46 | } 47 | } 48 | } 49 | 50 | .timeline-series { 51 | clear:left; 52 | float:left; 53 | margin:0 12px 0 0; 54 | padding:4px 4px 4px 0; 55 | position:relative; 56 | width:880px; 57 | dt { 58 | background:url(../images/timeline_decade_tick.gif) left center no-repeat; 59 | clear:left; 60 | font-size:1.6em; 61 | list-style-type:none; 62 | line-height:1.2em; 63 | margin:0 0 12px; 64 | padding:0 0 0 24px; 65 | white-space:nowrap; 66 | a { 67 | color:#999; 68 | cursor:pointer; 69 | .closed { 70 | color:#999; 71 | font-size:1em; 72 | margin-left:0; 73 | } 74 | .open { 75 | color:#7DBADF; 76 | } 77 | } 78 | a:hover { 79 | color:#7DBADF; 80 | } 81 | } 82 | dd { 83 | padding-left:24px; 84 | width:100%; 85 | h3 { 86 | color:#FFF; 87 | clear:both; 88 | float:left; 89 | font-size:1.5em; 90 | margin:0; 91 | white-space:nowrap; 92 | } 93 | } 94 | } 95 | 96 | .timeline-event-content { 97 | display:none; 98 | p { 99 | clear:left; 100 | float:left; 101 | line-height:1.5em; 102 | margin:6px 0 10px; 103 | width:500px; 104 | } 105 | h4 { 106 | clear:left; 107 | float:left; 108 | font-size:1.4em; 109 | font-weight:400; 110 | margin:10px 0 0; 111 | padding:0 0 0 20px; 112 | } 113 | blockquote { 114 | border-left:2px solid #ccc; 115 | clear:left; 116 | float:left; 117 | font-size:1.8em; 118 | margin-left:0; 119 | padding:0 30px; 120 | width:400px; 121 | .attribution { 122 | font-size:0.7em; 123 | text-align: right; 124 | } 125 | } 126 | .media { 127 | float:right; 128 | padding:0 0 12px; 129 | width:300px; 130 | img { 131 | border:2px solid #000; 132 | margin:0; 133 | } 134 | p { 135 | font-size:1.2em; 136 | margin:0; 137 | padding:0; 138 | } 139 | a:link, a:visited { 140 | color:#ab221b; 141 | } 142 | a:hover { 143 | color:#7DBADF; 144 | } 145 | } 146 | 147 | } 148 | 149 | .clear { 150 | clear:both; 151 | } -------------------------------------------------------------------------------- /css/timeliner.min.css: -------------------------------------------------------------------------------- 1 | .timeline-container{border-left:2px solid #ccc;margin:20px auto;width:900px}.timeline-toggle{background:#000;border-color:#161616;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;color:#ccc;cursor:pointer;float:right;font-size:12px;margin-right:0;padding:3px 5px;white-space:nowrap}.timeline-wrapper{clear:left;float:left;margin:0 0 12px;width:900px}.timeline-wrapper h2{background:url(../images/timeline_century_tick.gif) left center no-repeat;font-family:Palatino,"Times New Roman",Times,serif;cursor:pointer;font-size:3em;font-weight:400;margin:0 0 10px;padding:4px 4px 4px 20px}.timeline-wrapper h2 span{background:#ccc;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;color:#131313;letter-spacing:.1em;line-height:1.7em;padding:3px 5px 1px}.timeline-series{clear:left;float:left;margin:0 12px 0 0;padding:4px 4px 4px 0;position:relative;width:880px}.timeline-series dt{background:url(../images/timeline_decade_tick.gif) left center no-repeat;clear:left;font-size:1.6em;list-style-type:none;line-height:1.2em;margin:0 0 12px;padding:0 0 0 24px;white-space:nowrap}.timeline-series dt a{color:#999;cursor:pointer}.timeline-series dt a .closed{color:#999;font-size:1em;margin-left:0}.timeline-series dt a .open,.timeline-series dt a:hover{color:#7DBADF}.timeline-series dd{padding-left:24px;width:100%}.timeline-series dd h3{color:#FFF;clear:both;float:left;font-size:1.5em;margin:0;white-space:nowrap}.timeline-event-content{display:none}.timeline-event-content p{clear:left;float:left;line-height:1.5em;margin:6px 0 10px;width:500px}.timeline-event-content h4{clear:left;float:left;font-size:1.4em;font-weight:400;margin:10px 0 0;padding:0 0 0 20px}.timeline-event-content blockquote{border-left:2px solid #ccc;clear:left;float:left;font-size:1.8em;margin-left:0;padding:0 30px;width:400px}.timeline-event-content blockquote .attribution{font-size:.7em;text-align:right}.timeline-event-content .media{float:right;padding:0 0 12px;width:300px}.timeline-event-content .media img{border:2px solid #000;margin:0}.timeline-event-content .media p{font-size:1.2em;margin:0;padding:0}.timeline-event-content .media a:link,.timeline-event-content .media a:visited{color:#ab221b}.timeline-event-content .media a:hover{color:#7DBADF}.clear{clear:both} -------------------------------------------------------------------------------- /demo-future/css/timeliner-future.css: -------------------------------------------------------------------------------- 1 | @import url(https://fonts.googleapis.com/css?family=Josefin+Sans:100,400,700); 2 | /* ======= DEMO LAYOUT ======= */ 3 | body { 4 | background-color: #2f2f2f; 5 | color: #eeefef; 6 | font-size: 62.5%; 7 | font-family: Arial, Helvetica, sans-serif; 8 | margin: 0; 9 | padding: 0; 10 | } 11 | .container { 12 | width: 940px; 13 | margin-left: auto; 14 | margin-right: auto; 15 | padding: 10px; 16 | *zoom: 1; 17 | } 18 | h1 { 19 | color: #7DBADF; 20 | font-size: 36px; 21 | font-weight: 400; 22 | margin: 0; 23 | } 24 | h2 { 25 | font-size: 22px; 26 | font-weight: 400; 27 | margin: 5px 0; 28 | letter-spacing: .1em; 29 | } 30 | h3 { 31 | font-size: 1.6em; 32 | margin: 10px 0 10px 10px; 33 | } 34 | a:link, 35 | a:visited { 36 | color: #7097af; 37 | text-decoration: none; 38 | } 39 | a:hover { 40 | color: #7DBADF; 41 | } 42 | a img { 43 | border: none; 44 | } 45 | p { 46 | margin: 0 0 10px 8px; 47 | font-size: 1.5em; 48 | font-weight: 400; 49 | line-height: 1.6em; 50 | } 51 | .lead { 52 | font-size: 2em; 53 | margin-bottom: 40px; 54 | } 55 | .clear { 56 | clear: both; 57 | line-height: 0; 58 | font-size: 0; 59 | } 60 | body { 61 | background: #090a0f url("../img/bg-space-mod.jpg") no-repeat bottom right fixed; 62 | -webkit-background-size: cover; 63 | -moz-background-size: cover; 64 | -o-background-size: cover; 65 | background-size: cover; 66 | color: rgba(255, 255, 255, 0.85); 67 | font-family: "Josefin Sans", arial, sans serif; 68 | font-size: 68.5%; 69 | padding: 40px 0; 70 | } 71 | h1 { 72 | color: #78a8b2; 73 | font-size: 4.8em; 74 | font-weight: 400; 75 | text-transform: uppercase; 76 | } 77 | h2 { 78 | font-size: 3.6em; 79 | font-weight: 400; 80 | text-transform: uppercase; 81 | } 82 | .step1 { 83 | color: rgba(255, 255, 255, 0.2); 84 | } 85 | .step2 { 86 | color: rgba(255, 255, 255, 0.4); 87 | } 88 | .step3 { 89 | color: rgba(255, 255, 255, 0.6); 90 | } 91 | .lead { 92 | color: rgba(255, 255, 255, 0.6); 93 | } 94 | a:hover, 95 | a:link, 96 | a:visited { 97 | color: #78a8b2; 98 | } 99 | .timeline-container { 100 | border-left: 4px solid rgba(0, 69, 121, 0.65); 101 | margin: 20px auto; 102 | width: 900px; 103 | } 104 | .timeline-container-tick { 105 | background: rgba(0, 69, 121, 0.65); 106 | content: ""; 107 | display: block; 108 | height: 4px; 109 | left: -8px; 110 | width: 14px; 111 | position: relative; 112 | } 113 | .timeline-container::before { 114 | background: rgba(0, 69, 121, 0.65); 115 | content: ""; 116 | display: block; 117 | height: 4px; 118 | left: -8px; 119 | width: 14px; 120 | position: relative; 121 | top: -4px; 122 | } 123 | .timeline-container::after { 124 | background: rgba(0, 69, 121, 0.65); 125 | content: ""; 126 | display: block; 127 | height: 4px; 128 | left: -8px; 129 | width: 14px; 130 | position: relative; 131 | top: 4px; 132 | } 133 | .timeline-toggle { 134 | background: rgba(23, 66, 98, 0.65); 135 | border: 0; 136 | -webkit-border-radius: 4px; 137 | -moz-border-radius: 4px; 138 | border-radius: 4px; 139 | color: rgba(255, 255, 255, 0.85); 140 | cursor: pointer; 141 | float: right; 142 | font-size: 12px; 143 | margin-right: 0; 144 | padding: 10px 15px; 145 | text-transform: uppercase; 146 | white-space: nowrap; 147 | } 148 | .timeline-toggle:hover { 149 | background: rgba(119, 0, 63, 0.8); 150 | -webkit-transition: background 0.2s ease-in; 151 | -moz-transition: background 0.2s ease-in; 152 | -o-transition: background 0.2s ease-in; 153 | transition: background 0.2s ease-in; 154 | } 155 | .timeline-toggle:focus { 156 | outline: none; 157 | } 158 | .timeline-wrapper { 159 | clear: left; 160 | float: left; 161 | margin: 0 0 12px; 162 | width: 900px; 163 | } 164 | .timeline-wrapper .timeline-time::before { 165 | border-top: 4px solid rgba(0, 69, 121, 0.65); 166 | content: ""; 167 | display: inline-block; 168 | height: 4px; 169 | margin-right: 0px; 170 | vertical-align: middle; 171 | width: 24px; 172 | } 173 | .timeline-wrapper .timeline-time { 174 | cursor: pointer; 175 | font-size: 2.8em; 176 | font-weight: 400; 177 | margin: 0 0 30px 0; 178 | padding: 0; 179 | } 180 | .timeline-wrapper .timeline-time span { 181 | background: rgba(0, 69, 121, 0.65); 182 | -moz-border-radius: 10px; 183 | border-radius: 10px; 184 | color: rgba(255, 255, 255, 0.85); 185 | display: inline-block; 186 | letter-spacing: 0; 187 | padding: 10px 10px 5px 10px; 188 | text-align: center; 189 | } 190 | .timeline-wrapper .timeline-time span:hover { 191 | background: rgba(0, 69, 121, 0.95); 192 | -webkit-transition: background 0.2s ease-in; 193 | -moz-transition: background 0.2s ease-in; 194 | -o-transition: background 0.2s ease-in; 195 | transition: background 0.2s ease-in; 196 | } 197 | .timeline-series { 198 | clear: left; 199 | float: left; 200 | margin: 0 12px 0 0; 201 | padding: 4px 4px 4px 0; 202 | position: relative; 203 | width: 880px; 204 | } 205 | .timeline-series dt::before { 206 | border-top: 3px solid rgba(0, 69, 121, 0.65); 207 | content: ""; 208 | display: inline-block; 209 | height: 3px; 210 | margin-right: 10px; 211 | vertical-align: middle; 212 | width: 10px; 213 | } 214 | .timeline-series dt { 215 | clear: left; 216 | font-size: 2em; 217 | line-height: 1.2em; 218 | margin: 0 0 12px; 219 | text-transform: uppercase; 220 | white-space: nowrap; 221 | } 222 | .timeline-series dt a { 223 | color: rgba(255, 255, 255, 0.4); 224 | cursor: pointer; 225 | } 226 | .timeline-series dt a .closed { 227 | color: #999; 228 | font-size: 1em; 229 | margin-left: 0; 230 | } 231 | .timeline-series dt a .open { 232 | color: #7DBADF; 233 | } 234 | .timeline-series dt a:hover { 235 | color: rgba(255, 255, 255, 0.6); 236 | -webkit-transition: color 0.2s ease-in; 237 | -moz-transition: color 0.2s ease-in; 238 | -o-transition: color 0.2s ease-in; 239 | transition: color 0.2s ease-in; 240 | } 241 | .timeline-series dd { 242 | padding-left: 24px; 243 | width: 100%; 244 | } 245 | .timeline-series dd h3 { 246 | color: #FFF; 247 | clear: both; 248 | float: left; 249 | font-size: 1.5em; 250 | margin: 0; 251 | white-space: nowrap; 252 | } 253 | .tick { 254 | background: rgba(0, 69, 121, 0.65); 255 | clear: both; 256 | display: block; 257 | height: 2px; 258 | left: 0; 259 | width: 4px; 260 | position: relative; 261 | } 262 | .tick-before { 263 | top: -6px; 264 | } 265 | .tick-after { 266 | top: -4px; 267 | } 268 | .timeline-event-content { 269 | display: none; 270 | margin-bottom: 40px; 271 | } 272 | .timeline-event-content p { 273 | clear: left; 274 | float: left; 275 | font-size: 2em; 276 | font-weight: 100; 277 | line-height: 1.2em; 278 | margin: 6px 0 10px; 279 | width: 500px; 280 | } 281 | .timeline-event-content h4 { 282 | clear: left; 283 | float: left; 284 | font-size: 1.4em; 285 | font-weight: 400; 286 | margin: 10px 0 0; 287 | padding: 0 0 0 20px; 288 | } 289 | .timeline-event-content blockquote { 290 | border-left: 2px solid #174262; 291 | clear: left; 292 | float: left; 293 | line-height: 1.2em; 294 | margin-left: 0; 295 | padding: 0 30px; 296 | width: 400px; 297 | } 298 | .timeline-event-content blockquote .attribution { 299 | font-size: 0.7em; 300 | text-align: right; 301 | } 302 | .timeline-event-content .media { 303 | float: right; 304 | padding: 0 0 12px; 305 | width: 300px; 306 | } 307 | .timeline-event-content .media img { 308 | border: 2px solid rgba(255, 255, 255, 0.85); 309 | border-radius: 100px; 310 | height: 200px; 311 | margin: 0; 312 | width: 200px; 313 | } 314 | .timeline-event-content .media p { 315 | clear: both; 316 | font-size: 1.4em; 317 | margin: 15px 0; 318 | } 319 | .timeline-event-content .media p a { 320 | text-transform: lowercase; 321 | } 322 | -------------------------------------------------------------------------------- /demo-future/css/timeliner-future.less: -------------------------------------------------------------------------------- 1 | @import url(https://fonts.googleapis.com/css?family=Josefin+Sans:100,400,700); 2 | @import "/css/demo.less"; 3 | 4 | @color-body: #090A0F; 5 | @color-time:saturate(fade(@color-accent,65%),50%); 6 | @color-ink: fade(#FFF,85%); 7 | @color-accent: #174262; 8 | @color-accent-2: #78A8B2; 9 | @color-contrast: #FF2A9C; 10 | @font: "Josefin Sans",arial,sans serif; 11 | @background-img: "../img/bg-space-mod.jpg"; 12 | 13 | body { 14 | background: @color-body url(@background-img) no-repeat bottom right fixed; 15 | -webkit-background-size: cover; 16 | -moz-background-size: cover; 17 | -o-background-size: cover; 18 | background-size: cover; 19 | color: @color-ink; 20 | font-family:@font; 21 | font-size:68.5%; 22 | padding:40px 0; 23 | } 24 | 25 | h1 { 26 | color:@color-accent-2; 27 | font-size:4.8em; 28 | font-weight: 400; 29 | text-transform: uppercase; 30 | } 31 | 32 | h2 { 33 | font-size:3.6em; 34 | font-weight: 400; 35 | text-transform: uppercase; 36 | } 37 | 38 | .step1 { color:fade(@color-ink,20%); } 39 | .step2 { color:fade(@color-ink,40%); } 40 | .step3 { color:fade(@color-ink,60%); } 41 | 42 | .lead { 43 | .step3; 44 | } 45 | 46 | a:hover,a:link,a:visited { 47 | color:@color-accent-2; 48 | } 49 | 50 | .timeline-container { 51 | border-left:4px solid @color-time; 52 | margin:20px auto; 53 | width:900px; 54 | } 55 | 56 | .timeline-container-tick { 57 | background: @color-time; 58 | content:""; 59 | display:block; 60 | height:4px; 61 | left:-8px; 62 | width:14px; 63 | position:relative; 64 | } 65 | 66 | .timeline-container::before { 67 | .timeline-container-tick; 68 | top:-4px; 69 | } 70 | .timeline-container::after { 71 | .timeline-container-tick; 72 | top:4px; 73 | } 74 | 75 | .timeline-toggle { 76 | background:fade(@color-accent,65%); 77 | border:0; 78 | -webkit-border-radius:4px; 79 | -moz-border-radius:4px; 80 | border-radius:4px; 81 | color:@color-ink; 82 | cursor:pointer; 83 | float:right; 84 | font-size:12px; 85 | margin-right:0; 86 | padding:10px 15px; 87 | text-transform: uppercase; 88 | white-space:nowrap; 89 | } 90 | .timeline-toggle:hover { 91 | background: fade(darken(@color-contrast,35%),80%); 92 | -webkit-transition:background 0.2s ease-in; 93 | -moz-transition:background 0.2s ease-in; 94 | -o-transition:background 0.2s ease-in; 95 | transition:background 0.2s ease-in; 96 | } 97 | .timeline-toggle:focus { 98 | outline:none; 99 | } 100 | 101 | 102 | .timeline-wrapper { 103 | clear:left; 104 | float:left; 105 | margin:0 0 12px; 106 | width:900px; 107 | .timeline-time::before { 108 | border-top:4px solid @color-time; 109 | content: ""; 110 | display:inline-block; 111 | height:4px; 112 | margin-right:0px; 113 | vertical-align: middle; 114 | width:24px; 115 | } 116 | .timeline-time { 117 | cursor: pointer; 118 | font-size:2.8em; 119 | font-weight:400; 120 | margin:0 0 30px 0; 121 | padding:0; 122 | span { 123 | background: @color-time; 124 | -moz-border-radius: 10px; 125 | border-radius: 10px; 126 | color:@color-ink; 127 | display: inline-block; 128 | letter-spacing:0; 129 | padding:10px 10px 5px 10px; 130 | text-align: center; 131 | } 132 | span:hover { 133 | background: fade(@color-time,95%); 134 | -webkit-transition:background 0.2s ease-in; 135 | -moz-transition:background 0.2s ease-in; 136 | -o-transition:background 0.2s ease-in; 137 | transition:background 0.2s ease-in; 138 | } 139 | 140 | } 141 | } 142 | 143 | 144 | .timeline-series { 145 | clear:left; 146 | float:left; 147 | margin:0 12px 0 0; 148 | padding:4px 4px 4px 0; 149 | position:relative; 150 | width:880px; 151 | dt::before { 152 | border-top:3px solid @color-time; 153 | content: ""; 154 | display:inline-block; 155 | height:3px; 156 | margin-right:10px; 157 | vertical-align: middle; 158 | width:10px; 159 | } 160 | dt { 161 | clear:left; 162 | font-size:2em; 163 | line-height:1.2em; 164 | margin:0 0 12px; 165 | text-transform: uppercase; 166 | white-space:nowrap; 167 | a { 168 | .step2; 169 | cursor:pointer; 170 | .closed { 171 | color:#999; 172 | font-size:1em; 173 | margin-left:0; 174 | } 175 | .open { 176 | color:#7DBADF; 177 | } 178 | } 179 | a:hover { 180 | .step3; 181 | -webkit-transition:color 0.2s ease-in; 182 | -moz-transition:color 0.2s ease-in; 183 | -o-transition:color 0.2s ease-in; 184 | transition:color 0.2s ease-in; 185 | } 186 | } 187 | dd { 188 | padding-left:24px; 189 | width:100%; 190 | h3 { 191 | color:#FFF; 192 | clear:both; 193 | float:left; 194 | font-size:1.5em; 195 | margin:0; 196 | white-space:nowrap; 197 | } 198 | } 199 | } 200 | 201 | .tick { 202 | background:@color-time; 203 | clear:both; 204 | display:block; 205 | height:2px; 206 | left:0; 207 | width:4px; 208 | position:relative; 209 | } 210 | 211 | .tick-before { 212 | top: -6px; 213 | } 214 | 215 | .tick-after { 216 | top:-4px; 217 | } 218 | 219 | 220 | .timeline-event-content { 221 | display:none; 222 | margin-bottom:40px; 223 | p { 224 | clear:left; 225 | float:left; 226 | font-size:2em; 227 | font-weight: 100; 228 | line-height:1.2em; 229 | margin:6px 0 10px; 230 | width:500px; 231 | } 232 | h4 { 233 | clear:left; 234 | float:left; 235 | font-size:1.4em; 236 | font-weight:400; 237 | margin:10px 0 0; 238 | padding:0 0 0 20px; 239 | } 240 | blockquote { 241 | border-left:2px solid @color-accent; 242 | clear:left; 243 | float:left; 244 | line-height: 1.2em; 245 | margin-left:0; 246 | padding:0 30px; 247 | width:400px; 248 | .attribution { 249 | font-size:0.7em; 250 | text-align: right; 251 | } 252 | } 253 | .media { 254 | float:right; 255 | padding:0 0 12px; 256 | width:300px; 257 | img { 258 | border:2px solid @color-ink; 259 | border-radius:100px; 260 | height:200px; 261 | margin:0; 262 | width:200px; 263 | } 264 | p { 265 | clear:both; 266 | font-size:1.4em; 267 | margin:15px 0; 268 | a { 269 | text-transform: lowercase; 270 | } 271 | } 272 | a:link, a:visited { 273 | } 274 | a:hover { 275 | } 276 | } 277 | 278 | } 279 | -------------------------------------------------------------------------------- /demo-future/img/bg-space-mod.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/technotarek/timeliner/82321f03f17e1fa765c956e111124953a8c1c376/demo-future/img/bg-space-mod.jpg -------------------------------------------------------------------------------- /demo-future/img/event-cars.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/technotarek/timeliner/82321f03f17e1fa765c956e111124953a8c1c376/demo-future/img/event-cars.jpg -------------------------------------------------------------------------------- /demo-future/img/event-robots.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/technotarek/timeliner/82321f03f17e1fa765c956e111124953a8c1c376/demo-future/img/event-robots.jpg -------------------------------------------------------------------------------- /demo-future/img/event-singularity.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/technotarek/timeliner/82321f03f17e1fa765c956e111124953a8c1c376/demo-future/img/event-singularity.gif -------------------------------------------------------------------------------- /demo-future/img/event-teleportation.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/technotarek/timeliner/82321f03f17e1fa765c956e111124953a8c1c376/demo-future/img/event-teleportation.jpg -------------------------------------------------------------------------------- /demo-future/img/event-urbanity.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/technotarek/timeliner/82321f03f17e1fa765c956e111124953a8c1c376/demo-future/img/event-urbanity.jpg -------------------------------------------------------------------------------- /demo-future/timeliner-future.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Timeliner.js Demo 6 | 7 | 8 | 9 | 10 | 11 |
12 |

Timeliner.js

13 |

Into The Future

14 | 15 |

Example of the timeliner.js jquery plugin with advanced, custom theming. All theming accomplished with CSS and minor modifications to the HTML markup. No modifications to the plugin's core javascript. Note that this demonstration does not fully support older browsers (e.g, before Internet Explorer 9) due to the use of CSS3 properties. Also view the original demo.

16 | 17 |
18 | 19 | 20 | 21 |
22 | 23 |
24 |

2000

25 |
26 | 27 |
Robots
28 | 29 |
30 |
31 | singing robots 32 |

Listen

33 |
34 | 35 |
36 |

The world is very different ever since the robotic uprising of the mid-nineties. There is no more unhappiness.

37 |

Affirmative.

38 |

We no longer say yes, instead we say affirmative.

39 |

Yes, affirmative.

40 |

Unless its a more colloquial situation with a few robo friends.

41 |

There is only one type of dance, the robot.

42 |

And the robo-boogie.

43 |

Oh yes, two kinds of dances.

44 |
45 | 46 |
47 |
48 | 49 | 50 |
51 |
52 | 53 | 54 |
55 |

2062

56 |
57 | 58 |
Flying Cars
59 | 60 |
61 |
62 | flying car 63 |

See it in Action

64 |
65 | 66 |

A flying car is hypothetical personal aircraft that provides door-to-door aerial transportation (e.g., from home to work or to the supermarket) as conveniently as a car but without the requirement for roads, runways or other specially-prepared operating areas.

67 |

The flying car has been depicted in works of fantasy and science fiction such as The Jetsons, Star Wars, Blade Runner, Back to the Future Part II and The Fifth Element. The Jetsons took place in 2062.

68 | 69 |
70 |
71 | 72 | 73 |
Aged Urbanity
74 | 75 |
76 |
77 | jam packed city fuels tempers 78 |

read the predictions

79 |
80 | 81 |

From Discover magazine's "The State of the World: 2062":

82 | 83 |
84 |

6 billion people live in cities—the population of the entire world at the turn of the century.

85 |
86 |
87 |

Earth now home to 2 billion people age 60 and over.

88 |
89 |
90 |

Coastal cities go under. Renewable energy rules the day. Cows use up precious water and drive the ongoing greenhouse effect.

91 |
92 |
93 |

Incomes skyrocket in developing nations.

94 |
95 |
96 |


Ice caps melt. Industry booms at top of the world.

97 | 98 |
99 |
100 | 101 | 102 |
103 |
104 | 105 |
106 |

2265

107 |
108 | 109 |
Teleportation
110 | 111 |
112 | 113 |
114 | teleporting humans 115 |

Try It Now

116 |
117 | 118 |

Teleportation, or Teletransportation, is the theoretical transfer of matter or energy from one point to another without traversing the physical space between them. It is a common subject of science fiction literature, film, and television.

119 | 120 |

The original Star Trek series is reported to have taken place from 2265 to 2271.

121 | 122 |
123 |
124 |
125 | 126 |
127 | 128 |
129 |

2888

130 |
131 | 132 |
Singularity
133 | 134 |
135 | 136 |
137 | 138 | 139 |
140 | 141 |

The technological singularity hypothesis is that accelerating progress in technologies will cause a runaway effect wherein artificial intelligence will exceed human intellectual capacity and control, thus radically changing or even ending civilization in an event called the singularity.

142 | 143 |
144 |
145 |
146 |
147 | 148 | 149 | 150 |
151 | 152 |
153 | 154 |
155 | 156 | 157 | 158 | 159 | 160 | 169 | 170 | 171 | -------------------------------------------------------------------------------- /images/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/technotarek/timeliner/82321f03f17e1fa765c956e111124953a8c1c376/images/.DS_Store -------------------------------------------------------------------------------- /images/timeline_century_tick.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/technotarek/timeliner/82321f03f17e1fa765c956e111124953a8c1c376/images/timeline_century_tick.gif -------------------------------------------------------------------------------- /images/timeline_decade_tick.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/technotarek/timeliner/82321f03f17e1fa765c956e111124953a8c1c376/images/timeline_decade_tick.gif -------------------------------------------------------------------------------- /inc/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/technotarek/timeliner/82321f03f17e1fa765c956e111124953a8c1c376/inc/.DS_Store -------------------------------------------------------------------------------- /inc/colorbox.css: -------------------------------------------------------------------------------- 1 | /* 2 | Colorbox Core Style: 3 | The following CSS is consistent between example themes and should not be altered. 4 | */ 5 | #colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;} 6 | #cboxOverlay{position:fixed; width:100%; height:100%;} 7 | #cboxMiddleLeft, #cboxBottomLeft{clear:left;} 8 | #cboxContent{position:relative;} 9 | #cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;} 10 | #cboxTitle{margin:0;} 11 | #cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;} 12 | #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;} 13 | .cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;} 14 | .cboxIframe{width:100%; height:100%; display:block; border:0;} 15 | #colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;} 16 | 17 | /* 18 | User Style: 19 | Change the following styles to modify the appearance of Colorbox. They are 20 | ordered & tabbed in a way that represents the nesting of the generated HTML. 21 | */ 22 | #cboxOverlay{background:url(images/overlay.png) repeat 0 0;} 23 | #colorbox{outline:0;} 24 | #cboxTopLeft{width:21px; height:21px; background:url(images/controls.png) no-repeat -101px 0;} 25 | #cboxTopRight{width:21px; height:21px; background:url(images/controls.png) no-repeat -130px 0;} 26 | #cboxBottomLeft{width:21px; height:21px; background:url(images/controls.png) no-repeat -101px -29px;} 27 | #cboxBottomRight{width:21px; height:21px; background:url(images/controls.png) no-repeat -130px -29px;} 28 | #cboxMiddleLeft{width:21px; background:url(images/controls.png) left top repeat-y;} 29 | #cboxMiddleRight{width:21px; background:url(images/controls.png) right top repeat-y;} 30 | #cboxTopCenter{height:21px; background:url(images/border.png) 0 0 repeat-x;} 31 | #cboxBottomCenter{height:21px; background:url(images/border.png) 0 -29px repeat-x;} 32 | #cboxContent{background:#fff; overflow:hidden;} 33 | .cboxIframe{background:#fff;} 34 | #cboxError{padding:50px; border:1px solid #ccc;} 35 | #cboxLoadedContent{margin-bottom:28px;} 36 | #cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;} 37 | #cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;} 38 | #cboxLoadingOverlay{background:url(images/loading_background.png) no-repeat center center;} 39 | #cboxLoadingGraphic{background:url(images/loading.gif) no-repeat center center;} 40 | 41 | /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */ 42 | #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; } 43 | 44 | /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */ 45 | #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;} 46 | 47 | #cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;} 48 | #cboxPrevious{position:absolute; bottom:0; left:0; background:url(images/controls.png) no-repeat -75px 0; width:25px; height:25px; text-indent:-9999px;} 49 | #cboxPrevious:hover{background-position:-75px -25px;} 50 | #cboxNext{position:absolute; bottom:0; left:27px; background:url(images/controls.png) no-repeat -50px 0; width:25px; height:25px; text-indent:-9999px;} 51 | #cboxNext:hover{background-position:-50px -25px;} 52 | #cboxClose{position:absolute; bottom:0; right:0; background:url(images/controls.png) no-repeat -25px 0; width:25px; height:25px; text-indent:-9999px;} 53 | #cboxClose:hover{background-position:-25px -25px;} 54 | 55 | /* 56 | The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill 57 | when an alpha filter (opacity change) is set on the element or ancestor element. This style is not applied to or needed in IE9. 58 | See: http://jacklmoore.com/notes/ie-transparency-problems/ 59 | */ 60 | .cboxIE #cboxTopLeft, 61 | .cboxIE #cboxTopCenter, 62 | .cboxIE #cboxTopRight, 63 | .cboxIE #cboxBottomLeft, 64 | .cboxIE #cboxBottomCenter, 65 | .cboxIE #cboxBottomRight, 66 | .cboxIE #cboxMiddleLeft, 67 | .cboxIE #cboxMiddleRight { 68 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF); 69 | } -------------------------------------------------------------------------------- /inc/colorbox.js: -------------------------------------------------------------------------------- 1 | /*! 2 | jQuery Colorbox v1.4.15 - 2013-04-22 3 | (c) 2013 Jack Moore - jacklmoore.com/colorbox 4 | license: http://www.opensource.org/licenses/mit-license.php 5 | */ 6 | (function(t,e,i){function o(i,o,n){var r=e.createElement(i);return o&&(r.id=te+o),n&&(r.style.cssText=n),t(r)}function n(){return i.innerHeight?i.innerHeight:t(i).height()}function r(t){var e=H.length,i=(j+t)%e;return 0>i?e+i:i}function h(t,e){return Math.round((/%/.test(t)?("x"===e?E.width():n())/100:1)*parseInt(t,10))}function l(t,e){return t.photo||t.photoRegex.test(e)}function s(t,e){return t.retinaUrl&&i.devicePixelRatio>1?e.replace(t.photoRegex,t.retinaSuffix):e}function a(t){"contains"in x[0]&&!x[0].contains(t.target)&&(t.stopPropagation(),x.focus())}function d(){var e,i=t.data(A,Z);null==i?(_=t.extend({},Y),console&&console.log&&console.log("Error: cboxElement missing settings object")):_=t.extend({},i);for(e in _)t.isFunction(_[e])&&"on"!==e.slice(0,2)&&(_[e]=_[e].call(A));_.rel=_.rel||A.rel||t(A).data("rel")||"nofollow",_.href=_.href||t(A).attr("href"),_.title=_.title||A.title,"string"==typeof _.href&&(_.href=t.trim(_.href))}function c(i,o){t(e).trigger(i),se.trigger(i),t.isFunction(o)&&o.call(A)}function u(){var t,e,i,o,n,r=te+"Slideshow_",h="click."+te;_.slideshow&&H[1]?(e=function(){clearTimeout(t)},i=function(){(_.loop||H[j+1])&&(t=setTimeout(J.next,_.slideshowSpeed))},o=function(){M.html(_.slideshowStop).unbind(h).one(h,n),se.bind(ne,i).bind(oe,e).bind(re,n),x.removeClass(r+"off").addClass(r+"on")},n=function(){e(),se.unbind(ne,i).unbind(oe,e).unbind(re,n),M.html(_.slideshowStart).unbind(h).one(h,function(){J.next(),o()}),x.removeClass(r+"on").addClass(r+"off")},_.slideshowAuto?o():n()):x.removeClass(r+"off "+r+"on")}function f(i){G||(A=i,d(),H=t(A),j=0,"nofollow"!==_.rel&&(H=t("."+ee).filter(function(){var e,i=t.data(this,Z);return i&&(e=t(this).data("rel")||i.rel||this.rel),e===_.rel}),j=H.index(A),-1===j&&(H=H.add(A),j=H.length-1)),g.css({opacity:parseFloat(_.opacity),cursor:_.overlayClose?"pointer":"auto",visibility:"visible"}).show(),V&&x.add(g).removeClass(V),_.className&&x.add(g).addClass(_.className),V=_.className,K.html(_.close).show(),$||($=q=!0,x.css({visibility:"hidden",display:"block"}),W=o(ae,"LoadedContent","width:0; height:0; overflow:hidden").appendTo(v),D=b.height()+k.height()+v.outerHeight(!0)-v.height(),B=C.width()+T.width()+v.outerWidth(!0)-v.width(),N=W.outerHeight(!0),z=W.outerWidth(!0),_.w=h(_.initialWidth,"x"),_.h=h(_.initialHeight,"y"),J.position(),u(),c(ie,_.onOpen),O.add(F).hide(),x.focus(),e.addEventListener&&(e.addEventListener("focus",a,!0),se.one(he,function(){e.removeEventListener("focus",a,!0)})),_.returnFocus&&se.one(he,function(){t(A).focus()})),w())}function p(){!x&&e.body&&(X=!1,E=t(i),x=o(ae).attr({id:Z,"class":t.support.opacity===!1?te+"IE":"",role:"dialog",tabindex:"-1"}).hide(),g=o(ae,"Overlay").hide(),S=o(ae,"LoadingOverlay").add(o(ae,"LoadingGraphic")),y=o(ae,"Wrapper"),v=o(ae,"Content").append(F=o(ae,"Title"),I=o(ae,"Current"),P=t(' 24 | 25 |
26 | 27 |
28 |

1954

29 |
30 |
Brown v. Board of Education
31 |
32 |

May 17, 1954

33 |

34 | The U.S. Supreme Court hands down a unanimous 9-0 decision in the Brown v. Board of Education of Topeka case, opening the door for the civil rights movement and ultimately racial integration in all aspects of U.S. society. In overturning Plessy v. Ferguson (1896), the court rules that “separate educational facilities are inherently unequal.”

35 | 36 |
37 |
38 |
39 |
40 | 41 |
42 |

1955

43 |
44 |
Emmett Till
45 |
46 |

August 28, 1955

47 | 48 |
49 | Related Video: The Emmett Till Murder 50 |

Watch: The Emmett Till Murder

51 |
52 | 60 |
61 |
62 | 63 |

64 | Fourteen-year-old African-American Emmett Till is brutally murdered after reportedly flirting with a white woman while visiting relatives in Mississippi. For the first time, both black and white reporters cover the trial epitomizing "one of the most shocking and enduring stories of the twentieth century." The white defendants, Roy Bryant and J.W. Milam, are acquitted by an all-white jury in only 67 minutes; later they describe in full detail to Look magazine (which paid them $4,000) how they killed Till. His mother insists on an open casket funeral, and the powerful image of his mutilated body sparks a strong reaction across the country and the world.

65 | 66 |
67 |
68 |
Rosa Parks
69 |
70 |

December 1, 1955

71 |

72 | The arrest of Rosa Parks, a 42-year-old African-American seamstress and civil rights activist who refused to give up her bus seat to a white passenger, sets off a long anticipated bus boycott by residents of Montgomery, Ala. The 13-month protest and ensuing litigation eventually make it to the U.S. Supreme Court, which declares that segregation on public buses is unconstitutional. The Montgomery bus boycott brings the Rev. Dr. Martin Luther King Jr. and his nonviolent approach to social change to the forefront of the civil rights movement.

73 | 74 |
75 |
76 |
77 |
78 | 79 |
80 |

1957

81 |
82 |
Little Rock
83 |
84 |

September 4, 1957

85 | 86 |
87 | Related Video: Reporting Little Rock 88 |

Watch: Reporting Little Rock

89 |
90 | 98 |
99 |
100 | 101 |

102 | Three years removed from the Brown v. Board of Education decision, Arkansas Gov. Orval Faubus orders the National Guard to stop nine black students from attending the all-white Little Rock Central High School. President Dwight D. Eisenhower intervenes by federalizing the National Guard and deploying Army troops to protect the students, stripping the state of power. Media coverage of the physical and verbal harassment the black students were subjected to is reported and broadcast around the world. In the end, they successfully integrate Central High.

103 | 104 |
105 |
106 |
107 |
108 | 109 |
110 |

1961

111 |
112 |
Freedom Rides
113 |
114 |

May 4, 1961

115 | 116 |
117 | Related Video: Freedom Rides 118 |

Watch: Freedom Rides

119 |
120 | 128 |
129 |
130 | 131 |

132 | The first of many civil rights “Freedom Rides” leaves Washington, D.C., for New Orleans. The Freedom Riders want to test the validity of the Supreme Court’s decision to outlaw racial segregation in bus terminals and through interstate bus travel. Angry white mobs – with the blessing of Alabama law enforcement – meet the convoy in Anniston and Birmingham, brutally beating the Freedom Riders and firebombing one of the buses.7

133 |
134 |
135 |
136 |
137 | 138 |
139 |

1963

140 |
141 |
"I Have a Dream"
142 |
143 |

August 28, 1963

144 |
145 | Related Video: Black Press 146 |

Watch: Black Press

147 |
148 | 156 |
157 |
158 | 159 |

160 | In one of the largest gatherings in the nation’s capital and one of the first to be broadcast live on national television, at least 200,000 civil rights protesters stage a March on Washington concluding at the Lincoln Memorial. The march is dedicated to jobs and freedom and takes place 100 years after the Emancipation Proclamation. The highlight of the event is Martin Luther King Jr.’s historic “I Have a Dream” speech.

161 | 162 |
163 | I have a dream that one day this nation will rise up and live out the true meaning of its creed: "We hold these truths to be self-evident: that all men are created equal." 164 |
—Martin Luthar King Jr.
165 |
166 | 167 |
168 |
169 |
170 |
171 | 172 |
173 |

1964

174 |
175 |
Civil Rights Act
176 |
177 |

July 2, 1964

178 |

179 | President Lyndon B. Johnson signs the Civil Rights Act of 1964, mandating equal opportunity employment, and complete desegregation of schools and other public facilities. It also outlaws unequal voter registration requirements. Although it would take years for these changes to take effect in communities around the country, the law is a monumental victory for the civil rights movement.

180 | 181 |
182 |
183 | 184 |
Nobel Peace Prize
185 |
186 |

October 14, 1964

187 |

Martin Luther King Jr. is awarded the Nobel Peace Prize; at 35, he is the youngest recipient.

188 |
189 |
190 |
191 |
192 | 193 |
194 | 195 | 196 |
197 |
198 |

The Development of Timeliner.js

199 |

Your content isn't suited for a chronological presentation? No problem, get creative.

200 |

The timeline below demonstrates some of the plugin's options including the oneOpen feature and semantic class customizations (see source code). 201 | 202 |

203 | 204 | 205 | 206 |
207 | 208 |
209 |

Concept

210 |
211 |
The idea is born
212 |
213 |

Two completely independent projects, one for the Institute for Educational Leadership and another for the Fund for Investigative Journalism, expressed interest in a timeline component for their website.

214 |
215 |
216 |
217 |
218 | 219 |
220 |

Prototype

221 |
222 |
The idea is realized
223 |
224 |

Jquery was heating up, so it was the perfect time to put together a working prototype. I toyed around with some variations, including some horizontal ones. Ultimately, I found the vertical version, similar to the current, the most flexible.

225 |
226 |
227 |
228 |
229 | 230 | 231 |
232 |

Initial Integrations

233 |
234 |
NCLD-Youth Disability History Timeline
235 |
236 |

The initial working code was first launched at http://www.ncld-youth.info/index.php?id=61. This version actually has come features that I like that I never implmented in the final plugin (e.g,. century > decade > year/event).

237 |
238 |
239 |
Investigating Power's Moments of Truth Timelines
240 |
241 |

I really started to fine tune the code for InvestigatingPower.org. This was also the first time where all of the content was loaded via the CMS, which was important given five timelines for a total of a few hundred data points.

242 | 243 |
244 |
245 |
246 |
247 | 248 |
249 |

Open Sourced

250 |
251 |
GitHub Gets the Timeliner.js Jquery Plugin
252 |
253 |

I wanted to play around with GitHub. I wanted to learn some more Jquery, in particular a bit more about creating a plugin. Done.

254 | 255 |
256 |
257 |
258 |
259 | 260 |
261 |
262 | 263 | 264 | 265 |
266 | Investigating Power 267 |
> 268 | 269 | 270 | 271 | 272 | 273 | 288 | 289 | 290 | --------------------------------------------------------------------------------