rails timelinejs 未在引导选项卡中正确加载答案

【问题标题】：rails timelinejs not loaded properly inside bootstrap tabrails timelinejs 未在引导选项卡中正确加载
【发布时间】：2023-03-20 01:15:02
【问题描述】：

我已将时间线编码（跟随https://github.com/NUKnightLab/TimelineJS）放在引导选项卡中，如果它被放置在第一个选项卡（活动选项卡）中，它被正确加载，但如果它被放置在其他选项卡中，它没有正确加载，我已经放置在第六个选项卡中

请帮我做什么

这是我的代码

<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>

如果我调整窗口大小或打开浏览器控制台，其加载正确

我尝试为此选项卡启用活动，并在页面末尾使用 jquery 隐藏和显示，但没有用

请给我一个解决方案。

【问题讨论】：

标签： ruby-on-rails twitter-bootstrap timeline.js

【解决方案1】：

这个问题目前在 TimelineJS 项目中有一个未解决的问题：https://github.com/NUKnightLab/TimelineJS/issues/496

引用@gregorleban：

有同样的问题。您必须确保该选项卡之前可见你调用 createStoryJS。最好有类似的东西：

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);

这个解决方法对我有用。您可能需要增加计时器。

【讨论】：