Develop Reference

What causes a function to run in the console but not when it is invoked by an event listener?

EDIT
Added a link to a sandbox with working code. For some reason it seems to be working in the sandbox in the same browser it wont work on?!?!
CodeSandbox Demo
I am experiencing this weird issue of invoking a function in the console and it working as expected. However, when I invoke the function via an event listener it breaks the element.
The element is a canvas that is drawing different "bodies" on to it over a set interval.
Why would cause this function to work in the console but not in the document?

Two questions and then I might be able to help you.
Number 1: Are you using a library like p5.js or are you drawing it straight onto the canvas?
Number 2: Could you please post the code, as there might be an error?
Also if you want a quick solution, try using a different browser (although this might not be the solution, it is worth a try), such as Firefox Developer Edition, or just regular Firefox.
Hope this is helpful!

GLTF load warning--- Timer GLTF loader already exists

I am using A-Frame javascript 8th wall libarary and tap place component to place a model. When I tap on the screen iam getting the above warning and after 2 minutes or so I can see the model on the screen. I am not using any gltfloaders it is just plain html5, javascript with aframe tap-place component.
Is this something normal or am I doing wrong in my coding? Thanks in advance for helping!
My git link - https://github.com/NishithaSurapudi/tap_place

I believe the warning is coming from three.js which the 8thwall lib depends on. Try updating to the latest version of aframe, but if you can't fix it, its a minor warning so I wouldn't worry about it.

The problem seems to be that console.time is called multiple times with the same label. If you load a single model with GLTFLoader, everything should work fine. The warning shows when you start loading multiple models.

Simple Ajax Uploader Plugin Stopped Working

We're using the javascript plugin Simple-ajax-uploader to upload files on your web site and it suddenly stopped working today (09/05/2019).
The upload div/button can't be clicked on anymore.
This is happening on our site and even on the official plugin site.
This is only happening on Chrome and only on computers where Chrome has been closed and restarted today.
We found out this article indicating that Chrome Dev tools have just been updated today but our version of Chrome hasn't changed since the restart (76.0.3809.132). However the restart definitely triggered the bug so something happened there. But what?

Same problem here found this morning.
Quick jQuery fix...
$('input[type=file]').css('position','relative');

UPDATE: Issue has been fixed with version 2.6.5 of the plugin. Ignore the below.
Plugin maintainer here. A short term fix is to remove or comment out line 2002:
'position' : 'absolute',
Alternatively: the issue does not appear to be present in Firefox. At any rate, I'll try to have a fix pushed soon.

I've just checked on Chrome and you're right about the button not working. It is a problem with the Stacking Context, unfortunately each browser has its own implementation.
Basically the outer div is preventing the click events from reaching the inner input.
My suggestion would be to use a custom button or to restyle the current one (I've found that if you remove the position property from the outer div it will work again. Consider that many properties can cause stacking context problems: position, transform, opacity, z-index. Try adding/removing/modifying some of them, in the outer div and in the inner input).
Anyway, it is guaranteed to be a style problem and not a JavaScript problem.

Video.js enter fullscreen on play

I've been searching around for a long time but still haven't found a valid solution for my problem. I just cant seem to get the video player to enter fullscreen. The API does have many examples but none of them seem to work.
The jQuery version included on the page I am currently working on is 1.8.2. Also, I am using parallax-1.1.js and libraries required for it to work properly so that may also be an issue.
The client I am working for wants the site to have responsive design, with the ability of the player to directly go to fullscreen when the "Play" button is clicked. This functionality should be avalable both on desktop, and mobile/tablet browsers. On the video page, there should be 3 video players, each of them has unique IDs, and they also have a common CSS class.
Some of the code I tried didn't work well. Here's an example JS code snippet controlling one of the video HTML tags.
Example:
player1 = _V_('video-1');
player1.on("play",
function () {
this.requestFullScreen();
});
player1.on("ended",
function () {
this.cancelFullScreen();
});
The code generates this error:
Uncaught TypeError: Object [object Object] has no method 'requestFullScreen'
I am working with the latest version of Google Chrome.

There are a two problems to be solved here.
First, you cannot go to full screen inside a 'play' event handler. For security and good user experience, browsers will only let you trigger full screen inside a user-triggered event, like a 'click'. You can't have every web page going to full screen as soon as you visit it, and you can cause a video to start playing automatically, which would violate that rule. So you need to move this to a 'click' handler on the actual play button.
The second is a big problem with Video.js 4.0.x, which is that it's minified using Google Closure Compiler with Advanced Optimizations. So many of the public properties and methods are obfuscated, making them difficult/impossible to use. In this case, requestFullScreen is now player1.Pa(). And, as far as I can tell, cancelFullScreen doesn't exist at all.
Here are some options for how to handle this:
Use the obfuscated method name. I don't recommend this, because a) the name will change with every minor version upgrade (e.g. 4.0.5) and b) it will make your code unreadable, and c) you can't use cancelFullScreen.
Get an un-minified copy video.js and host it yourself. (You can use Uglify or another minifier that won't mess with the method names.) Video.js doesn't provide this file, so you have to clone the git repo and run the build script yourself. And you don't get the advantage of using video.js's CDN for free.
Use an older version of video.js and wait until 4.x is ready for prime time.
Don't use video.js at all. Consider jPlayer and jwPlayer or roll your own.
I recommend 2 or 3.
Update: It looks like this particular issue has been fixed, but it has not made it into release yet.

I personally used a custom link that triggers both play and fullscreen.
<a class="enter-fullscreen" href="#">Play fullscreen</a>
And the js part:
<script type="text/javascript">
$('.enter-fullscreen').click(function(e) {
e.preventDefault();
$('.vjs-play-control').click();
$('.vjs-fullscreen-control').click();
});
</script>
This is improvable but simple and does the job.

One easy way to solve the problem:
document.querySelector('.vjs-big-play-button').addEventListener('click', player.requestFullscreen)
Video goes full screen and the regular event of the play button causes it to start playing.

in video.js file go to this lines
BigPlayButton.prototype.handleClick = function handleClick(event) {
var playPromise = this.player_.play();
and add
BigPlayButton.prototype.handleClick = function handleClick(event) {
var playPromise = this.player_.play();
document.getElementsByClassName('vjs-fullscreen-control')[0].click()
// exit early if clicked via the mouse
if (this.mouseused_ && event.clientX && event.clientY) {
silencePromise(playPromise);
return;
}

Thunderbird compose-send-message event does not fire

I have followed the tutorial for getting a Thunderbird extention going and succeeded in getting extensions that use the "load" event to work (the basic "date" example and random text using alert("hey"); both work).
However, I can't seem to get any message-based events to trigger. I've tried using various types of alerts and it just seems my code is not being ran. For example:
function send_event_handler( evt ) {
alert("hohoho");
}
window.addEventListener( "compose-send-message", send_event_handler, true );
How do I get events to trigger that allow me to modify message bodies?
My test platform is using Thunderbird 13.
My manifest is:
content thundersafe chrome/content/
overlay chrome://messenger/content/messenger.xul chrome://thundersafe/content/thundersafe.xul

Thanks to WladimirPalant, I looked for other overlays. This didn't occur to me because I thought the overlay would only be useful for adjusting the GUI via XUL join points - clearly I have a lot to learn.
The correct overlay for my use is:
chrome://messenger/content/messengercompose/messengercompose.xul
This overlay was discovered by looking at other extensions. I couldn't find a list of overlays and their intended uses anywhere on MDN.