|
Two obvious problems here:
1) Playing audio or video except as a direct result of user interaction is generally blocked. This includes playing the audio some time after the user has clicked a button - whilst some browsers might give you a small amount of leeway, playing audio minutes after the user clicked the button is likely to be blocked.
2) Javascript timers are not guaranteed to fire at a precise time. The setInterval callback will not be called more than once per second, but there is no guarantee that it will be called at least once per second. This is particularly problematic if your page is in the background, where the timer resolution will be decreased to conserve power.
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
thanks for the explaining.
So can you give any advise that would make it happen?
What I want to do sounds simple: when people go to the website and audio will auto-played at a specific time…
I understand browser will have restrictions on this but will there any ways could make it happen?
thanks
|
|
|
|
|
If you can convince the users to change their settings for your site to allow it to auto-play audio without user interaction, then you might be able to get close. You would need to change your test to see if the current time was greater than or equal to the desired time, rather than checking that it's precisely equal to the desired time. Once the desired time has passed, clear the timer to stop it from checking every second.
const playAudio = function(){
const audio = document.querySelector("audio");
audio.style.display = "block";
audio.play();
};
const shouldPlayAudio = function(){
const now = new Date();
const h = now.getHours();
if (h > 16) { return true; }
if (h < 16) { return false; }
const m = now.getMinutes();
if (m > 25) { return true; }
if (m < 25) { return false; }
const s = now.getSeconds();
return s >= 1;
};
let autoPlayTimer = null;
const playAtTime = function(){
if (shouldPlayAudio()) {
clearInterval(autoPlayTimer);
autoPlayTimer = null;
playAudio();
}
};
autoPlayTimer = setInterval(playAtTime, 1000); Demo[^]
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
Hi,
I am new to js and might be a silly question. sorry for that as I started to learn JS.
I have made 2 scripts. 1 for autoclick buttons and another 1 for autoclick nextpage button.
How to merge both codes to one after one. also I need to set 5 seconds delay between both this scripts.
Script 1:
var buttons = document.getElementsByClassName('Polaris-Button');
for(var i = 0; i <= buttons.length; i++)
buttons[i].click();
Script 2:
var btn = document.getElementsByClassName('ant-pagination-next');
for(var s = 0; s <= btn.length; s++)
btn[s].click();
Thanks in advance.
|
|
|
|
|
|
Where there are multiple CSS selectors, in what order is the result list? (I know, I should experiment and find out!). But for the OP, I suspect this may not be the required solution, since he's wanting all the buttons of one class clicked before the other. Also, it doesn't include the 5 second delay he's after.
So: simply wrap the first block of code in a function ('ClickPolaris') and the second block in another function ('ClickPagination'). To run one, then the other, simply:
ClickPolaris();
ClickPagination();
To implement a five-second delay, you'll need a timer interval:
ClickPolaris();
setTimeout(function() {ClickPolaris();}, 5000);
Of course you can then refine it to use a single parameterised function, called twice with the different class names:
function ClickButtons(classname) {
var buttons = document.getElementsByClassName(classname);
for(var i = 0; i <= buttons.length; i++) {
buttons[i].click();
}
}
ClickButtons('Polaris-Button');
setTimeout(function() {ClickButtons('ant-pagination-next');}, 5000);and further simplify using Richard's suggested syntax:
function ClickButtons(classname) {
document.querySelectorAll(classname).forEach(btn => btn.click());
}
ClickButtons('.Polaris-Button');
setTimeout(function() {ClickButtons('.ant-pagination-next');}, 5000);Note that in this syntax you need to include the . to indicate you're selecting by class name.
|
|
|
|
|
DerekT-P wrote: Where there are multiple CSS selectors, in what order is the result list?
The matching elements will be returned in document order:
The querySelectorAll() ... must return a NodeList containing all of the matching Element nodes within the subtrees of the context node, in document order.
So given:
<input id="btn1" type="submit" class="ant-pagination-next">
<button id="btn2" class="Polaris-Button"></button>
<button id="btn3" class="ant-pagination-next"></button>
<button id="btn4" class="Polaris-Button ant-pagination-next"></button> then querySelectorAll(".Polaris-Button, .ant-pagination-next") will return [btn1, btn2, btn3, btn4].
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
Thanks Richard - I probably ought to have known that!
|
|
|
|
|
I feel I'm pretty close here. I have like 5 phone number inputs, and instead of adding a event attribute in the input element, I thought I would just use a class called phoneNumber and loop all the element to ad an event listener. I'm close, just missing the glue to pass on the element value to the phone number function I stole off the internet and tweaked a bit.
I've done this before in typescript. But I've been really deep in this PHP project I've been working on. I can see the value of using inspector in the event, but PHP Storm isn't suggesting anything for it.
On my for loop, must examples used the index type loop, but I wanted to be a little more ES6 with it. Not sure if it's a good idea or not.
document.addEventListener("DOMContentLoaded",() => {
const phoneInputs = document.getElementsByClassName('phoneNumber');
for (phoneInput of phoneInputs) {
phoneInput.addEventListener('keydown', (e) => {
console.log(e.id);
formatPhoneNumber(e.value)
});
}
});
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
After some more reading, some articles said that this will be available within addEventListener. So I'm just going with it, should work. I have to wait for my DEV server to become available again to test it.
document.addEventListener("DOMContentLoaded",() => {
const phoneInputs = document.getElementsByClassName('phoneNumber');
for (let phoneInput of phoneInputs) {
phoneInput.addEventListener('keydown', () => {
formatPhoneNumber12(this.value)
});
}
});
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
That didn't work at all. Fiddled with it for about 30 minutes on the DEV test server this time and came up with this that works for me in this format xxx-xxx-xxxx
document.addEventListener("DOMContentLoaded",() => {
const phoneInputs = document.getElementsByClassName('form-control phoneNumber');
for (let phoneInput of phoneInputs) {
phoneInput.addEventListener('keydown', event => {
event.target.value = formatPhoneNumber12(event.target.value);
});
}
});
function formatPhoneNumber12(value) {
if (!value) return value;
const phoneNumber = value.replace(/[^\d]/g, "");
const phoneNumberLength = phoneNumber.length;
if (phoneNumberLength < 4) return phoneNumber;
if (phoneNumberLength < 7) {
return `${phoneNumber.slice(0, 3)}-${phoneNumber.slice(3)}`;
}
return `${phoneNumber.slice(0, 3)}-${phoneNumber.slice(
3,
6
)}-${phoneNumber.slice(6, 9)}`;
}
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
NB: This will only add the event handler to matching elements which exist at the point when your code is run. If you modify the document at any point to add new matching elements, they will not have the event handler attached.
You would probably be better off using event delegation[^]. Since you'd only have a single event handler, it can even be more efficient.
document.addEventListener("keydown", (e) => {
const el = e.target;
if (el.classList.contains("phoneNumber")) {
console.debug(el.id, el.value);
el.value = formatPhoneNumber(el.value);
}
});
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
I wasn't thinking of that situation when I composed it. It's a customer form, with their home, office, cell phone numbers. I just needed to make sure that the user followed the format of xxx-xxx-xxxx.
So your saying that I don't have to wait until the Dom is loaded to add the keypress event?
I just thought it was the right thing to do. I'll give it a try.
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
|
Right now the company, only has offices in California, a single state. So I did add all 50 states at least. And I did use type="tel" as well, standard procedure for me over the last 3 years. My options are limited on this project, because I'm using the existing database created in 2003. This project is a reimagination of code , or the existing project to bring it up to PHP 8 and modern browsers in 2021.
I just tried your suggestion, and I don't have to wait for the DOM to load before adding the listeners. I also thought I had to iterate the HTML Collection to hit each phone input, which is not the case. That's pretty slick Richard.
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
I just read the link reference, and now I get what your suggesting. What a radical concept! I guess I was on the right track by changing my design to not use an element attr for the event. But I was still thinking on a individual element level, and not a unlimited collection as a whole. Too bad the customer won't appreciate it.
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
<br> I am working on a `puzzle game` and I use `snap.svg` and javascript to move the elements of the game . But the problem is that any user can drag the element of svg anywhere on the screen, including out of the droppable area. I want to prevent it , I found some resources on internet about snap.svg but it doesn't like i want
I share the code here :
https://jsfiddle.net/j058aoyn/2/
|
|
|
|
|
I changed to a new machine and from Visual Studio 2017 to Visual Studio 2019 I started getting the following errors when I was running watch command as below, which I used to do from the beginning
PS C:\GitSrsCodes\IMS\IMS.Ember> ./watch
npm WARN file-loader@4.2.0 requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN less-loader@5.0.0 requires a peer of webpack@^2.0.0 || ^3.0.0 || ^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN sass-loader@8.0.0 requires a peer of webpack@^4.36.0 but none is installed. You must install peer dependencies yourself.
npm WARN style-loader@1.0.0 requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN uglifyjs-webpack-plugin@2.2.0 requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN webpack-cli@3.3.10 requires a peer of webpack@4.x.x but none is installed. You must install peer dependencies yourself.
npm WARN ims-ember@1.0.0 No description
npm WARN ims-ember@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
updated 2 packages and audited 2375 packages in 14.249s
18 packages are looking for funding
run `npm fund` for details
found 348 vulnerabilities (17 low, 1 moderate, 330 high)
run `npm audit fix` to fix them, or `npm audit` for details
webpack is watching the files…
(node:14388) [DEP_WEBPACK_WATCH_WITHOUT_CALLBACK] DeprecationWarning: A 'callback' argument need to be provided to the 'webpack(options, callback)' function when the 'watch' option is set. There is no way to handle the 'watch' option without a callback.
(Use `node --trace-deprecation ...` to show where the warning was created)
assets by chunk 1.37 MiB (auxiliary name: app)
assets by path *.png 4.17 KiB 5 assets
assets by path *.svg 540 KiB 2 assets
assets by path *.eot 182 KiB 2 assets
assets by path *.ttf 206 KiB 2 assets
assets by path *.woff 119 KiB 2 assets
assets by path *.woff2 93 KiB 2 assets
asset login-bg.jpg 248 KiB [compared for emit] (auxiliary name: app)
asset loading.gif 8.28 KiB [compared for emit] (auxiliary name: app)
assets by path *.js 23.9 MiB
asset libs.js 9.98 MiB [compared for emit] (name: libs)
asset app.js 6.73 MiB [compared for emit] (name: app)
asset templates.js 6.48 MiB [compared for emit] (name: templates)
asset polyfill.js 681 KiB [compared for emit] (name: polyfill)
runtime modules 3.13 KiB 15 modules
modules by path ./app/ 3.05 MiB 584 modules
modules by path ./node_modules/ 4.6 MiB 495 modules
modules by path ./helpers/ember
Any help please if possible?
|
|
|
|
|
I suspect your global cache of NPM modules is on your old machine, and didn't copy over to your new machine. Rebuilding this is tough to do and requires reading up. There is no exact fix. Same thing happen to me, and I had to rebuild my package.json and global cache.
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
Hi , I am looking for the solution . Please tell me how to use dynamic variable in this below code. I mean how to mention data varibale to get the the data of form varible..?
var form ='some data ';
var data='form';
$('selector').replaceWith(data);
|
|
|
|
|
IMO, that's j Query and nobody uses that anymore. It was replaced with vanilla JavaScript about 6 years ago. It looks like your mixing Javascript with jQuery. I haven't written a line of jQuery in 4 years now, and can't remember it anymore.
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
How to deskew a page of pdf document which is loaded through pdf.js
|
|
|
|
|
I need a Wrapper or a Class that can control the Max Length of an Array on setting a value... It might be possible with a Prototype too, which is fine...
let myArray = new ArrayClassThing();
myArray.setMax = 50;
myArray[50] = "Foo";
myArray[51] = "Bar";
Javascript is different than Ruby where you can use special characters to define Getter and Setter methods:
class Array_Wrapper
def initialize
@data = []
end
def [](id)
if id <= 50 and @data[id]
return @data[id]
end
end
def []=(id,value)
if id <= 50
@data[id] = value
end
end
As far as I understand, cant use a "[]" as a Getter or Setter Method, and I need something that can do exactly that, just to control a Static Maximum, like in the first code block... Perhaps a better question to ask is how to define Getter and Setter Method WITHOUT A PROXY (which I KNOW is damn well good and possible) of a Class Prototype, but from inside the constructor (which I also know is syntactical sugar)...
Can anyone help out with this?
|
|
|
|
|
In this code we're initializing x using = operator but isn't {} an object and we use key value pair by using : operator?
let x = 1;
{
let x = 2;
}
console.log(x);
|
|
|
|
|
Braces have multiple uses in JavaScript. In this case, they denote a new block:
block - JavaScript | MDN[^]
The code demonstrates the scoping rules which apply to variables declared with the let keyword:
let - JavaScript | MDN[^]
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
