You migrated and now bam: Uncaught TypeError: Object [object Object] has no method ‘typeahead’ : (
In Bootstrap 3 the typeahead plugin was left out, didn’t make it, is deprecated (harsh) in favor of not having it at all ( also harsh) – or using Twitter Typeahead and here I thought Bootstrap was Twitter. Shows you how much I know.
You spent a couple minutes migrating to Bootstrap 3 ( OK a couple hours) as soon as the first release candidate came out, like a good little early adapter and now your search form doesn’t typeahead because Bootstrap 3 is acting like it has no idea what that is and so now you just have to suffer. Right? Well, you can still grab the plugin from 2.3.2 bootstrap.js and include it as a regular old js file and the typeahead action in your search form will come back… so it’s not the end of the world after all.
If it were up to me I’d be all Bootstrap 3 all the way but I have to work with LightSpeed Webstore 3 (whose themes are all based on Bootstrap 2). So I can’t just scrap Bootstrap 2 and move on to 3, it’s not up to me. I can’t replace their core files ( LightSpeed Web Store includes CSS & Javascript from Bootstrap 2 in your theme, of course you can remove it with .remove(); if you’re really hardcore).
So if you’re like me and making custom WordPress & LightSpeed Web Store 3 themes you will find yourself having to still have to keep some Bootstrap 2 stuff.
Another weird bit is .collapse. How .collapse is handled in 3 and in 2.3.2. I’m not going to tell you how long it took me to find out why I couldn’t get a simple toggle to work.
Whenever something “javascripty” doesn’t work I blame the javascript. But there were no errors in the console so that was a stumper. You would not think it but CSS can be just as dangerous as javascript. I use dangerous jokingly, but it’s true. Think how powerful display: none is.
2.3.2 .collapse {
position: relative;
height: 0;
overflow: hidden;
-webkit-transition: height 0.35s ease;
-moz-transition: height 0.35s ease;
-o-transition: height 0.35s ease;
transition: height 0.35s ease;
}
3.0.0 .collapse {
display: none;
}
.collapse.in {
display: block;
}
.collapsing {
position: relative;
height: 0;
overflow: hidden;
-webkit-transition: height 0.35s ease;
transition: height 0.35s ease;
}
See what they did? They moved the CSS transition from .collapse to .collapsing – 2 doesn’t have .collapsing.
So because I am using both – making a WordPress theme on Bootstrap 3, a LightSpeed theme on 2.3.2 and 3 ( only the CSS though) I had to add some extra over ride to my Web store theme:
#mything .collapse {
display: block;
}
#mything .collapse.in {
display: block;
}
Both 2 & 3’s js adds inline style to the collapsed element – height: auto and height: 0px;
Because of the CSS conflicts between 2 and 3 versions of .collapse and the missing .collapsing class in 2,
this little over ride actually works but only in combination with the inline styles.
There is a really, really, good reason why you shouldn’t try to use 2 versions of the same thing on the same site running on top of each other. But I wanted to see how Bootstrap3 worked.
It’s really much better, surprise!!!
OK, I’m done. Happy Sunday. What, I should be out in the fresh air because it’s a gorgeous day?