I get an error as soon as I add jQuery and Bootstrap. The three files that I add are
1) a_jquery-1.11.2.min.js // so that it is processed before 'b' in bootstrap
2) bootstrap.min.css
3) bootstrap.min.js
and they are located in /lib.
If I add bootstrap without jQuery, I get an error saying that Bootstrap needs jQuery. After I add jQuery I get the following error messages.
/Users/username/.meteor/packages/meteor-tool/.1.0.40.cbg34i++os.osx.x86_64+web.browser+web.cordova/meteor-tool-os.osx.x86_64/dev_bundle/server-lib/node_modules/fibers/future.js:173
throw(ex);
^
TypeError: Cannot call method 'createElement' of undefined
at jb (app/lib/a_jquery-1.11.2.min.js:2:7547)
at app/lib/a_jquery-1.11.2.min.js:2:22045
at app/lib/a_jquery-1.11.2.min.js:2:22746
at c (app/lib/a_jquery-1.11.2.min.js:2:207)
at app/lib/a_jquery-1.11.2.min.js:2:212
at app/lib/a_jquery-1.11.2.min.js:6:3
at /Users/username/my_app/.meteor/local/build/programs/server/boot.js:205:10
at Array.forEach (native)
at Function._.each._.forEach (/Users/username/.meteor/packages/meteor-tool/.1.0.40.cbg34i++os.osx.x86_64+web.browser+web.cordova/meteor-tool-os.osx.x86_64/dev_bundle/server-lib/node_modules/underscore/underscore.js:79:11)
Does anyone know what I am missing?
EDIT: I also have a question about including the stylesheets. I include a CDN bootstrap in /client/views/layout.html but as soon as I delete the importing line and save a local bootstrap.min.css file in /lib the styles start breaking. Why does this happen?
The /lib folder is for shared code, putting client-side frameworks in it will cause you a lot of trouble since Meteor will try to run it on the server too (and miserably fail at finding a window object). Place any client-only code in the client folder instead.
Plus, I would suggest taking a look at packages rather than doing it yourself, a lot of people have already done what you're going through.
If you want to have local style sheets, either put them in the client folder (loaded immediately) or in the public folder (for delayed loading via an import). More about special folders in the documentation.
You can't put them in /lib since anything in there is also loaded by the server. /client/lib would be okay.
Note also that you don't need jQuery, that comes by default (it's used by Blaze).
Finally, I'd recommend using a bootstrap package. If you use this one then you'll by able to make use of all the mixins and also change the base varaibles cleanly. See this article for more information.
Related
I'm working on theming a web app, and I ran into a problem with an angular directive that is being used. It's called angular-knob, and it uses an HTML5 canvas to display a progress bar input. Since it's a canvas, you have to tell it the color in JavaScript instead of CSS. This is the problem.
The rest of the site is themed based on a set of LESS variables. I would like the canvas to be the color of #brand-primary from the variables.less file, which could also be overridden in other theme-*.less files. I haven't found a good solution to this yet, but these are some of the ideas I've had:
Parse the variables from the LESS file with some kind of ASP.Net utility (haven't found anything that would do this for me) to get the variable names and then render them to the client in a JavaScript variable (which I could then put in an angular service)
Have gulp parse the variables from the LESS file (again, haven't found any npm packages that would do this for me) and create a script that puts the variables in with the JavaScript bundle.
Like I said, I haven't found any LESS file parsing utilities for ASP.Net or npm that would get me access to the LESS variables.
How would you tackle this kind of problem? Has anyone else had to handle something like this?
I wish there were better instructions for installing and getting started with Semantic-ui on Meteor....please see below.
Any improvements/feedback welcome.
I just decided to post these because of some difficulties I had getting semantic-ui to work with Meteor. I figured out the few things I was not getting from various answers across various forums:
Install via CLI: meteor add semantic:ui flemay:less-autoprefixer (You don't need to worry about LESS)
Create an empty custom.semantic.json file in /client/lib/semantic-ui/custom.semantic.json. (Note this is NOT the lib folder that is outside the client and server folders - make a new lib folder. Putting it in the original lib will cause your app to crash because jQuery hasn't been loaded
Start meteor - the custom.semantic.json file will populate and all the semantic-ui files will be added to your project in the same folder.
Edit the file custom.semantic.json to select only the definitions and themes you want
If you are happy with the default values you will need to remove .custom.semantic.json to generate Semantic UI - in all likelihood you will want to delete this file.
Save the file and it will generate Semantic UI
It hasn't been an issue for me yet but it appears that if you are changing theme you still need to leave the default theme setting as true. This seemed to be causing people confusion.
I wanted to use the accordion and couldn't figure how to get it working. The HTML from the docs is very straightforward but I needed this JS to get me going:
Template.yourTemplate.rendered = function() {
$('.ui.accordion').accordion();
}
If anyone knows a better way, please jump in.
Hope this helps someone avoid the minor frustrations I had earlier today.
I just started using the feature that allows you to compile all TypeScript to a single .js file. The problem I ran into, as you'd expect, is that the entire .js file is executed, and not just the module(s) that I need my page to execute.
Are there any built in utilities that allow me to specify this? If not, what else can I use? I work with a team using source control, so a solution like a NuGet package that can automatically get installed for my colleagues when they use the project is preferable.
The problem I ran into, as you'd expect, is that the entire .js file is executed, and not just the module(s) that I need my page to execute.
You shouldn't have code randomly put at a global level. The global level of your code be just functions and class that are inert by them selves.
Then have the UI call these functions / classes based on current html. Some UI framework (like angular) can help you do this seperation in a neat way (example : https://www.youtube.com/watch?v=Km0DpfX5ZxM&feature=youtu.be)
I have the Less package loaded in my Meteor application and it is working fine. Now I need to allow the users of my app. to override my less variables. I have looked at :
less.modifyVars({
'#canvas': '#5B83AD'
});
but my app. is saying that 'less is not defined'. Can someone suggest how this can be done?
Less files can only be modified up to the point they're compiled to css files. This happens when you deploy your Meteor app.
It's not possible to change less variables at runtime. You would have to manipulate the DOM instead. Jquery is able to do this by targeting the DOM elements you want to change. You would have to tag them with a class.
An approach this way make work for you:
<div class="canvas"></div>
Then you could edit it at runtime using Jquery:
$(".canvas").css({background: '#5B83AD'});
Edit: I think the code you're refering to is the less.js client side file from https://github.com/less/less.js/. There's a bit more info under 'Client side usage' on http://lesscss.org/
This is a bit different from the Meteor less package, which is exclusively a server side compiler during development.
If you downloaded the less.js file (from https://github.com/less/less.js/archive/master.zip) and placed it in your /client/compatiblity folder you could use it in the way you wish. Keep in mind you may have to remove the Meteor less package since you want to load them raw, you will also need to reference them manually as Meteor will ignore the less once you remove the less package.
I'm trying to troubleshoot a LESS issue with my Meteor code..
I have bootstrap3-less package installed but I don't know where Meteor is getting it's LESS files from. This whole time I thought it was coming from a .less file in my client/ folder but I removed that entirely but for some reason my Meteor CSS file does not change once I remove that. But yet, when I inspect the compiled CSS file, it stayed exactly the same.
However, when I make changes to my .css file Meteor picks that up right away..
Anyone have this experience? thanks
The bootstrap3-less package contains the less code inside itself. If you want to use your own less code instead of the code inside bootstrap3-less, you should remove bootstrap3-less.
Here you can see the code that the bootstrap3-less package adds to your app: https://github.com/simison/bootstrap3-less
They suggest that you can customize bootstrap by adding the less file to your client folder, but even if you don't have that file the app will load all of the less content from the package.