web tutorial

Create a timeline slider with JQuery

Many website has a long company history and they want to show their history. I will show you how to create a timeline slider with JQuery. You can follow me by reading the comments in the codes.

 

timeline slider jquery

View Demo

First, start by loading in the necessary libraries and external files in the head. I have chosen Google API and JQuery UI for this slider. We will create external stylesheet and JavaScript and named it stylesheet.css / slider.js.

I set up div.id=”content-scroll” to holde the content, div class=”content-item” to contained the content items, div class=”timeline-year” id=”year-2002″ to hold timeline slider year 2002 and div class=”column-left”, div class=”column-middle”, div class=”column-right” to set up the columns in the slide.

 

HTML

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <link href="stylesheet.css" rel="stylesheet" type="text/css" />
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
  <script src="jquery-ui-1.7.1.custom.min.js" language="javascript" type="text/javascript"></script>
  <script src="slider.js" language="javascript" type="text/javascript"></script>

</head>
<body>

<!--holde the content-->
<div id="content-scroll">
  <!--contained the content items-->
  <div class="content-item">
      <!--timeline slider year 2002-->
      <div class="timeline-year" id="year-2002">

             <div class="column-left"><h1 class="timeline-header">2002</h1>

             </div><!--column-left-->

             <div class="column-middle">
                <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat.</p><br />

                     <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p><br /><br />

                     <p>Vestibulum auctor dapibus neque.</p>

            </div><!-- column-middle-->

            <div class="column-right">

                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
                    <p>Aliquam tincidunt mauris eu risus.</p>
                    <p>Vestibulum auctor dapibus neque.</p>

		    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat.</p>

            </div><!--column-right-->
      </div><!--timeline- year-->
  </div><!--content-item-->

 

You will set up the navigation bar in this section. I set up div id=”timeline-navigation” to hold the timeline navigation and div id=”content-slider” for the handle slider.

 

<div style="clear: both;"></div>

<!--timeline navigation bar-->
<div id="timeline-navigation">
        <!--year list-->
	<ul>
	    <!--I have an ID for every li to activate the year number when the users slide the slide handle-->
            <li id="slider-year-2002" class="year-active">2002</li>
            <li id="slider-year-2003">2003</li>
            <li id="slider-year-2004">2004</li>
            <li id="slider-year-2005">2005</li>
            <li id="slider-year-2006">2006</li>
            <li id="slider-year-2007">2007</li>
            <li id="slider-year-2008">2008</li>
            <li id="slider-year-2009">2009</li>
            <li id="slider-year-2010">2010</li>
            <li id="slider-year-2011">2011</li>
        </ul>

  <div id="content-slider"></div>

 

I set up the reset CSS code to remove the browsers default and style for the slider.

 

CSS

 

<div style="clear: both;"></div>

<!--timeline navigation bar-->
<div id="timeline-navigation">
        <!--year list-->
	<ul>
	    <!--I have an ID for every li to activate the year number when the users slide the slide handle-->
            <li id="slider-year-2002" class="year-active">2002</li>
            <li id="slider-year-2003">2003</li>
            <li id="slider-year-2004">2004</li>
            <li id="slider-year-2005">2005</li>
            <li id="slider-year-2006">2006</li>
            <li id="slider-year-2007">2007</li>
            <li id="slider-year-2008">2008</li>
            <li id="slider-year-2009">2009</li>
            <li id="slider-year-2010">2010</li>
            <li id="slider-year-2011">2011</li>
        </ul>

  <div id="content-slider"></div>

 

Style for the navigation bar.

 

<div style="clear: both;"></div>

<!--timeline navigation bar-->
<div id="timeline-navigation">
        <!--year list-->
	<ul>
	    <!--I have an ID for every li to activate the year number when the users slide the slide handle-->
            <li id="slider-year-2002" class="year-active">2002</li>
            <li id="slider-year-2003">2003</li>
            <li id="slider-year-2004">2004</li>
            <li id="slider-year-2005">2005</li>
            <li id="slider-year-2006">2006</li>
            <li id="slider-year-2007">2007</li>
            <li id="slider-year-2008">2008</li>
            <li id="slider-year-2009">2009</li>
            <li id="slider-year-2010">2010</li>
            <li id="slider-year-2011">2011</li>
        </ul>

  <div id="content-slider"></div>

 

JavaScript

I show first div.timeline-year by using .first().show() and hide the rest of the div.timeline-year by using .hide(). Set up .slider() to log slide by year by set up min and max: min: 2002, max: 2011, step: 1.

$(document).ready(function(){
  //set up the slide show
  //show first timeline year
  $('div.timeline-year').first().show();
  //make #content-slider slide function
  $("#content-slider").slider({
    animate: true,
    change: handleSliderChange,
    // slide: handleSliderSlide
    //make handleSlider log by year
    min: 2002,
    max: 2011,
    step: 1
  });
});

//set up handleSlider
function handleSliderChange(e, ui)
{
  //hide timeline-year
  $('div.timeline-year').hide();
  $('div#timeline-navigation li').removeClass('year-active');
  var div_selector = 'div#year-' + ui.value;
  // alert(div_selector);
  $(div_selector).show();
  //make li#slider-year activate when the users slide the slide handle
  var bottom_number_selector = 'li#slider-year-' + ui.value;
  $(bottom_number_selector).addClass('year-active');
}

function handleSliderSlide(e, ui)
{
  var maxScroll = $("#content-scroll").attr("scrollWidth") - $("#content-scroll").width();
  $("#content-scroll").attr({scrollLeft: ui.value * (maxScroll / 100) });
}

 

Finally, we complete the timeline slider to use for your company history. You can add more timeline year slider by create div id=”year-2002″  and div class=”column-left”, div class=”column-middle”, div class=”column-right”.

avatar

Written by Krittiya Clark

Krittiya Clark is a creative designer who is passionate in design and code. She enjoys experimenting with techniques in both web and print. She also likes house music and snowboarding.

Comments

    avatar
    1. Jackie Davidson says:
    2. Oh, that’s cool. Thanks #kclarkwebdesign. Very informative. I’ll have to give it a try.

    avatar
    1. wind power facts says:
    2. Thank you for any other fantastic article. Where else may just anyone get that type of info in such an ideal manner of writing? I’ve a presentation next week, and I’m at the search for such info.

    avatar
    1. Jesús Plaza says:
    2. Hi. I’ve created a more complex timeline slider. I leave here the link, hope it doesn’t go against any rules of this blog, and could be useful for readers looking for an extended version.

      http://codecanyon.net/item/jquery-timeline-slider/2214213

    avatar
    1. Abhilash Raj R.S says:
    2. is it free to use in commercial projects

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>