Question

This is what i´m trying to achieve:

The user will have the option to add more years (a new circle with text and the next color in the gradient).

So what i´m doing is building a div that by repeating itself it can construct the above image.

This is the markup:

     <a href="javascript:void(0)" class="timeline_box">
        <span class="timeline_dot"></span>
        <span class="timeline_year">2003</span>
    </a>

This is the CSS:

    a.timeline_box{
        background: url('../images/timeline_bg.png') no-repeat 15px -2px;
        display: block;
        width: 56px;
        height: 20px;
        float: left;
    }
    span.timeline_dot{
        display: block;
        height: 14px;
        width: 14px;
        background-color: #ff845a;
        -moz-border-radius: 5px;
        -webkit-border-radius: 10px;
        -khtml-border-radius: 5px;
        border-radius: 10px;
    }
    span.timeline_year{
        color: #b6b6b6;
        font-size: 10px;
        font-style: italic;
        font-family: Georgia, Times, "Times New Roman", serif;
        vertical-align: top;
    }

This is what I get:

and if I repeat the timeline_box it start to construct well:

The client now can change the year but the problem is that the background color of the circle will stay always the same, I want to find a way to change it with jquery that with every new year the background of the circle get´s the next color on the gradient or something like that.

Any ideas?

Answer 1

Never tried something of this kind – changing colors while following the color gradient or whatever. Thought it would be trickier than it is. The hsl color format makes it pretty easy to do. To “follow the gradient” you just need to keep incrementing the h in hsl – the logic is simple.

Here’s the javascript:

var $box = $('.timeline_box'),
    h_val = 0;

function addBox () {
  var $new_box = $box.clone();
  h_val += 17; //change this value to change the amount of color change

  $new_box
    .find('.timeline_dot')
    .css('background', 'hsl('+ h_val +', 100%, 68%)') //change the "s" and "l" values to your liking
    .end()
    .appendTo('body'); 
}

$('#el').on('whatever', addBox);

There’s not even the need to reset the h to 0 at some whatever point. The h can keep going on and on, and it’ll just keep cycling the gradient.

Here’s a jsbin: http://jsbin.com/oqifoq/1/edit