Timeline JS dynamic flag color change

Question

I am using timeline JS in my application for displaying 2 types of reports based on the date. It is working fine but when the number of reports data are more it is difficult to find which report is belongs to which category. So I thought to use different text colour in timemarker to differentiate 2 types.

Type 1. #9467bd
Type 2. #8c651c

But I am unable to set text-color dynamically. I have referred the timeline JS documentation and found there is an option to change timemarker - color by using this class name .tl-timemarker. But I am not getting any idea to set 2 different colors.Timeline JS Doc

JSFiddle Link

Please refer my code here:

HTML Code:

<div id="my-timeline"></div>
<button id='myBtn'>start</button>

JS Code:

$('#myBtn').click(function() {
         var data = {
        "timeline":
        {
            "headline":"Test Company",
            "type":"default",
            "text":"Test Reports",
            "startDate":"2010",
            "date": [
                 {
                     "startDate" : "2010,9,1",
                     "text":"Type 1",
                     "headline":"Test Header",
                     "asset":
                     {
                         "media": "PDF link",
                         "credit": "View Doc",
                         "caption":"Caption text goes here"
                     }
                 },
                {
                    "startDate":"2011,10,12",
                    "text":"Type 2",
                    "headline":"Test Header",
                    "asset":
                    {
                        "media": "PDF link",
                        "credit": "View Doc",
                        "caption": ""
                    }
                },
          {
                    "startDate":"2011,10,12",
                    "text":"Type 2",
                    "headline":"Test Header",
                    "asset":
                    {
                        "media": "PDF link",
                        "credit": "View Doc",
                        "caption": ""
                    }
                },
          {
                    "startDate":"2011,10,12",
                    "text":"Type 2",
                    "headline":"Test Header",
                    "asset":
                    {
                        "media": "PDF link",
                        "credit": "View Doc",
                        "caption": ""
                    }
                },
          {
                    "startDate":"2011,10,12",
                    "text":"Type 1",
                    "headline":"Test Header",
                    "asset":
                    {
                        "media": "PDF link",
                        "credit": "View Doc",
                        "caption": ""
                    }
                },
          {
                    "startDate":"2011,10,12",
                    "text":"Type 2",
                    "headline":"Test Header",
                    "asset":
                    {
                        "media": "PDF link",
                        "credit": "View Doc",
                        "caption": ""
                    }
                }
            ]
        }
    };
         loadData(JSON.stringify(data));
    });


    function loadData(json){
        addCode('jsFile='+json);
        createStoryJS({
            type:       'timeline',
            width:      '800',
            height:     '600',
            source:     jsFile,
            embed_id:   'my-timeline'
        });
    }


//addCode(code) will create a script element and add code to it
function addCode(code){
    var JS= document.createElement('script');
    JS.text= code;
    document.body.appendChild(JS);
}

score 0 · Answer 1 · answered Jun 18 '17 at 23:16

I'm not sure I entirely understand your task but let me take a shot. I had a project where I needed to have mixed custom styles within event text items. I did do some customization (overloading) of the .tl CSS styles but the main thing was to add span tags to the JSON data and then style it through CSS. (see example below)

It would be possible to "templatize" this if you can differentiate between your types 1 & 2 through code – or just add an extra property for that to the JSON for the text item. You can add any properties you want and the timeline code doesn't care. Then you can use some templating lib like Handlebars to add the span tags to your JSON data.

JSON

"text": {
        "headline": "<span class ='vTime'>00:14:54</span><br>
                    <span class ='cTime'>00:00:00</span>",
        "text": "<span class ='narrative'>Stops swimming.</span>"
    }

CSS

.vTime {
    font-size: 40px;
    line-height: 48px;
    color: white;
}

.cTime {
    font-size: 40px;
    line-height: 48px;
    color: yellow;
}

.narrative {
    font-size: 26px;
    line-height: 30px;
    color: white;
}

Thanks for your response. I already tried this line "text":"Type 1" . Here color applied only to the text present inside the 'slider-item'. But not applied to the flag-content. Do you have any other work around for this? http://jsfiddle.net/Y5hBk/97/ — web developer, Nov 14 '17 at 13:16
I haven't needed to do that – but I imagine you can go through the timeline DOM and add custom classes as needed. I've tweaked the timeline classes by writing definitions which override the default definitions – have you seen [Using the TimelineJS CSS selectors](https://timeline.knightlab.com/docs/overriding-styles.html) — spring, Nov 14 '17 at 18:01

Timeline JS dynamic flag color change

1 Answers1

JSON

CSS