javascript morris js twitter bootstrap on random thoughtshttps://awesomeprogrammer.com/categories/javascript-morris-js-twitter-bootstrap/Recent content in javascript morris js twitter bootstrap on random thoughtsHugo -- gohugo.ioen-usSun, 20 Jan 2013 00:00:00 +0000Morris.js display:none workaroundhttps://awesomeprogrammer.com/blog/2013/01/20/morris-dot-js-display-none-workaround/Sun, 20 Jan 2013 00:00:00 +0000https://awesomeprogrammer.com/blog/2013/01/20/morris-dot-js-display-none-workaround/Morris.js is great, simple and lightweight charts library powered by jQuery and Raphael. Unfortunately you may encounter an issue when you will try to plot a chart on element with display:none property - for example when using Twitter’s Bootstrap tabbed component - it just doesn’t render properly. So as a quick workaround you can fire-up after showing that element.

Bootstrap provides some neat javascript events that are fired after some specific actions. So when you dive in into documentation you will find out that you can catch shown even that is fired after the tab has been shown. Just like that:

$('a[data-toggle="tab"]').on('shown', function (e) {
  e.target // activated tab
  e.relatedTarget // previous tab
})

Just create a simple snippet and you are good to go.

]]>Morris.js is great, simple and lightweight charts library powered by jQuery and Raphael. Unfortunately you may encounter an issue when you will try to plot a chart on element with display:none property - for example when using Twitter’s Bootstrap tabbed component - it just doesn’t render properly. So as a quick workaround you can fire-up after showing that element.

Bootstrap provides some neat javascript events that are fired after some specific actions. So when you dive in into documentation you will find out that you can catch shown even that is fired after the tab has been shown. Just like that:

$('a[data-toggle="tab"]').on('shown', function (e) {
  e.target // activated tab
  e.relatedTarget // previous tab
})

Just create a simple snippet and you are good to go.

]]>