I have a very simple Crafty.js script working in Chrome.
in my component file I have this component:
Crafty.c('PlayerCharacter', {
init: function() {
var playerRef = this;
playerRef.bind("KeyDown", function(e)
{
if (playerRef.isDown('LEFT_ARROW')) {
playerRef.x=playerRef.x-16;
myPlayer.sendMessage("LEFT");
} else if (playerRef.isDown('RIGHT_ARROW')) {
playerRef.x=playerRef.x+16;
myPlayer.sendMessage("RIGHT");
} else if (playerRef.isDown('UP_ARROW')) {
playerRef.y=playerRef.y-16;
myPlayer.sendMessage("UP");
} else if (playerRef.isDown('DOWN_ARROW')) {
playerRef.y=playerRef.y+16;
myPlayer.sendMessage("DOWN");
}
});
},
});
And then in my start function of the game, I have :
Crafty.e("2D, DOM, Color, Keyboard, Mouse, PlayerCharacter")
.attr({x: 20*16, y: 20*16, w: 16, h: 16})
.color('rgb(255,0,0)');
As mentioned the Player Character displays and moves as expected in Chrome, however in Firefox it simply displays initially and does not move. There are no errors generated.
If anyone has any ideas or ideas on how to debug this (currently using Firebug, with limited success).
BTW: the following alternate code also works in Chrome and not in Firefox
Crafty.c('Actor', {
init: function() {
this.requires('2D, Canvas, Grid');
},
});
Crafty.c('PlayerCharacter', {
init: function() {
this.requires('Actor, Fourway, Color')
.fourway(4)
.color('rgb(20, 75, 40)');
}
});
Related
I have a slick-carousel that a have some accordion tabs inside.
I need to be able to react to the bootstrap accordion collapse/expansion and adjust the height of the carousel.
It adjusts with the adaptive height correctly but only once done a full rotation.
How would I go about this.
so have established this so far. I are actually using velocityjs for the accordion.
if ($(this).hasClass('active')) {
toggleActivePanel.find('.content-collapse').attr('aria-expanded', false).velocity('slideUp', {
easing: 'easeOutQuad'
}, { complete: resize_slider() });
$(this).attr('aria-expanded', false).removeClass('active');
} else {
toggleActivePanel.find('.content-collapse').attr('aria-expanded', true).velocity('slideDown', {
easing: 'easeOutQuad'
}, { complete: resize_slider() });
$(this).attr('aria-expanded', true).addClass('active');
}
function resize_slider() {
var sliderAdaptiveHeight = function () {
var heights = [];
let items = $('.slick-active')
items.each(function () {
heights.push($(this).height());
});
$('.slick-list').height(Math.max.apply(null, heights));
}
sliderAdaptiveHeight();
$('.slider').on('afterChange', function (event, slick, currentSlide, nextSlide) {
sliderAdaptiveHeight();
});
}
the resize_slider function is being triggered however the height adjustments are back to front.
ie when expanding the slick slider height retracts and when collapsing the slick slider expands.
any thoughts
I seem to be encountering issues when attempting to scroll between a regular scrollify panel and interstitialSection. I need to add the elements within the interstitialSection to the standardScrollElements as they need to be scrollable.
When you scroll quickly on a desktop there is flickering and when using a mobile it exhibits other issues like not enabling scrollify on scrolling. When you clear the 'StandardScrollElements' it stops the flickering but doesn't allow scrolling of the content on the slide mainly on mobile.
$.scrollify({
section: ".slide",
scrollbars: true,
easing: "easeOutExpo",
scrollSpeed: 800,
updateHash: false,
standardScrollElements: ".footer-content,.news",
interstitialSection: ".slide-content,.clients,footer",
before: function () {
},
after: function (i) {
$.scrollify.current().find("[data-animated]").each(function () {
var animClass = $(this).attr("data-animated");
$(this).addClass("animated");
$(this).addClass(animClass);
});
},
afterRender: function () {
$.scrollify.current().find("[data-animated]").each(function () {
var animClass = $(this).attr("data-animated");
$(this).addClass("animated");
$(this).addClass(animClass);
});
}
});
We cron a phantomjs rasterize.js http://website.com filename.pdf which stopped working (blank PDFs) when the website became more "fancy". If I change it to filename.png it works though.
I tried changing this timeout to 9999 in rasterize and I still get a blank PDF. The default rasterize.js was working before the website switch.
Any ideas what to change/add to rasterize to make it work again?
page.open(address, function (status) {
if (status !== 'success') {
console.log('Unable to load the address!');
phantom.exit();
} else {
window.setTimeout(function () {
page.render(output);
phantom.exit();
}, 9999);
});
I had some problems with this to a year or so ago. For me (if i remember right), it had to do with #media tags. (Again, if i remember right) Pdf's are generated with media print css, while png's are not. Try what happens when you remove all #media print css.
EDIT 23/9/2014
I don't know how problematic this is for you (as how much effort you want to put in it), but if it was me, i would try something like this first:
var page = require('webpage').create();
var args = require('system').args;
var output_file = args[1], url =args[2];
page.viewportSize = { width: 1440, height: 900 };
page.paperSize = {
format: "A4",
orientation: "landscape",
margin: { left: "1cm", right: "1cm", top: "1cm", bottom: "1cm" }
};
console.log(url);
page.onLoadFinished = function (status) {
window.setTimeout(function () {
try {
page.evaluate(function () {
jQuery("link").each(function (i, v) {
jQuery(v).attr("media", "all");
});
});
page.render(output_file);
}
catch (e) {
status = e.message;
}
console.log(status + ';;' + output_file);
phantom.exit();
}, 1000);
}
try {
page.open(url);
console.log('loading');
}
catch (ex) {
console.log(ex.message);
phantom.exit();
}
Offcourse whatever you want to do within the evaluate function depends on what the contents of the html are.
A somewhat more decicive way of telling what goes wrong is logging the source of whatever is loaded by using console.log(page.content); and then using that to see whats going wrong. (just copy that source into a 'test.html' file and see in browser, remember that (offcourse) links will be broken)
Was wondering if you guys can point me in the right direction, my brain's a bit fried at the moment from pulling an all-nighter.
I'm trying to achieve what should be a relatively easy task using the Waypoints plugin that adds a class to a div when in view that switches it to full opacity. When the user continues to scroll down (or up), that class is faded out by removing the class which is then applied to the next div in view.
I found a site that achieves the desired effect I'm looking for here:
http://www.araujoestate.com/pages/the-land.html
I believe the answer lies in the "Above" and "Below" callbacks?
Thanks for any input on this one.
UPDATED
I developed the following JSFiddle:
http://jsfiddle.net/nbgdzspy/2/
I'm producing the desired effect I was looking for, but was wondering if there's a more cleaner way to approach the code... Seems rather clunky.
$('#test1').waypoint(function(direction) {
if (direction === 'down') {
$(this).addClass("waypoint-here");
}
}, {
offset: '50%'
}).waypoint(function(direction) {
if (direction === 'up') {
$(this).addClass("waypoint-here");
$("#test2").removeClass("waypoint-here");
}
}, {
offset: '25%'
});
$('#test2').waypoint(function(direction) {
if (direction === 'down') {
$("#test1").removeClass("waypoint-here");
$(this).addClass("waypoint-here");
}
}, {
offset: '50%'
}).waypoint(function(direction) {
if (direction === 'up') {
$(this).addClass("waypoint-here");
$("#test3").removeClass("waypoint-here");
}
}, {
offset: '25%'
});
I think I found a rather simple solution to my problem above... Amazing what some fresh air can do.
Here's the code I plan on implementing:
$(function() {
$('.waypoint').waypoint(function(direction) {
if (direction === 'down') {
$(this).addClass("waypoint-here");
$(this).prev().removeClass("waypoint-here");
}
}, {
offset: '50%'
}).waypoint(function(direction) {
if (direction === 'up') {
$(this).addClass("waypoint-here");
$(this).next().removeClass("waypoint-here");
}
}, {
offset: '0'
});
});
You can see it in action here:
http://jsfiddle.net/nbgdzspy/6/
Iam using the waypoints plugin, but am open for others.
so far i have managed to get the div to fadeIn when iam scrolling down and its rached 30%:
element.waypoint(function(){
$(this).animate({ opacity: 1 }, 500);
},{
offset: '30%'
});
But iam not able to make it fadeout again, when its getting out of view again.
Thanks for the help.
is this a too hard question for mighty stackoverflow? ...
You can do different things depending on the direction you are scrolling when you cross that waypoint trigger spot using the direction parameter that is passed to the function:
element.waypont(function(direction) {
if (direction === 'down') { ... }
else { ... }
}, { offset: '30%' });
You can also create multiple waypoints with different offsets, so you can react to the element hitting different parts of the page:
element
.waypoint(function(direction) {
$(this).toggleClass('visible');
}, { offset: '10%' })
.waypoint(function(direction) {
$(this).toggleClass('visible');
}, { offset: '90%' });