We Keep Coding

Why does changing a property from the mediaRecorder.onstop event handler not change the page?

Trying to transfer functionality to Angular, I ran into an interesting problem, when setting a property from a method, everything works fine, but when setting from an event, it changes, but is not displayed on the page. However, if you call this property after that in any method, everything is displayed at once,
Blitz
-- Reference --
Property - record;
Handler hangs on streamRecorder, onstop event;
Using one-way binding to the src element of video
Using DomSanitizer to generate a secure link using window.URL.createUrlObject(blob)
I would be grateful even for a tomato in the face!) I ran through the docks in a few days, my knowledge is still at the level of guides from the docks.

My suggestion would be scope/change detection. Something screwy with the particular reader.onstop vs reader.addEventListener('stop', ...)
Change from
this.streamRecorder.onstop = () => {
...
}
to
this.streamRecorder.addEventListener('stop', () => {
...
}
and it works.

How to fix Uncaught TypeError: Cannot read property 'children' of null

carousel.js:5 Uncaught TypeError: Cannot read property 'children' of null**
I got this error when I'm going to ad slider to the page.
here is the js code for the error.
const track = document.querySelector('.carousel_track');
const slides = Array.from(track.children);
const dotsNav = document.querySelector('.carousel_nav');
const dots = Array.from(dotsNav.children); //here
const slideWidth = slides[0].getBoundingClientRect().width;
slides[0].style.left = 0;
slides[1].style.left = slideWidth + 'px';
Can anyone give me a solution for this? I really appreciate your help.

Apparently the error throws here const dots = Array.from(dotsNav.children); //here , though the source of error is coming from previous line.
The error hints that the track is null, which can happen when the selector didn't return any value.
Without seeing your HTML code its not so clear whats the exact reason, but its obvious that the element with class carousel_nav doesn't exist in the DOM at the moment of execution of this code.
Steps to debug:
Do the console log after acquiring the track object.
const dots = document.querySelector('.carousel_nav');
console.log('Dots are: ', dots);
...
Then on the console of the browser check the value, its probably null.
Check if the class is written correctly on the HTML element, without typos and mistakes. You can even run the js directly on the browsers console to see if the code is actually fetching .carousel_nav
If when you run your js code in browser's console and it returns actual value instead of null, but on the page load it still returns null then it can mean the carousel is being initialized by 3rd party library after certain event, most probably document.ready, you have to as well listen to the document ready event and only after that execute your code.
Sometimes just waiting for the document ready is not enough, so check the documentation of the library that you use, it should have some callback where you can execute your code exactly after the carousel is being initialized.
Might be that the carouself library that you use, need an additional parameter to render dots, do you actually see the dots in the rendered dom?
If you need more hints, provide the library name youre using and also html
P.S.
Sorry I didn't see //here comment. But the debugging steps are the same

Query.swap Backwards compatibility

I'm trying to use a datepicker known as flexcal on my site. It is important for me to use it accurately, to allow selection from a Jewish calendar. My site is based on jQuery v3.3.1, but flexcal was designed for jQuery v2.1.3. I thought it shouldn't cause any problems, but I came across the following error:
Uncaught TypeError: $.swap is not a function
After searching, I found here that this is a method that was intended to be private and was never documented, Anyway at the moment I'm having trouble embedding a widget on my site. Reviewing the source code of the widget reveals that the use of the method looks like this:
return $.swap(
parent,
{display:'inline-block'}, // make it visible but shrink to contents
swapper.bind(this, elem, parent.parentNode)
);
Does anyone know what the purpose of the method is, does it have a parallel alternative, or some other troubleshooting advice?

If you look at the source of jQuery.swap (https://github.com/jquery/jquery/blob/3.4.1/src/css/var/swap.js), you'll see that all it does is temporarily change some CSS attributes of the first argument (parent, in your case), run a calculation, and the restore the original attribute values. You can implement that yourself. It's particularly easy in your case, since the only CSS attribute we're temporarily changing is display:
var old_display = parent.style['display'];
parent.style['display'] = 'inline-block';
var ret = swapper.bind(this, elem, parent.parentNode).apply(parent, []);
parent.style['display'] = old_display;
return ret;

Why is javascript saying that addcallback function is not defined?

my first time on here.
My problem is with AS3, Javascript and possibly the browsers Firefox and IE.
I have done so much searching for an answer so i will print my code:
i am using this line to call the flash application and in all browsers its combatible and actually traces in firebug to hold an OBJECT->FLASH_ID so thats not the problem.
var obj = document.getElementById('test');
then i use addcallback:
obj.sendStatus(loggedIn);
now whats weird is that i trace all individual elments in chrome and
-obj = flash object
-sendStatus = flash->function
-loggedIn = either false or true;
everything works great but when i am on firefox or ie
it traces differently
-obj = flash object
-sendStatus = undefined
-loggedIn = either true or false;
now what am i missing??????????
i tried embedding rather than object insertion
i made sure that the id's were all unique
i checked to make sure i had the right flash object selected with getElementById
im so confused.. and it feels like something simple.

I know about some browser - dependent timing problems, making the interface of the flash object available...
A timer could help, try this:
var obj = document.getElementById('test');
setTimeout(function(){obj.sendStatus(loggedIn);}, 500);
500 is a bit to long, but just to be sure. If it works you can try to lower it to 200 - 300.

make sure you declared allowScriptAccess = sameDomain both in embed tag and object tag
in case you don't use swfObject
Maybe the way you get a reference to the swf is wrong, try this
function thisMovie(movieName) {
if (navigator.appName.indexOf("Microsoft") != -1) {
return window[movieName];
} else {
return document[movieName];
}
}
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/external/ExternalInterface.html

The problem is that using ExternalInterface requires both parties (browser and flash) to be ready.
You can have the flash poll a method in the page which just returns true so that you know its ready to receive calls from flash.
On the flip side if the page is cached, it can sometimes happen that the page wants to send to flash before flash is ready, so I use a callback to the page telling it flash is ready, so its like a handshake, once both parties are ready, then we can start sending data back and forth.
This has been my approach since Firefox 3.

#Font-face and wrong value of the offsetWidth attribute

I encounter this problem in the latest version of Chromium. After the creation of the first element using a font-family embedded via #font-face I am being handed wrong offsetXyz values. By the time the script is executed, the window.onload hook will already have fired and the font will thus have already been loaded.
This is what the script looks like (schematically):
var e = document.createElement("span");
e["innerText" in e?"innerText":"textContent"] = "fooBar";
e.style.fontFamily = "fontFaceEmbeddedFontFamily";
document.body.appendChild(e);
alert(e.offsetWidth); // Returns two different values
setTimeout(function() {
alert(e.offsetWidth); // The latter being correct
}, 1000);
The value is updated "silently". There appears to be no way of waiting for it to correct the values but simply setInterval-check the value and then render the solution. I don't fancy doing dirty stuff like that.
Anyone has any suggestions how to proceed? Happens only when the src: local(" ... ") isn't specified, the issue is hence downloaded-font specific.

You have already given the answer yourself. Set src: local() and it will not happen - in general when you use #font-face, stick to the bulletproof syntax, since it was made to overcome browser issues like the one you are butting heads with here.

I know is almost a year, but I got this problem too and took me half a day to discover the cause. You can just wait for the entire page to load, instead of using a timeout. The src: local() didn't make any difference for me. So you can use:
<body onload="finished()">
or in jQuery:
$(window).load(
function() {
// this only will execute when the entire page is loaded.
}
);