Tag Archives: bootstrap

Bootstrap 3.3 – dropdown mobile menu not working

Cryptocurrency, Sh*ts,

Yah!,

For a client, who is using Bootstrap v3.3.7, the dropdown menus on mobile weren’t working properly.

When clicking on BTC-Alpha on a mobile device the menu would close.

The solution was to edit bootstrap.js and on line +- 818

if ('ontouchstart' in document.documentElement && !$parent.closest('.navbar-nav').length) {
  // if mobile we use a backdrop because click events don't delegate
  $(document.createElement('div'))
   .addClass('dropdown-backdrop')
   .insertAfter($(this))
   .on('click', clearMenus)
}

comment

$(document.createElement('div')) 
.addClass('dropdown-backdrop')
.insertAfter($(this))
.on('click', clearMenus)

so we have something like this

 

Breaking the PageSpeed Barrier with Bootstrap

Metrics, , ,

I recently had the pleasure to listen to Ilya Grigorik give a talk at Velocity in NYC on Breaking the 1000ms Mobile Barrier. During the talk, Ilya usedPageSpeed Insights to demonstrate that several high profile websites had overlooked some very simple and common optimizations and resulted in poor PageSpeed scores. For the unfamiliar, Pagespeed Insights is a web based tool created by Google that analyzes the content of a web page, then generates suggestions to make that page faster.

After Ilya’s talk ended, I started to think more about why performance always seems to be an afterthought with developers. As I pondered this thought, I kept coming back to the following question:

How hard is it to get a perfect PageSpeed Insights score?

 

Displaying charts in tabs

Sh*ts, ,

I have two amcharts on different tabs. A stock chart to be place on #chartdiv and a pie chart to be placed on #chartdivpie. This is how I solved my problem.

My custom css – to overwrite bootstrap –

#chartdivpie { width: 1138px; height: 500px; }
.tab-content .tab-pane {
   position: absolute;
   top: -9999px;
   left: -9999px;
   display: inline;
}
.tab-content .tab-pane.active {
    position: inherit !important;
}

JQuery call

$('#myTab a').click(function (e) {
      e.preventDefault()
        $(this).tab('show');
        chart.invalidateSize();
        chart.write('chartdiv');
    })

 

See the discussion here http://stackoverflow.com/questions/10013408/amcharts-doesnt-display-chart-for-initially-hidden-divs/22289182#22289182