2

I have placed the timeline coding(followed https://github.com/NUKnightLab/TimelineJS) inside a bootstrap tab, if it is placed in first tab(active tab) it is loaded correctly but if it is placed in rest of tabs its not loaded correctly, i have placed in sixth tab

Please help me what to do

This is my code

<div class="tab-pane " id="tab6">
<script>
    $(document).ready(function() {
      createStoryJS({
            type:       'timeline',
            width:      '600',
            height:     '700',
            source:     '<%= @orbituarysite.id %>',
            embed_id:   'my-timeline'
        });
    });
</script>

 <div id="my-timeline"></div>
 </div>

enter image description here

If i resize the window or open browser console its loading correctly

I tried giving active for this tab and in the end of page hide and show using jquery but it was of no use

Please suggest me a solution.

Anbazhagan p
  • 943
  • 1
  • 14
  • 27

1 Answers1

0

This problem has currently an open issue in TimelineJS project: https://github.com/NUKnightLab/TimelineJS/issues/496

Quoting @gregorleban:

had the same issue. you have to make sure the tab is visible before you call createStoryJS. best is to have something like:

setTimeout(function () {
    createStorylineJS();
    // make sure we create a storyline after the ui has actually updated and the sizes of the controls will be right
}, 100);

This workaround worked for me. You may need to increase the timer.

Luís Maia
  • 11
  • 1