isotope (again!) overlaping images Vertical - vertical-alignment

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>

Related

Siunitx plugin in mathjax and talkyard

I am trying to enable siunitx for a (hosted) talkyard side and by adding the following to the html header:
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
extensions: ["tex2jax.js","[siunitx]/siunitx.js"],
jax: ["input/TeX","output/HTML-CSS"],
tex2jax: {inlineMath: [["$","$"],["\\(","\\)"]]},
TeX: {extensions: ["AMSmath.js","AMSsymbols.js", "sinuitx.js"]}
});
MathJax.Ajax.config.path['siunitx'] = 'http://rawgit.com/burnpanck/MathJax-siunitx/master/';
</script>
<script type="text/javascript" async
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-MML-AM_CHTML">
</script>
<script>
talkyard.postElemPostProcessor = function(elem) {
console.log('Telling MathJax to post process elem: ' + elem);
MathJax.Hub.Queue(["Typeset", MathJax.Hub, elem]);
};
</script>
However rawgit seems to be down now and I didn't find another server for it. So how can I enable the siunitx extension on a hostet talkyard site?

how the inherit happened in phaser

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>

Express ignoring assets list and including every javascript file

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.

Script stops at YAHOO.util.Event.addListener

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

YUI CustomEvent no errors being reported

Does anyone know how to get the below to report a javascript error? (any browser)
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/yui/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js">
</script>
<script type="text/javascript">
ObjWithEvent = {
testEvent: new YAHOO.util.CustomEvent("testEvent")
};
ObjSubscriber = {
handleTestEvent: function(){
alert('the next line will not show up in the error console');
not_a_valid_function_bro();
}
};
ObjWithEvent.testEvent.subscribe(ObjSubscriber.handleTestEvent);
ObjWithEvent.testEvent.fire();
</script>
</head>
<body>
</body>
Possibly one of the worst chosen default settings ever.....
YAHOO.util.Event.throwErrors is set to false by default, so if you want to see errors:
YAHOO.util.Event.throwErrors = true;

Resources