Tag Archives: bootstrap

Creating an ON/OFF switch using bootstrap and jQuery

In some projects that I work on, I need a quick way of adding some cool-looking user-friendly on/off switch. Checkboxes are ugly! And I don’t want to add a new component/plugin to the already loaded pages. So, I wrote some quick  code snippet for a switch based on Bootstrap 3 and jQuery. Here is the HTML code:

And here is the jQuery code (should be placed inside any jQuery DOM loaded block):

Here is what the output looks like when the page loads (the default state is locked): jquery-bootstrap-locked-switch

And when the switch is clicked, here is how it looks like (unlocked): jquery-bootstrap-unlocked-switch

Here is a demo of the switch in action. Have fun!

Bootstrap theme and IE7 and hours of debugging!

I was trying to apply bootstrap CSS framework to a page and things where going smooth until I started testing it with IE 8. For some reason, the drop-down menu in the navigation bar was not showing correctly .. it was stacked below other elements in the page.

The bootstrap drop-down menu appears correctly in Firefox.
The bootstrap drop-down menu appears correctly in Firefox.

 

But is rendered incorrectly in IE 8
But is rendered incorrectly in IE 8

Well .. I tried searching for a fix for this issue and stumbled upon several suggestions, mainly involving z-index CSS property. Unfortunately, none of them worked to fix this issue without breaking other elements.

It was really puzzling, specially that the example on the Bootstrap website was working just fine. So, I began tracing its code line by line, trying to remove some of the javascript libraries in my code one by one, adding html5shiv, removing it, adjusting meta tags .. nothing worked.

After several maddening hours, I found the ultimate cause of this issue … it was the Bootstrap theme CSS file that accompanies Bootstrap. This file adds some 3D shading effects to Bootstrap components. Here is how a page looks with and without it.

Bootstrap page without theme file.
Bootstrap page without theme file.
Bootstrap page with theme file.
Bootstrap page with theme file.

In IE 8, the drop-down bug would disappear if the theme file is not loaded.

In IE 8, not loading the Bootstrap theme file would eliminate the drop-down menu bug.
In IE 8, not loading the Bootstrap theme file would eliminate the drop-down menu bug.

So, basically, the fix was to load the Bootstrap theme file only if the browser is not IE, or is IE 9 or higher:

The above code tells browsers that are greater than IE 8 or not IE to load Bootstrap theme file. Otherwise, don’t. This works like a charm, though at the (bearable) cost of sacrificing 3D shading effects for IE 8 and below.

I hope this would help save someone hours of frustration!