2

タイムライン コーディング ( https://github.com/NUKnightLab/TimelineJSに従う) をブートストラップ タブ内に配置しました。最初のタブ (アクティブなタブ) に配置すると正しく読み込まれますが、残りのタブに配置すると正しく読み込まれていません。6 番目のタブに配置しました

何をすべきか助けてください

これは私のコードです

<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を使用して非表示と表示をアクティブにしてみましたが、役に立ちませんでした

解決策を教えてください。

4

1 に答える 1

0

この問題には、現在 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);

この回避策は私にとってはうまくいきました。タイマーを増やす必要がある場合があります。

于 2014-07-30T20:51:59.767 に答える