I'm having some trouble figuring our why express is attaching every javascript file in my bower modules instead of just the ones I specify in the assets.json file. I get the feeling it's a daft mistake somewhere, I just don't understand where!
My assets file looks like so:
{
"css": {
"public/build/css/dist.min.css": [
"public/lib/angular-snap/angular-snap.min.css",
"public/lib/animate.css/animate.min.css",
"public/lib/bootstrap/dist/css/bootstrap.min.css",
"public/lib/font-awesome/css/font-awesome.min.css",
"public/lib/angular-toggle-switch/angular-toggle-switch.css",
"public/lib/intro.js/minified/introjs.min.css",
"public/lib/ng-table/ng-table.css",
"public/lib/leaflet-dist/leaflet.css",
"public/lib/leaflet.markerclusterer/dist/MarkerCluster.css",
"public/lib/leaflet.markerclusterer/dist/MarkerCluster.Default.css",
"public/css/common.css"
]
},
"js": {
"public/build/js/dist.min.js": [
"public/lib/angular/angular.min.js",
"public/lib/angular-bootstrap/ui-bootstrap.js",
"public/lib/angular-bootstrap/ui-bootstrap-tpls.js",
"public/lib/angular-cookies/angular-cookies.js",
"public/lib/angular-leaflet-directive/dist/angular-leaflet-directive.js",
"public/lib/angular-resource/angular-resource.js",
"public/lib/angular-route/angular-route.js",
"public/lib/angular-sanitize/angular-sanitize.js",
"public/lib/angular-snap/angular-snap.min.js",
"public/lib/angular-toggle-switch/angular-toggle-switch.js",
"public/lib/angular-ui-utils/ui-utils.min.js",
"public/lib/d3/d3.min.js",
"public/lib/highcharts-ng/dist/highcharts-ng.min.js",
"public/lib/intro.js/minified/intro.min.js",
"public/lib/leaflet-dist/leaflet.js",
"public/lib/leaflet-plugins/layer/tile/Google.js",
"public/lib/leaflet.markerclusterer/dist/leaflet.markercluster.js",
"public/lib/modernizr/modernizr.js",
"public/lib/momentjs/min/moment.min.js",
"public/lib/ng-table/ng-table.js",
"public/lib/snapjs/snap.min.js",
"public/lib/typeahead.js/dist/typeahead.bundle.min.js",
"public/lib/underscore/underscore-min.js",
"public/lib/underscore.string/dist/underscore.string.min.js",
"public/*/*.js",
"public/*/*/*.js"
]
}
}
I create an assets variable in express.js here:
// Import your asset file
var assets = require('./assets.json');
assetmanager.init({
js: assets.js,
css: assets.css,
debug: (process.env.NODE_ENV !== 'production'),
webroot: 'public'
});
And finally add these to my view using an each loop in my jade template
- each file in assets.js
script(type='text/javascript' src=file)
What I'm expecting to happen is that all the scripts I've listed in assets.json be added to my template. Instead it seems to include all .js files under public/lib - which as you can imagine causes some unusual results.
A sample of which is here
<script type="text/javascript" src="/lib/angular/angular.js"></script>
<script type="text/javascript" src="/lib/angular/angular.min.js"></script>
<script type="text/javascript" src="/lib/animate.css/Gruntfile.js"></script>
<script type="text/javascript" src="/lib/d3/d3.js"></script>
<script type="text/javascript" src="/lib/d3/d3.min.js"></script>
<script type="text/javascript" src="/lib/highcharts-ng/Gruntfile.js"></script>
<script type="text/javascript" src="/lib/highcharts-ng/karma.conf.js"></script>
<script type="text/javascript" src="/lib/intro.js/intro.js"></script>
<script type="text/javascript" src="/lib/jquery/jquery-migrate.js"></script>
<script type="text/javascript" src="/lib/jquery/jquery-migrate.min.js"></script>
<script type="text/javascript" src="/lib/jquery/jquery.js"></script>
<script type="text/javascript" src="/lib/jquery/jquery.min.js"></script>
Turns out it was a daft mistake. The last two rules in my assets file included the lib folder because of the asterisks.
Related
I just use Phaser and saw some example code like below. In the Rox.Boot.prototype function, the .load, .physics, etc, are all in game(Phaser.Game). How does this inheritance happen?
Rox = {
score: 0,
music: null,
orientated: false
};
Rox.Boot = function (game) {
};
Rox.Boot.prototype = {
preload: function () {
this.load.image('preloaderBar', 'images/preload.png');
},
create: function () {
this.physics.startSystem(Phaser.Physics.ARCADE);
this.input.maxPointers = 1;
this.state.start('Preloader');
},
};
To use Phaser, you have to have a phaser.min.js or phaser.js file which you can get here. I use the phaser.min.js file instead of the phaser.js file because I don't need the extra features that the phaser.js file has (debugging); phaser.min.js will have all the same methods, classes, properties, etc as phaser.js.
They tell you to download the whole GitHub repo, but really you just need the Phaser JS file.
After you add the phaser.min.js file to your project, make sure it's the first script you call in the head of your HTML file; you should be able to use Phaser in the following JS files after that.
Here is what my index.html looks like:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>FILL_IN_GAME_NAME_HERE</title>
<script src="phaser.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="Main.css">
<script src="Boot.js" type="text/javascript"></script>
<script src="Preloader.js" type="text/javascript"></script>
<script src="Menu.js" type="text/javascript"></script>
<script src="Game.js" type="text/javascript"></script>
<script src="GameOver.js" type="text/javascript"></script>
<script src="HighScores.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
var game = new Phaser.Game(500, 500, Phaser.AUTO, 'game', false, false);
game.state.add('Boot', Game.Boot);
game.state.add('Preloader', Game.Preloader);
game.state.add('Menu', Game.Menu);
game.state.add('Game', Game.Game);
game.state.add('GameOver', Game.GameOver);
game.state.add('HighScores', Game.HighScores);
game.state.start('Boot');
</script>
</body>
</html>
i've searched, i've tried but i couldn't find the answer.
I've got many images in isotope filtering, i've got imagesLoaded but images are still overlaping at each other in vertical.
Here's the link http://cpmedia.pl/test/portfolio.html
the code:
$(function(){
var $container = $('#container');
$container.imagesLoaded( function(){
$container.isotope({
itemSelector : '.itemwrap',
layoutMode: 'horizontal',
horizontal: {
verticalAlignment: 0.5
}
});
});
});
and stil nothing...
First, you are loading jquery twice, once by itself and again with yepnope. Second, you are calling isotope twice as well, once with imagesloaded on #container ( which I don't see on your page) and again on . portfolioContainer, which does exist but is not called using imagesLoaded. You need to load jQuery once, and call isotope once and try this code:
$(function(){
var $container = $('.portfolioContainer');
$container.imagesLoaded( function(){
$container.isotope({
itemSelector : '.itemwrap',
layoutMode: 'horizontal',
horizontal: {
verticalAlignment: 0.5
}
});
});
});
If you want to use horizontal, then get it here and load it as well
ADDENDUM:
Looking at your source, you are still loading multiple copies of your js files. This is what I see in your source:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="assets/core/libs/js/loader.js"></script>
<script src="assets/core/libs/js/vendor/jquery.livetwitter.min.js"></script>
<script src="assets/core/libs/js/vendor/jquery.selestnav.min.js"></script><script src="assets/core/libs/js/plugins.js"></script>
<script src="assets/core/libs/js/main.js"></script>
<script src="assets/user/user.js"></script><script src="skinme/skinme.js"></script>
<script type="text/javascript" async="" src="http://www.google-analytics.com/ga.js"></script> <script src="./assets/core/libs/js/jquery.min.js"></script>
<script src="./assets/core/libs/js/loader.js"></script>
<script src="./assets/html5lightbox.js"></script>
<script src="./assets/core/libs/js/jquery.isotope.min.js"></script>
<script src="./assets/core/libs/js/jquery.livetwitter.min.js"></script>
<script src="./assets/core/libs/js/jquery.jribbble.min.js"></script>
<script src="./assets/core/libs/js/jquery.selestnav.min.js"></script>
<script src="./assets/core/libs/js/plugins.js"></script>
<script src="./assets/core/libs/js/main.js"></script>
<script src="./assets/core/libs/js/user.js"></script>
<script src="./assets/core/libs/js/skinme.js"></script>
<script src="./assets/core/imagesloaded.pkgd.js"></script>
I am using the following code Html to load the scripts that I need. I am getting $ as Undefined. It is not able to load the jquery.
How can I get this to work.
<html>
<head>
<title>Using The Text Plugin With RequireJS</title>
<script data-main="Scripts/init type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.6/require.min.js"></script>
<script type="text/javascript" language="javascript">
require(['jquery', 'knockout-2.2.1', 'Template', 'text!Template.htm'], function ($, ko, t, temp) {
$("body").append(temp);
//make this new template engine our default engine
ko.setTemplateEngine(t.myExternalTemplateEngine(t.templates));
ko.applyBindings(t);
});
</script>
</head>
code in Init.js in a separate file
require.config({
baseUrl:'Scripts',
paths: {
'jquery': '//cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.js',
'knockout-2.2.1': '//cdnjs.cloudflare.com/ajax/libs/knockout/2.2.1/knockout-min.js',
'knockout.mapping-latest': '//cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.3.5/knockout.mapping.js',
'Template': 'Template',
'text': '//cdnjs.cloudflare.com/ajax/libs/require-text/2.0.5/text',
'domready': '//cdnjs.cloudflare.com/ajax/libs/require-domReady/2.0.1/domReady.js'
}
});
Remove the .js from your paths configuration:
paths: {
'jquery': '//cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery'
}
More detail in this example repo
I have a simple ExtJS4 MVC test application started with:
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="/Test/extjs-4.1.0/resources/css/ext-all.css">
<link rel="stylesheet" type="text/css" href="/Test/extjs-4.1.0/resources/css/CheckHeader.css">
<script type="text/javascript" src="/Test/extjs-4.1.0/ext-all-dev.js"></script>
<script type="text/javascript" src="/Test/ajax/api-debug.js?apiNs=MyNamespac"></script>
<script type="text/javascript" src="/Test/app.js"></script>
</head>
<body><div id="viewport"></div></body>
</html>
And here is the actual app.js code (i've copied the CheckColumn.js file to extjs-4.1.0\src):
Ext.Loader.setConfig({ enabled: true });
Ext.require([ 'Ext.ux.CheckColumn' ]);
Ext.direct.Manager.addProvider(MyNamespace.REMOTING_API);
Ext.application({
name : 'Auctions',
controllers : [ 'TestDates' ],
appFolder : '/Test/app',
launch : function() {
Ext.create('Ext.Panel', {
layout : 'fit',
items : [ {
xtype : 'testdates'
} ],
renderTo : 'viewport',
});
}
});
I had to include the Loader, otherwise the app complained it cannot load the controller. I also had to require the CheckColumn, otherwise the checkcolumn xtype was not recognized.
I am not getting the following error:
The following classes are not declared even if their files have been
loaded: 'Ext.ux.CheckColumn'. Please check the source code of their
corresponding files for possible typos: './ux/CheckColumn.js
You should create folder ux under extjs-4.1.0\src and copy CheckColumn.js file there. There is always a link in ExtJs between class name and location of the file. If you class name is Ext.ux.CheckColumn then path must be .\src\ux\CheckColumn.js
I am new to YUI. Just trying to get a most basic functioning example working on my site.
Here is the code:
<button id="mytest">test</button>
<script type="text/javascript">
var helloWorld = function(e) {
alert("Hello World!");
}
</script>
<script type="text/javascript">
alert('xx');
YAHOO.util.Event.addListener("mytest", "click", helloWorld);
alert('x2');
</script>
The xx alert shows, but the x2 alert never does. And, clicking on the button does not fire the HelloWorld function.
I have the necessary include files:
<!-- Required CSS -->
<link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/2.8.1/build/progressbar/assets/skins/sam/progressbar.css">
<!-- Dependency source file -->
<script src = "http://yui.yahooapis.com/2.8.1/build/yahoo-dom-event/yahoo-dom.event.js" ></script>
<script src = "http://yui.yahooapis.com/2.8.1/build/element/element-min.js" ></script>
<!-- Optional dependency source file -->
<script src="http://yui.yahooapis.com/2.8.1/build/animation/animation-min.js" type="text/javascript"></script>
<!-- ProgressBar source file -->
<script src = "http://yui.yahooapis.com/2.8.1/build/progressbar/progressbar-min.js" ></script>
you should be sure the js files are included on you html files,the code your write is write!
Believe I found it. Or at least I was able to find other examples which worked. But in my case I believe the problem is the js files I was referencing in fact did not exist. Namely this file:
http://yui.yahooapis.com/2.8.1/build/yahoo-dom-event/yahoo-dom.event.js
sure, it is yahoo dash dom DASH event, not yahoo dash dom DOT event