I am actualy developing my first game using phaser and I did a function resize to resize the game follow the size of the screen and at the end of this function I do :
game.scale.refresh();
But I would like to catch the event of this function like this :
var scaleRefresh = game.scale.refresh();
scaleRefresh.onComplete.add(function(){
//DO stuff
});
But it's not work how can I do this?
Are you sure that you need a resize function? I didn't implement it, and my game already does something similar when your desired behavior.
Which SCALE_MODE are you using? try to use 'USER_SCALE'.
Also, the documentation about Refresh doesn't say something about an onComplete event. but:
"The queued layout refresh is not immediate but will run promptly in an upcoming preRender."
https://phaser.io/docs/2.4.4/Phaser.ScaleManager.html#refresh
Seems that you could do your "onComplete" logic at "preRender" on your state.
Related
I'm creating my portfolio and I'm trying to make my skill bars load when I go to "My skills" section. I want them to do it only once, either when someone scroll to this section or goes to it straight away from the navigation. This is my code:
var skills = $('#mySkills');
var skillsPositionTop = skills.position().top;
$(window).on("resize scroll", function (){
if (pageYOffset<skillsPositionTop-20 && pageYOffset>skillsPositionTop-80){
console.log ("here is my loading script");
}
});
It doesn't work when I use one instead of on, doesn't work when I created one more function on window with one inside my if statement.
I was trying exit the function with return or return false as well and here, on stack overflow I found something about flag, which I didn't fully understand but I tried different combinations with it.
Can someone please help me with it? I've seen there is a library for this type of effects, but there is no point of installing any just for one thing...
Edit. Console.log represens my loading code.
You can set a namespace at .on() for resize, scroll events, use .off() within if statement to remove namespaced events.
var skills = $('#mySkills');
var skillsPositionTop = skills.position().top;
$(window).on("resize.once scroll.once", function (){
if (pageYOffset<skillsPositionTop-20 && pageYOffset>skillsPositionTop-80) {
$(this).off("resize.once").off("scroll.once");
console.log ("here is my loading script");
}
});
I'd like to get a callback from visjs after it finishes loading a chart so I can then unhide the chart and stop a loading animation. However, i don't see anyway to registrar a callback in the docs.
Now, I'm new to javascript so perhaps i'm not thinking about this correctly? Hoping someone can point me in the right direction. Thanks!
I'm one of the creators of vis.js.
The visualizations of vis.js should load synchronously so there is no need for a callback. After checking though for the Timeline and Graph2d I saw this is not the case anymore, this is no intentional behavior. I've opened an issue for this here: https://github.com/almende/vis/issues/1541
I don't know which visualization you're using, but a workaround for the Timeline and Graph2d is: the visualization is loaded synchronously, and the items are loaded on the next tick. So you can set a callback on a timeout after 0 ms:
var timeline = new vis.Timeline(...);
alert('The Timeline is visible but the items not yet (this is a bug)')
setTimeout(function () {
alert('Now everything is loaded!');
}, 0);
i solved the trouble with change event on first show.
var firstshow=true;
$scope.timeline.on("changed", function (properties) {
if(firstshow)
{
$scope.timeline.focus($scope.timeline.getVisibleItems());
firstshow=false;
}
The solution that worked for me was this:
timeline.on('finishedRedraw', function() {
console.log('do something');
});
Seems this still hasn't been fixed. You can also hook into the currentTimeTick Timeline event. Note this events keep triggering so you can unsubscribe after the first time it triggers.
this.timeline.on("currentTimeTick", (prop) => {
// Do something here
// After fired the first time we un-subscribed
this.timeline.off("currentTimeTick")
})
Old Question: How can I call a Polymer Function? (check edits, I don't want to cram code in here)
Rewrite:
I have a <core-scaffold> that I want to call the togglePanel() function. (This sits in project_root/index.html.) I do this using:
<core-icon-button onclick="document.querySelector('core-scaffold').togglePanel();"
icon="drawer></core-icon-button>
In Chrome's Inspector, I can see this causes no errors, but it doesn't do anything on-screen. My code calls this function in project_root/bower_components/core-scaffold/core-scaffold.html:
togglePanel: function() {
this.$.drawerPanel.togglePanel();
}
Which in turn calls this function in project_root/bower_components/core-drawer-panel/core-drawer-panel.html:
togglePanel: function() {
this.selected = this.selected === 'main' ? 'drawer' : 'main';
}
I am either to naive and unexperienced to see the problem, or have a terrible complex bug. Any help would be appreciated!
I ran into the problem as well. The issue is that the closeDrawer(), openDrawer(), and togglePanel() are only usable when size of your screen is less than the value of responsiveWidth.
I think the logic is that if you have the screen real estate you would always want to show the drawer. Of course this could be tweaked by extending core-drawer-panel and making a custom core-scaffold implementation.
You can directly fetch the element using query selector and call its method on onclick just like other html pages
<button onclick="document.querySelector('core-drawer-panel').togglePanel();">toggle drawer</button>
Change the published attribute in core-drawer-panel.html forceNarrow=true See # Call function on polymer navigation drawer panel
I'm trying to understand the flowplayer API, I'll be honest, I really need examples to get this stuff. I know some of you ninjas know what you're doing quite easily.
I am building a video training page for someone. It uses a PHP (kirbycms) framework to generate pages. I understand how to drop my variables and all that stuff. I have the videos working. It would be largely beneficial if I could have cue points that trigger things, and buttons that seek to specific time codes. It would be best if I can use PHP to define a string for these links.
I am looking for an example on how to use seek(time, [callback])
I am also looking for an example of
$(".player").bind("cuepoint", function(e, api, cuepoint) {
// here we use custom properties left, top and html
$("#info").html(cuepoint.html).animate({
left: cuepoint.left,
top: cuepoint.top
});
});
Update
Included bootply, this still does not work for me. Is it because my controls are outside of the flowplayer window?
http://bootply.com/86532
seek function (as documentation says: CLICK) is for jumping into given time on the timeline:
seek(time, [callback])
It takes two arguments: time in seconds and a callback - function that will be executed after jumping into that time on the timeline. Assuming that you are using jQuery you can write something like this to jump into 15.5s of the movie if you click button and then alert some message (just a simple example):
flowplayer(function (api, root) {
$("#someButton").on('click' function(e){
e.preventDefault();
api.seek(15.5, function(){
alert("you've jumped to 15.5s of the movie!");
});
});
});
Flowplayer doesn't do what you're after. In fact, seek() pretty much does the opposite- it triggers the video to jump to that point in time (and optionally calls back when its done).
If you want to set cuepoints and have the video trigger code when the video reaches those points in time, have a look at addEventListener("timeupdate", callback), see docs.
You might also want to check out popcornjs.
Hello I'm writing a jQuery code for my application and got some issues (like function called once, running three times).
I must know if exist any site that people audit source code and comment my mistakes..
most of my code is like this i/e:
$('a.openBox').click(function(){
//do something
$('.box').show();
$('a.openModal','.box').click(function(){
$.openModal(some, parameters)
});
});
$.openModal = function(foo,bar){
//do something
$('a.close').click(function(){
$('#modal').hide();
});
$('input.text').click(function(){
$.anotherFunction();
});
});
does am I doing something obviously wrong?
I'm not aware of any source code audit like that -- certainly not for free! This website is pretty good for specific problems though...
In this case, the problem is that you are continually binding more and more events. For instance, with the following code:
$('a.openBox').click(function(){
//do something
$('.box').show();
$('a.openModal','.box').click(function(){
$.openModal(some, parameters)
});
});
This code says "whenever the user clicks on an a.openbox element, show all .box elements and bind a new click handler to all .box a.openModal elements". This means that you will add another handler to .box a.openModal every time you click on a.openbox. I can't believe this is what you want to do!
It is difficult to work out what the correct code should be without knowing the context and exactly what you want to happen. My advice for you in the first instance would be to do some reading up on Javascript events and event handlers, particularly as they are implemented in jQuery.