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

Posted 2023-05-07

【中文标题】rails timelinejs 未在引导选项卡中正确加载

【英文标题】：rails timelinejs not loaded properly inside bootstrap tab

【发布时间】：2013-09-23 05:30:33

【问题描述】：

我已将时间线编码（跟随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 隐藏和显示，但没有用

请给我一个解决方案。

【参考方案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);

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