Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How to create a Timeline with CSS and jQuery

In this article we will see how to create a timeline feature like in social medias, just with CSS and jQuery tools.

Timeline design in modern days is one of the most popular methods in web to visualize data in an attractive and interesting way. In this document, we will learn and go through the basic steps of how to develop a timeline using jQuery and also we will see how to design the timeline using CSS to make the look and feel of the timeline more attractive. We will also see how to insert JSON data into the timeline. Let’s take an example, wherein we are displaying the list of activities to be done in six months.

There are multiple options to design a time line. And these options are applicable based on the requirement. The time line can be for social media, news ticker, some responsive website, time line applications etc. But most of the time lines are designed using jQuery, CSS, HTML, Bootstrap etc. Some of the widely used time line design technologies are

  • jQuery and CSS
  • Bootstrap
  • jQuery and CSS3
  • jQuery Responsive Time Line Plugin
  • JavaScript library for HTML time sheets

The HTML code for the following example will be as follows:

Listing 1. A sample HTML code

 <div class="timeline">
                  <div class="timeline-item active">
                      <div class="month">Jan <span class="marker"><span class="dot"></span></span>
                      </div>
                      <div class="activity">Enter this month's activity.</div>
                  </div>
                  <div class="timeline-item">
                      <div class="month">Feb <span class="marker"><span class="dot"></span></span>
                      </div>
                      <div class="activity">Enter this month's activity.</div>
                  </div>
                  <div class="timeline-item">
                      <div class="month">Mar <span class="marker"><span class="dot"></span></span>
                      </div>
                      <div class="activity">Enter this month's activity.</div>
                  </div>
                  <div class="timeline-item">
                      <div class="month">Apr <span class="marker"><span class="dot"></span></span>
                      </div>
                      <div class="activity">Enter this month's activity.</div>
                  </div>
      <div class="timeline-item">
                      <div class="month">May <span class="marker"><span class="dot"></span></span>
                      </div>
                      <div class="activity">Enter this month's activity.</div>
                  </div>
      <div class="timeline-item">
                      <div class="month">Jun <span class="marker"><span class="dot"></span></span>
                      </div>
                      <div class="activity">Enter this month's activity. </div>
                  </div>
  </div>
 

In the above code we are creating containers for all the six months and the activities to be performed in those months using a parent <div> element which has class as “item”. Within each parent <div> there two child <div> elements to contain the month and activity. These two child elements contain one class each as “month” and “activity-info” respectively to represent the month and the activity to be displayed on the timeline.

Now, that we have seen the HTML code and created the containers for the timeline items to be placed, let’s check the CSS to design the items. The CSS code will be as follows:

Listing 2. A sample CSS file

  
 div {
      font-family: Helvetica, Arial, sans-serif;
      box-sizing: border-box;
  }
  .timeline {
      width: 400px;
  }
  .timeline .timeline-item {
      width: 100%;
  }
  .timeline .timeline-item .activity, .timeline .timeline-item .month {
      color: #eee;
      display: block;
      float:left;
      -webkit-transition: all 1s ease;
      -moz-transition: all 1s ease;
      transition: all 1s ease;
  }
  .timeline .timeline-item.close .activity, .timeline .timeline-item.close .month {
      color: #ccc;
      -webkit-transition: all 1s ease;
      -moz-transition: all 1s ease;
      transition: all 1s ease;
  }
  .timeline .timeline-item .month {
      font-size: 24px;
      font-weight: bold;
      width: 22%;
  }
  .timeline .timeline-item .activity {
      width: 100%;
      width: 78%;
      margin-left: -2px;
      padding: 0 0 40px 35px;
      border-left: 4px solid #aaa;
      font-size: 14px;
      line-height: 20px;
  }
  .timeline .timeline-item .marker {
      background-color: #fff;
      border: 4px solid #aaa;
      height: 20px;
      width: 20px;
      border-radius: 100px;
      display: block;
      float: right;
      margin-right: -14px;
      z-index: 2000;
      position: relative;
  }
  .timeline .timeline-item.active .activity, .timeline .timeline-item:hover .activity {
      color: #444;
      -webkit-transition: all 1s ease;
      -moz-transition: all 1s ease;
      transition: all 1s ease;
  }
  .timeline .timeline-item.active .month, .timeline .timeline-item:hover .month {
      color: #9DB668;
  }
  .timeline .timeline-item .marker .dot {
      background-color: white;
      -webkit-transition: all 1s ease;
      -moz-transition: all 1s ease;
      transition: all 1s ease;
      display: block;
      border: 4px solid white;
      height: 12px;
      width: 12px;
      border-radius: 100px;
      float: right;
      z-index: 2000;
      position: relative;
  }
  .timeline .timeline-item.active .marker .dot, .timeline .timeline-item:hover .marker .dot {
      -webkit-transition: all 1s ease;
      -moz-transition: all 1s ease;
      transition: all 1s ease;
      background-color: #9DB668;
      box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.2);
  }
 

In the above CSS code, we have defined the style for each and every element and conditions when they will be displayed. For example, we have declared that font styles of the <div>, the width of the timeline, the color and border properties, etc. For each of these elements we have created different classes to render the styles when the timeline is displayed. Also we have defined the style for the activity class and the month class. This will make sure that when the month and the activities appear on the timeline they will appear with the look and feel defined in the CSS.

Apart from these, we have also declared the style of the activity and the month when they are active and also when they are inactive including the styles when the cursor is hovered on a timeline item.

Now that we have set the styles, look and feel of the timeline let’s go ahead and check the jQuery code to render the timeline. The jQuery code will be as follows:

 $(".item").hover(function () {
      $(".item").removeClass("active");
      $(this).toggleClass("active");
      $(this).prev(".item").toggleClass("close");
      $(this).next(".item").toggleClass("close");
  });
 

In the above jQuery code, we are declaring a hover function which triggers when the mouse cursor is hovered on a timeline item and selects that item to make it active. Once you remove the cursor from the particular timeline item and place it on another different item the former becomes inactive and the later becomes active.

Combining these three types of code our timeline is created. It will look like as shown in the image below:

Figure 1 – Output of the time line

You can also try out the code and see live example. Just copy and paste the respective codes at the following link http://jsfiddle.net/XdQ5Y/433/.

In this example, we have separated the codes for better understanding. You need to create an .html file with the HTML code and the jQuery code. Also create a separate CSS file and enter the relative path of the file within the .html file. In order to render the timeline, please remember to include the timeline-api.js file within the .html file. The timeline-api.js is JavaScript library file which is used for creating stunning timelines.

Conclusion

In modern days’ timeline is the most popular web trend to visualize data. This document is a guideline to build a simple timeline using CSS and jQuery. You can customize the code and the design of the timeline as per your requirement once you get to know the basic steps of building a timeline. In this article we have discussed different technologies which can be used to build a perfect time line. But first we need to understand the requirement for a time line and based on that technology stack can be selected. In most of the cases time lines are designed using jQuery and CSS. And there are some advanced technologies also, which are very efficient for rapid development purpose. Hope, you have got a good understanding of the time line implementation and will be able to implement it in your application development.



Website: www.techalpine.com Have 16 years of experience as a technical architect and software consultant in enterprise application and product development. Have interest in new technology and innovation area along with technical...

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login