loading timeline.js widget inside twitter bootstrap nav tab, breaks tabbed navigation.
in code below, comment out createstoryjs(config) , tabs work fine.
dont comment out -> timeline loads correctly tab navigation breaks. clicking on tab gives typeerror: $(..).tab() not function error in firefox (same in chrome).
i suspect bug missing 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, html 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, html ok</p>", "tag":"this 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, html ok</p>", "tag":"this 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>
ok found workaround seems work.
instead of doing this:
$(this).tab('show'); manually switch in onclick handler.
//the active tab var prev = $('#tabbar .active a').attr("href"); //the tab want activate var target = $(e.target).attr('href'); //deactivate current tab var p = $('#tabbar a[href="' + prev + '"]') p.parent().removeclass('active'); //activate new 1 var n = $('#tabbar a[href="' + target + '"]'); n.parent().addclass('active'); //display new 1 $(prev).hide(); $(target).show(); a fix of root cause better though.
Comments
Post a Comment