November 26, 2015 | 94 Feedbacks

Horizontal Timeline

An easy to customize, horizontal timeline powered by CSS and jQuery.
Browser support
  • ie
  • Chrome
  • Firefox
  • Safari
  • Opera

Our vertical timeline is so far one of the most popular resources on CodyHouse. Many of you asked us to include a horizontal timeline as well. Here it is!

Building a horizontal timeline was a bit tricky, because you can’t rely on the vertical (more intuitive) scrolling behaviour. We decided to separate timeline and events, with the first one working like a slider, while the second one occupying the full width and showing a single event at a time.

Creating the structure

The HTML structure is composed by two main ordered lists: the first one containing the timeline dates and the second one the events.
An additional ul.cd-timeline-navigation has been used for the navigation arrows, and a span.filling-line to create the filling effect when a new event is selected.

Adding style & Guidelines

Let’s start from the events style: all the items are translated to the left, outside the viewport (translateX(-100%)); the .selected class is added to the visible event item to move it back into the viewport (translateX(0)).

4 classes have been used to create the slider animation: the .enter-right/.enter-left classes added to the selected event item entering the viewport from right/left, and the .leave-right/.leave-left classes added to the event item moving to the right/left while leaving the viewport. These classes are used to apply two different CSS animations: cd-enter-right (for the .enter-right and .leave-left class) and cd-enter-left (for the .enter-left and .leave-right class).

About the timeline: the position of each date along the timeline is set using jQuery. Dates are not equally distributed along the timeline, but the distance between a date and the next one is proportional to the difference between these dates.

First of all, in the main.js file, we set a minimum distance between two consecutive dates, using the eventsMinDistance variable; in our case, we set eventsMinDistance = 60 (so the minimum distance will be 60px). Then we evaluate all the differences between a date and the following one; to do that we use the data-date attribute added to each date. The minimum difference is then used as a reference to evaluate the distances between two consecutive dates.

For example, let’s suppose the minimum found difference is 5 days; that means that the distance, along the timeline, between two dates separated by a lapse of 5days will  be 60px, while the one between two events separated by a lapse of 10 days will be 120px.

About the date format: we used the date format DD/MM/YYYY, but you can also add time, if you need to take that into account.
There are 3 different date formats you can use:

Last note: the data-date used for a timeline date has to be set to the respective event item too (list items inside the .events-content element). This way, when a user selects a new date along the timeline, the corresponding event item can be shown.


Jan 04, 2016
  • Fixed bug with events on the same day
Dec 26, 2015
  • Select starting timeline date (using the .selected class)
Nov 26, 2015
  • Resource released by CodyHouse

Claudia Romano

Web developer, fan of The Big Bang Theory and good food. Co-founder of CodyHouse and Nucleo. You can follow her on Twitter.

  • MrEscobarr

    You’re my hero claudia, just what I needed

  • Nitin

    oh brilliant brilliant, I had this vague idea of showcasing high level project schedules in sales meetings in a better way. This is it!

  • http://www.mrashtonka.com Ashley Tonkin

    This looks awesome :)
    I was thinking about displaying information from a database.
    Inserting information in an admin page (login only)
    Display that information you just inserted by date.
    You can insert the date you would like it to display so you can make it like a business schedule.

    If you would be interested in something like that, rate this post and if i get enough interested ill put it all together and share with you guys for free.

    • nick

      I am trying to incorporate only four dates, and have them evenly spaced
      out. Any suggestions on how I should do this? When I do this, it smushed
      everything into one small like that doesn’t stretch the max width. Any suggestions on how to only use four tabs and evenly space on the timeline?

      • http://www.mrashtonka.com Ashley Tonkin

        Hey Nick sorry for the late reply.

        I haven’t looked at the code as no one wanted me to build that i suggested above.
        By the looks of what i have seen of the code it should be very easy to do what your wanting it to do, the only question i have is are you looping it through from a database or are you just adding the information in via the HTML ?

        • SungYoon Kim

          I have the same problem like Nick above. I’ve tried this timeline by looping from database. Can I get some solution?

  • David

    This is superb.

    Any way to compress large empty periods? I have a timeline with little data over the first few years and then much more. The first years look weird.

    • Walt Stone

      Agreed. Much awesomeness in this, but I’m about two weeks away from implementing this and anticipate equally large gaps. Is there no “eventsMaxDistance” in this, either hard coded or as a function of “eventsMinDistance”?

      • David

        Some marker like —//— would presumably be needed to indicate a cut in the time-distance continuum (that’s what it is called, right?)

        • Walt Stone

          Would love that. In my case, we’ll be doing a Date 1, Date 2, Date 3, Date 100, Date 180, Date 200, but haven’t done this to see what it looks like. We may just create some intermediate values, but that leads to too many clicks to get to the crux of the presentation.

          • David

            On smallest screens I’m getting a blank empty line resulting from gaps that are larger than the viewport. That’s a major UX problem.

      • nick

        I am trying to incorporate only four dates, and have them evenly spaced
        out. Any suggestions on how I should do this? When I do this, it smushed
        everything into one small like that doesn’t stretch the max width. Any suggestions?

  • Brian Howe

    This looks great

  • Paul van Oijen

    Would there be any way to add scrolling to navigate the timeline? As in scrolling the mousewheels moves to the next/previous list item.

  • Surjith SM

    Please include JS & its description in the post page. We are interested to see that too.

  • nick

    I am trying to incorporate only four dates, and have them evenly spaced out. Any suggestions on how I should do this? When I do this, it smushed everything into one small like that doesn’t stretch the max width

  • http://about.me/lauhakari Lauhakari [mikko]

    If I have a change suggestion, is your code on some git source so we can make PR’s?

    Otherwise, my tiny change is to make the .filling-line cover to the “selected” date on load. In main.js changed line 144:
    updateFilling(timelineComponents[‘timelineEvents’].eq(0)class=”selected”, timelineComponents[‘fillingLine’], totalWidth);
    updateFilling(timelineComponents[‘eventsWrapper’].find(‘a.selected’), timelineComponents[‘fillingLine’], totalWidth);

  • Chris Perry

    I’m trying to get this to display in a newest first (left) order, but something in the logic doesn’t support it. I end up getting dates stacking on one another. Anybody have a solution for this to run in newest first order from left to right? If not I could run oldest to newest as long as the timeline began with the newest (far right) date selected, and the viewport was all the way over to the right.

    • http://codyhouse.co Claudia Romano

      Hi Chris, I just uploaded a new version fixing this bug.
      You can now add the .selected class to the date you want your timeline to begin with. Cheers!

      • Chris Perry

        Thank you! Works great.

  • Ib Warnerbring

    Is there any way to make this work with two events that happen on the same day? Since they’re on the same day the distance is calculated as 0, and the timeline breaks because the math results in infinity.

    • http://codyhouse.co Claudia Romano

      Hi there, we just uploaded a new version fixing the bug with events on the same day. Please note, you need to use the DD/MM/YYYYTHH:MM format for the data-date value (eg 02/10/2015T19:45). Hope this helps!

      • Ib Warnerbring

        Cheers, will try it out.

      • Ib Warnerbring

        Thanks for the fix, sadly I won’t be able to use it as it makes my timeline insanely wide, to the point where it impacts browser rendering performance (my dates range from 1880s to 2010s so even a 1px gap between the shortest events when talking about hours…well as you can imagine, the timeline becomes very long indeed).

        Which actually brings me to a request: just as you can set the minimum distance between the two shortest points, it would be very helpful if you could also set the maximum distance allowed in pixels between two points. That way you could control how compact the timeline is over very long periods.

  • Krazy

    Hello, How can I modify the method to determinate the space between 2 dates because I have 5 dates on my timeline and I have 3 empty line between 2 dates… Thanks a lot for your work !!!

    • http://codyhouse.co Claudia Romano

      Hi Krazy, the eventsMinDistance variable is set to 60(px) in the main.js file. That’s the minimum distance between two consecutive dates. So you should try changing this value.

  • Gilles BONNET

    Hello Claudia. I think the question about date spacing is a bit painfull and may be you could relax it : here is an example of html/css/jquery based where the time line has no scale : century, year or even no date
    see http://www.port-royal-des-champs.eu/frise

  • huuthan00

    help me!!
    i want edit time-line longer
    if data only have 1 date, it short too

    • Ashley Tonkin

      Hello, from my understanding that if you only have the one date on the line then it will only display as the min width of 60px long.
      You could try editing this in the main.js file.

      If this doesn’t work please let me know and I’ll have a look at the code and see if i can get it to work for you.

      • huuthan00

        tks, in function setTimelineWidth(), i add totalWidth = timeSpanNorm*width + 400;

  • Zohra

    Is it possible to turn the time line in years only. And long term, for example : 1860, 1880, 1900… until today

    Thank you !

    • Nicole Lambon

      I second this, as I need a timeline that only uses years, now I am currently setting every year to e.g 01/01/1765, but as mentioned earlier, the years are creating rather large gaps between the first few years.

  • Raff

    Is it possible to add navigational arrows on the left and right-hand side, navigating to the prev and next item?

  • Dayana Vitoria

    Great work, Claudia!

  • kisut

    what if i change day to year. is it possible?

  • Nageshwari P

    I need only year not date like 2009, 2010,2011……. but the distance between timeline is too short . please help me out in this

  • Aniket Bhawkar

    Hi, I have downloaded the zip file.

    There is an error which is occurring.
    When I open the demo link / html file on Google Chrome, it doesn’t show any text except the headline text; however when I check on Safari / Firefox / IE its working perfectly fine.

    Please find the screenshot attached

  • ahmad


    I want to make it auto, not by clicking the mouse on the date and then the text appear, is there anyway to scroll it auto without click on it. Thanks

    • Sandip patel

      var i=0;

      function autoScoll(i){
      return i=0;
      return ++i;


      • Sarin CM

        Thank you very much..it realy works like a charm

  • Smyth

    Does this play nice with Bootstrap CSS/JS?

  • André Luiz

    About a solution to put the timeline for countdown.
    I inform my code with palliative solution.
    In main.js replace function line 227 for:

    function daydiff(first, second) {
    distance = Math.round((second-first));
    if(distance < 0){
    distance = Math.round((first-second));
    return distance;

  • https://www.github.com/androidealp André Luiz

    for work years, uses dynamic date in data-date and uses year in your text li :

    $month = 12;
    //use the same foreach to print containt;
    foreach($elements as $item => $dates){
    //for order countdown for countup ++$month
    $monthprint = ($month)?–$month:12;

    echo “[tag a] data-date=’01/$monthprint/$dates[year]’>$dates[year] [tag a]”;

  • Sherub Thakur

    Hi great job with the timeline. I am trying to port it to react I hope it’s ok with you.

  • Nicoletta

    Ciao Claudia, bellissimo lavoro!
    Mi chiedevo se fosse possibile rendere tutto automatico senza il click dell’utente.. come una sorta di autoplay. È possibile?

  • Miq

    Great, Claudia! Thank you very much! it was very useful and simple for me!

  • tassaras1

    how can I use ng-repeat instead of:

    16 Jan
    28 Feb

    if I use it like that it shows all the dates on top of the others:


  • Onur

    Hey Claudia! It’s great, thank you very much! Also I want to know that Is this support to timeline based on year instead of day or month ?

    • Luka Levstek

      I have done that by setting data-date to “01/01/” + year and displayed only year varable in the same link.

  • Jun Sola

    Hi Claudia,

    I really like your timeline. Is it possible to put an image on top of the dates?

  • Gideon Sassoon

    I’m having an issue of my own but I felt it was better to expand my issue http://stackoverflow.com/questions/36200452/li-not-reconising-php-foreach-loop-possibly-including-js

  • http://www.ihdsg.ovh IhToN

    Is there any way to create another element outside the line-wrapper to change the current event?

  • zkvvoob

    Hello! First of all, thank you very much for sharing this wonderful timeline!

    I just have a quick (and I hope easy) question: is it possible to link to a specific slide/date? I can see right now that the ‘#events-wrapper’ contains anchors for all list items and I tried adding ids there and to the relevant slide, but it didn’t work.

    I would really appreciate your help on this matter.

    Thank you!

    • Khadijah Alsafwan

      I am trying to do the same thing. Did you figure out how to do it?

  • Rakhi Chauhan

    Thanks for sharing beautiful timeline. Need one more favor can u please add auto scrolling functionality to this timeline. I would really appreciate your help in this matter. Many
    Thanks again………

  • http://www.doogie.de/ Doogie

    I love this timeline! I extended it a bit so that relative positions for the events can be set in percent:

    • Rabii Brahimi

      Hi i couldn’t see what you have done. not working please double check :)

  • Rabii Brahimi

    is this supported only by few browsers, it doesn’t work on google chrome laptop – no dates appear and no paragraph just event title. any help thanks :)

    • MadeInMoon

      works fine for me on chrome (mac&window laptops)..
      what says your console??

      • Rabii Brahimi

        I am suing windows
        i was working on an old version of chrome and i think it was the main issue, it’s working well now

        Thanks :)

  • MadeInMoon

    Thank U for sharing this elegant and effective timeline.
    I’m adapting your code to create an react’s high-order-component, without jquery, and using swiper.js for contents animation (linked to the location’s hash).

    I’m wondering if someone has an idea to make the line more ‘curved’.. ??

  • Lukas Best

    Thanks a lot for the timeline. Adjusted some functions to fit my needs, I have a question though: Is it possible to automatically detect which event is closest to the current date? At the moment it shows the .selected first and sometimes this date is already passed so my timeline doesn’t show the ‘current’ dates anymore.

  • Alex Claramonte

    If you have a day with HH:MM format with 24 positions and your select is number 6 its posible to see all the 24 positions initial? its strange because i only see from the 6 to the end , theres anyway to reset the scroll to pos. 0?

    Of course, great website, and great jquery plugin! ;)

  • Guero Agnostico

    Hi! im trying to iterate with angular ng-repeat directive, but after timeline is render all events end at the same point, anyone knows this issue?

  • http://www.dzayn.com Abdelkader Benkhaled

    hello, thank you for the great work, can you add RTL support?

  • Jaime s

    Hi, thanks, looks amazing.
    Is it possible to modify the contents dynamically?

  • Janalee Myles Pineda

    Hi, could someone help me with the slider bullets?


    In the attached image, the first bullet is at the left most part and the first bullet is at the right most part. How can I do that with Horizontal Timeline? Thanks in advance for your answers.

  • Manoj Vyas

    How we make this timeline responsive?

  • Alex Aurica

    Hi, I have a problem. When I refresh the page with Ctrl + R the line between dates doesn’t appear. But when I press enter on the link page the timeline works. Do you have any idea what is the problem?

    • Sebo

      Same problem here, no auto line-fill after refresh.

  • susie

    I am wanting to add this timeline into a clients squarespace website but the css and jquery are not working right.

  • Allan Santos

    That’s all I need !!!! But as I enter into a site built on wordpress?

  • Cem

    Event on same day or same month does not work.

  • Hussain Bootwala

    I want to filter the content month wise so I am adding display none to other months and showing only current month. But the timeline should reinitialise and set accoriding to the available content. please help

  • Pascal

    Hi, if I try to include the html markup, css and main.js file in my wordpress site, I get the error “element is not defined” for the lines form 196 to 202. I guess my jQuery version (/js/jquery/jquery.js?ver=1.12.4 & /js/jquery/jquery-migrate.min.js?ver=1.4.1. ) could cause this, since it differs from your version. Moving to your version could cause other errors, so is there any workaround you could provide? This would be amazing!

  • Wylker Moreno

    how to init first item padding minimal

  • Luka Levstek

    Great stuff. If anyone wants to display timeline in descending order, just render timeline links one by one from max to min then change functions minLapse and setDatePosition to calculate distance as absolute (Math.abs).

    • Khadijah Alsafwan

      Changing function daydiff did the trick for me.

      function daydiff(first, second) {
      return Math.abs(Math.round((second-first)));

  • Luka Levstek

    To set fixed intervals between dates (100 px for example) edit function setDatePosition like this:

    for (i = 0; i < timelineComponents['timelineDates'].length; i++) {
    var distance = Math.abs(daydiff(timelineComponents['timelineDates'][0], timelineComponents['timelineDates'][i])),
    distanceNorm = Math.round(distance / timelineComponents['eventsMinLapse']) + 2;
    distnew = distprev + 100;
    timelineComponents['timelineEvents'].eq(i).css('left', distnew + 'px');
    distprev = distnew;

    Then in setTimelineWidth override totalWidth:

    totalWidth = (timelineComponents['timelineDates'].length * 100) + 100

    • Kristin

      Hi Luka, this doesn’t seem to work? I keep getting an error that distprev is not defined?

      • Luka Levstek

        You need to initialize variables (before for loop or globally) and set values to 0. Ex: var distprev=0; var distnew=0; etc…

        • Ronald López S

          Can you upload a fiddle or so, so we can see the live code, please x.x

  • https://dx2systems.com Dan Hastings

    Is there a way to set max width? I have 3 dates on the timeline. 1st jan, 1st feb and 1st aug. jan-feb= 60px and then august is 4000px away. I have to scroll over 3 times before i find the final point.

    • Luka Levstek

      You can edit function setDatePosition (as written in my post bellow) to separate points in equal intervals. Total width would be sum of all three intervals…

  • http://www.shmdesign.com Sam Mah

    Was wondering if this is possible to add an option of two arrows (prev/next) to the event content section and coordinates the timeline when you click the next. This option gives two ways to navigate the timeline history. Any help is highly appreciated. Thanks.

  • DonkeyDavey

    Can I reverse the order? Can I do newest to oldest?

  • Venus

    Is there a way to link to a particular date from a different one?
    Thank you for your hard work!

  • shilpa prakash

    Is there a way to add images to the timeline instead of the text . I ve tried adding images in the HTML code but however the height of the image never varies.. is there any specific reason for this ?

  • sheela paudel

    Well I have a total of thirteen number of items. The problem is the width of the events becomes very much longer and I have to click the next button for more than 100 times to reach the last item. I don’t know what the problem is. Could anyone help me with that please.