Timeline.js breaks twitter bootstrap tabs

Question

Loading a timeline.js widget inside a twitter bootstrap nav tab, breaks the tabbed navigation.

In the code below, comment out createStoryJS(config) and tabs work fine.

Dont comment out -> timeline loads correctly but tab navigation breaks. Clicking on a tab gives a TypeError: $(..).tab() is not a function error in Firefox (same in chrome).

I suspect a bug but I could be missing an option somewhere.

Code:

<!DOCTYPE html>
<html>
<head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">

    <link href="assets/bootstrap/css/bootstrap.css" rel="stylesheet">
    <script src="assets/jquery.min.js"></script>
    <script src="assets/timeline/js/storyjs-embed.js"></script>
    <script src="assets/bootstrap/js/bootstrap.min.js"></script>

    <script>
        $(document).ready(function() {
            $('#tabbar').tab();
            $('#tabbar a').click(function (e) {
                e.preventDefault();
                $(this).tab('show');
            })

            data =
            {
                "timeline":
                {
                    "headline":"The Main Timeline Headline Goes here",
                    "type":"default",
                    "text":"<p>Intro body text goes here, some HTML is ok</p>",
                    "asset": {
                        "media":"http://yourdomain_or_socialmedialink_goes_here.jpg",
                        "credit":"Credit Name Goes Here",
                        "caption":"Caption text goes here"
                    },
                    "date": [
                    {
                        "startDate":"2011,12,10",
                        "endDate":"2011,12,11",
                        "headline":"Headline Goes Here",
                        "text":"<p>Body text goes here, some HTML is OK</p>",
                        "tag":"This is Optional",
                        "classname":"optionaluniqueclassnamecanbeaddedhere",
                        "asset": {
                            "media":"http://twitter.com/ArjunaSoriano/status/164181156147900416",
                            "thumbnail":"optional-32x32px.jpg",
                            "credit":"Credit Name Goes Here",
                            "caption":"Caption text goes here"
                        }
                    }
                    ],
                    "era": [
                    {
                        "startDate":"2011,12,10",
                        "endDate":"2011,12,11",
                        "headline":"Headline Goes Here",
                        "text":"<p>Body text goes here, some HTML is OK</p>",
                        "tag":"This is Optional"
                    }

                    ]
                }
            };

            var config = {
                type:       'timeline',
                width:      '800',
                height:     '600',
                source:     data,
                embed_id:   'my-timeline'
            };

            createStoryJS(config);
        });

    </script>

    <title></title>

</head>
<body>
    <div class="container">
        <ul class="nav nav-tabs" id="tabbar">
            <li class="active"><a href="#entities">Entities</a></li>
            <li><a href="#topics">Topics</a></li>
        </ul>

        <div class="tab-content">

            <div class="tab-pane active" id="entities">

                <div class="row-fluid">
                    1
                    <div id="my-timeline"></div>
                </div>
            </div>

            <div class="tab-pane" id="topics">
                <div class="row-fluid">
                    2   
                </div>
            </div>
        </div>
    </div>

</div>
</body>
</html>

Github issue created here: https://github.com/VeriteCo/TimelineJS/issues/454 — dgorissen, Jul 16 '13 at 05:58

score 1 · Answer 1 · answered Jul 31 '13 at 08:52

Ok I found a workaround which seems to work.

Instead of doing this:

$(this).tab('show');

Manually do the switch in the onclick handler.

//the previously active tab
var prev = $('#tabbar .active a').attr("href");

//the tab we want to activate
var target = $(e.target).attr('href');

//deactivate the current tab
var p = $('#tabbar a[href="' + prev + '"]')
p.parent().removeClass('active');

//activate the new one          
var n = $('#tabbar a[href="' + target + '"]');
n.parent().addClass('active');

//display the new one
$(prev).hide();
$(target).show();

A fix of the root cause would be better though.

Timeline.js breaks twitter bootstrap tabs

1 Answers1