Menu
I have a Bootstrap theme from https://wrapbootstrap.com/ that I want to use in my MeteorJS application. The issue is it has script tags like:
<!--[if !lte IE 6]><!-->
<!-- Link to Google CDN's jQuery + jQueryUI; fall back to local -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery.min.js"><\/script>')</script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>window.jQuery.ui || document.write('<script src="js/libs/jquery.ui.min.js"><\/script>')</script>
script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></scrip>
<!-- RECOMMENDED: For (IE6 - IE8) CSS3 pseudo-classes and attribute selectors -->
<!--[if lt IE 9]>
<script src="js/include/selectivizr.min.js"></script>
<![endif]-->
<script src="js/libs/jquery.ui.touch-punch.min.js"></script> <!-- REQUIRED: A small hack that enables the use of touch events on mobile -->
which don't work when added to MeteorJS. I know tags don't work, but how would you acoomodate this designed page to MeteorJS?
Later edit:
I added the script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script> above. All the above scripts are added in the <body>. The google.maps library is used in lib/main.js and it doesn't work with MeteorJS because it raises ReferenceError. Outside of Meteor it works fine.
Any ideas on how to add that Google Maps script from the Bootstrap Template?
Later edit:
The Bootstrap template has a lib/main.js file which is the last javascript file imported. Nevertheless, when I add it to Meteor, it seems to be run, but its effects are not seen in UI. For example, it executes this line $(".chzn-select").select2(); but only when I execute it from the Console I can see the UI changes. This file is loaded last by Meteor. I also tried with
function load_scripts() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "lib/main.js";
document.body.appendChild(script);
}
if (Meteor.is_client) {
window.onload = load_scripts;
}
with no success.
624
Open the shopping cart project and install Bootstrap. Import it in the client/index. js file like any JavaScript module: Meteor will add it to the head, and the browser will reload automatically; you will immediately note a difference in the design.
To install the Bootstrap Snippet Pack, from Visual Studio, go to Tools, then Extensions and Updates > Online > Search Bootstrap Snippet Pack. Once Installed, from Visual Studio editor, hit CTL+K, CTL+X to bring in the snippet tool. Then select Bootstrap and the component needed.
These external themes might not be compatible with the default bootstrap included with meteor, so you should remove meteor's bootstrap package:
Remove default bootstrap:
meteor remove bootstrap
Add your theme:
Place your css files in your project's css directory, say /client/css
Place the themes javascript files in /client/lib
Don't worry about the script tags, or linking any of them or anything, meteor should take care of all of that.
Also
Meteor includes JQuery by default so you don't have to worry about including it in your project. To add jquery if for some odd reason you're meteor project might not have it use:
meteor add jquery
External Apis
e.g FB/Google Mapis API/Tracking scripts. Add them in the <head> section of your html file as normal.
Hopefully you find all of this cool!!
120
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
