I don't code so asking for help :-) Hi, I have an issue for a page animation with a couple of interactions. How do I insert a code snippet to tell the browser to either continue or pause the animation, when a user opens/clicks another tab.
Right now, the animation pauses for the first part, but the subsequent interactions keep going. And it's a jumbled mess.
What is the easiest/simple way to do this? Can someone share the full/complete code snippet to accomplish this? I've been searching for hours and can't seem to find the right solution.
I'm using Webflow for the site. Thanks a bunch.
When the user clicks away from a window, certain events are fired off. You can add event handlers to your window object that respond to these events.
You probably want to listen for 'focus' and 'blur' events. JavaScript:
window.addEventListener('blur', function (evt) {
// turn off your animation here
});
window.addEventListener('focus', function (evt) {
// turn on your animation here
});
Documentation on window blur event, window focus event, addEventListener().
I have a simple page that reports all window events, it might be useful:
https://terrymorse.com/coding/windowevents/index.html
Related
I'm trying to save some data when the popup closes, but I can't find a place to add a listener.
There was an earlier post suggesting this in the background page, but it doesn't work:
chrome.runtime.onConnect.addListener(function (externalPort) {
externalPort.onDisconnect.addListener(function () {
console.log("onDisconnect")
})
console.log("onConnect")
})
Not even the onConnect listener is working.
Any ideas on how to get it to work>
I actually took a different approach. Instead of listening for events, I move the state to the background page. So when the popup opens up it reads the state form the background page and the user can continue where he/she left off.
While programming my own minesweeper game, I have come to a stage(kind of final one) where I have to introduce the concept of Flags. Currently, I am using mousePressed() to open up any cell that might be a mine. But I cannot figure out a way how to flag any cell, as I tried to use doubleClicked() but it does not work in this case. Does anyone have any hint for this, or any built in p5.js tool that might simply flag a cell?
EDIT:
https://github.com/abj54/minesweeper
My code is in the above repo for anyone who might want to go through it. In terms of flag, it is a basic indicator of letting user guess which of the given cell may be a mine.
Listening to booth events on the same object is problematic because of the event change which is called for a dblclick:
mousedown
mouseup
click
mousedown
mouseup
click
dbclick
P5.js checks the click/dblclick event of the window so you should not use both functions (click and dblclick).
But you can use the click event with a Timeout to solve this problem.
var clicked=false, clickTimeout=300;
function mouseClicked(){
if(!clicked){
clicked=true;
setTimeout(function(){
if(clicked){
console.log("single click");
clicked=false;
//single ClickStuff
}
},clickTimeout);
}else{
clicked=false;
console.log("double click");
//double click Stuff
}
}
So you are waiting the in clickTimeout defined amount of Time if a second click is called and react to.
I have a paper-button with the on-tap function that opens a paper-dialog that contains a "Accept" paper-button that will close it when clicked.
The problem i'm getting is if depending on my screen resolution, and the dialog's "Accept" button is over the initial button to open the dialog, when clicked, the dialog opens and closes. I'm assuming the on-tap event is being fired to both.
I've tried these 2 methods but they do not seem to help.
event.cancelBubble = true;
event.stopPropagation();
The problem is that a capacitive screens or even mouses can generate multiple tap event on the same spot within a few milisec.
The mouses because a quick change in a high and low voltage (logical 1 and 0) generating an AC signal wich can jump trough on a capacitator (which can be the button two contactor between the air) if the conditions matching. But the onclick event is already catching this case and you does not require to do anything to solve it.
The capacitve screens are capacitators and just rolling your finger should trigger multiple tap events because your skin has different depth of insulation and hard to mark the tap begin and end in some cases.
This physical problem should be solved by the platform, but it is not in every situation currently (but most of the devices are filtering this). Im usally solving this isse with a transparent overlay element wich can catch the pointer events for a little duration so I could catch the "prelling" of a button or the capacitive screen for a few ms.
If a 10-20ms is enough for you then wait a frame in your on-tap function with requestAnimationFrame and then show the dialog. Cheap trick, but it does what it has to, but ultimately you can wait a fix timeout to show the dialog, because you have 100ms to respond a user interaction.
You cannot fix this by manipulating the browser events options though because as I know you dont have option to how much time need to pass until the next same event should happend. But if you wait a frame thats could behave like you add a delay between the events.
I'm trying to understand how to pause and resume interaction in paper.js.
I have the metaball example on a page with an input element on top, and because paper.js steals focus for driving the metaball generation onMouseMove... bad things happen. Like not able to select what you typed.
I understood I could use item.locked = true;, but I don't know what to apply it to because nothing works.
What is the parent Item for paper.js and can I lock it so that everything stops responding to the mouse?
I also couldn't reattach the mousemove event from the Tool, which is why I came to look into item.locked. What's the correct way to remove and reattach mouse events?
i'm still having a problem clicking a popup button on an auction site,that appears only if u won an auction. This popup seems tbe a problem. Ive managed to get help partially in Need to click a bid button with Grease monkey script, i'm able to get the bid buttons clicked, but the popu is stil a problem. The xpath for the popup is:
.//*[#id='ctl00_mainContentPlaceholder_Button3']
And the script i'm using currently is:
// ==UserScript==
// #name click popup try1.3
// #include http://www.trada.net/*
// ==/UserScript==
// ctl00_mainContentPlaceholder_Button3
function PopClick ()
{var PopBtn1=document.getElementById("ctl00_mainContentPlaceholder_Button3");
alert('try1');
PopBtn1.click (1);
alert('finished');
};
PopClick();
But the problem seems to be that the script doesnt stay active on the page waiting for the popup, I think if i can get it to "wait" for the popup to appear, it should work. I'm very new to GM, so excuse if there is simple errors. I had exelent help from people like Brock sofar, who is showing me the ropes. Slowly but surely I'm gettin the hang of it. Remove the alerts, i just used them to see if it executing.
The simplest solution would be to run this function, say every second, thus "waiting" for the popup to appear:
setInterval(PopClick, 1000);
It is also better to rewrite PopClick to check if the element is there, before calling click, like this:
function PopClick () {
var PopBtn1=document.getElementById("ctl00_mainContentPlaceholder_Button3");
if(PopBtn1) {
PopBtn1.click ();
// It is also makes sense to clear interval here. see docs for setInterval/clearInterval please :)
}
};
May be this will help you with the freezing issue.
The more proper way, however, would be to set up MutationEvent listener. Since you are using Firefox, it should work OK:
function click_if_popup(evt) {
if(evt.target.hasAttribute('id') && evt.target.getAttrubute('id') =="ctl00_mainContentPlaceholder_Button3")
evt.target.click();
}
document.addEventListener('DOMNodeInsertedIntoDocument', click_if_popup);
Sorry, I didn't test any of this code: I wanted just to give you the general idea of where to dig.