Working examples of the timeliner.js jquery plugin. This page features two working examples, which demonstrate several key features including expand/collapse, autostart/autoload, and multiple timelines per page. Also see the newer "Future" demo, released along with version 2.0 of this plugin.
The content used in this demo is from InvestigatingPower.org, one of two initial places where I implemented timeliner. InvestigatingPower.org features a total of five timeliner-powered timelines covering the topics of McCarthyism, Civil Rights, the Vietnam War, the Watergate Scandal, Corporate Power (Tobacco), and Post 9/11.
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.”
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.
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.
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.
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
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.
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."—Martin Luthar King Jr.
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.
Martin Luther King Jr. is awarded the Nobel Peace Prize; at 35, he is the youngest recipient.
Your content isn't suited for a chronological presentation? No problem, get creative.
The timeline below demonstrates some of the plugin's options including the oneOpen feature and semantic class customizations (see source code).
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.
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.
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).
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.
I wanted to play around with GitHub. I wanted to learn some more Jquery, in particular a bit more about creating a plugin. Done.