We Keep Coding

Attribute changes with MutationObserver only found if code is inside a loop

I am having some trouble detecting attribute changes of an html element with js and MutationObserver. This is the code:
document.addEventListener("DOMContentLoaded", function() {
const checkForLoading = setInterval(function () {
let loading = document.getElementById("sequence");
if (loading) {
console.log("loading detected");
const loadingObserver = new MutationObserver(function (mutations) {
console.log("mutation detected");
if (loading.getAttribute('data-dash-is-loading') === 'true') {
console.log("loading");
// loading.style.visibility = 'hidden';
} else {
console.log("not loading");
// loading.style.visibility = 'visible';
}
});
const observerOptions = {
attributes: true,
}
loadingObserver.observe(loading, observerOptions);
clearInterval(checkForLoading);
}
}, 100);
});
Because the element is not available immediately I have the checkForLoading loop set up. The attribute 'data-dash-is-loading' is only set when an element is loading and otherwise not available. This code only works if the loop keeps on running after the sequence element is detected and clearInterval(checkForLoading) is not called. However I would like to avoid running this loop constantly. Any help to fix this issue is greatly appreciated.

It usually means the element is recreated, so you need to observe its ancestor higher up the DOM tree and add subtree: true.
For example, a parent element:
loadingObserver.observe(loading.parentElement, {attributes: true, subtree: true});
If this doesn't help at once you can try document.body first to make sure the mutation actually happens, then try various ancestor elements in-between to find the one that stays the same.
In the callback you'll need to verify that the mutation occurred on your desired element:
for (const m of mutations) {
if (m.target.id === 'foo') {
// it's the desired element, do something about it here and stop the loop
break;
}
}

check class/element status after click

Assuming I am unable to see below code, I have no idea how long does the timeout set, and I am unable to change the original code
document.querySelector('button').addEventListener('click', function(){
setTimeout(function(){
document.querySelector('.old').classList = 'old new';
}, 100);
});
<div class="old">OLD</div>
<button>Click</button>
What I'd like to achieve is that once the new class is added then I want to change the TEXT line, the hack code as below
document.querySelector('button').addEventListener('click', function(){
setTimeout(function(){
document.querySelector('.old').classList = 'old new';
}, 100);
});
document.querySelector('button').addEventListener('click', function(){
if(document.querySelectorAll('.new').length !== 0) {
document.querySelector('.old').innerText = "123"
}
});
<div class="old">OLD</div>
<button>Click</button>
document.querySelector('button').addEventListener('click', function(){
if(document.querySelectorAll('.new').length !== 0) {
document.querySelector('.old').innerText = "123"
}
});
Since I am unable to know how long the timeout secs, so my first click won't work as it executes right away. So I have to add the timeout seconds bigger than the original. Is there an efficient way to detected if new class is added?
or timeout is the best solution for this use case? Thanks

You might use Mutation Observer for this purpose:
document.querySelector('button').addEventListener('click', function() {
setTimeout(function() {
document.querySelector('.old').classList = 'old new';
}, 500);
});
document.querySelector('button').addEventListener('click', function() {
var observer = new MutationObserver(function(mutationsList, observer) {
for (var mutation of mutationsList) {
if (
mutation.type === 'attributes' &&
mutation.attributeName === 'class' &&
mutation.target.classList.contains('new')
) {
mutation.target.innerText = "123";
observer.disconnect();
}
}
});
observer.observe(document.querySelector('.old'), {attributes: !0});
});
<div class="old">OLD</div>
<button>Click</button>

Use ClassList API to get this done. As new class will be add after some time. If new class is not added to dom then you can't get reference of this node to compare. The ClassList provides a handy method to solve this issue. use contains method to check if new class added or not. If added then change the text.
use below code
document.querySelector('button').addEventListener('click', function(){
if(document.querySelectorAll('.old')[0].classList.contains("new")) {
document.querySelector('.old').innerText = "123"
}
});
Solution

When using the Microsoft Translator, Is there a way to remove the widget, but retain translation?

I'm using the Microsoft Translation Widget, which I'd like to use to automatically translate a webpage without user interaction.
The problem is, I can't get rid of the widget that keeps popping up or hide it on document.ready because the CSS and JS get loaded from Microsoft's own script in the widget!
Does anyone know a way around this? I've looked everywhere and cannot find a solutuion for this.

Whoa, after some time playing around with that, I've finally achieved what you want.
It's kindda ugly, because of some needed workarounds, but it works, take a look at the fiddle.
The steps were:
Firstly, we must override the default addEventListener behavior:
var addEvent = EventTarget.prototype.addEventListener;
var events = [];
EventTarget.prototype.addEventListener = function(type, listener) {
addEvent.apply(this, [].slice.call(arguments));
events.push({
element: this,
type: type,
listener: listener
});
}
Then, we create a helper function removeEvents. It removes all the event listeners of an element.
var removeEvents = function(el, type) {
var elEvents = events.filter(function(ev) {
return ev.element === el && (type ? ev.type === type : true);
});
for (var i = 0; i < elEvents.length; i++) {
el.removeEventListener(elEvents[i].type, elEvents[i].listener);
}
}
When creating the script tag, in the way Microsoft says:
var s = d.createElement('script');
s.type = 'text/javascript';
s.charset = 'UTF-8';
s.src = ((location && location.href && location.href.indexOf('https') == 0) ? 'https://ssl.microsofttranslator.com' : 'http://www.microsofttranslator.com') + '/ajax/v3/WidgetV3.ashx?siteData=ueOIGRSKkd965FeEGM5JtQ**&ctf=True&ui=true&settings=Manual&from=';
var p = d.getElementsByTagName('head')[0] || d.dElement;
p.insertBefore(s, p.firstChild);
We must add a load event listener to that script, and the code below is fully commented:
s.addEventListener('load', function() {
// when someone changes the translation, the plugin calls the method TranslateArray
// then, we save the original method in a variable, and we override it
var translate = Microsoft.Translator.TranslateArray;
Microsoft.Translator.TranslateArray = function() {
// we call the original method
translate.apply(this, [].slice.call(arguments));
// since the translation is not immediately available
// and we don't have control when it will be
// I've created a helper function to wait for it
waitForTranslation(function() {
// as soon as it is available
// we get all the elements with an attribute lang
[].forEach.call(d.querySelectorAll('[lang]'), function(item, i) {
// and we remove all the mouseover event listeners of them
removeEvents(item, 'mouseover');
});
});
}
// this is the helper function which waits for the translation
function waitForTranslation(cb) {
// since we don't have control over the translation callback
// the workaround was to see if the Translating label is visible
// we keep calling the function, until it's hidden again
// and then we call our callback
var visible = d.getElementById('FloaterProgressBar').style.visibility;
if (visible === 'visible') {
setTimeout(function() {
waitForTranslation(cb);
}, 0);
return;
}
cb();
}
});
Update 1
After re-reading your question, it seems you want to hide all the widgets at all.
So, you must add the following code as soon as the translation is got:
waitForTranslation(function() {
document.getElementById('MicrosoftTranslatorWidget').style.display = 'none';
document.getElementById('WidgetLauncher').style.display = 'none';
document.getElementById('LauncherTranslatePhrase').style.display = 'none';
document.getElementById('TranslateSpan').style.display = 'none';
document.getElementById('LauncherLogo').style.display = 'none';
document.getElementById('WidgetFloaterPanels').style.display = 'none';
// rest of the code
});
I've created another fiddle for you, showing that new behavior.
Update 2
You can prevent the widget showing at all by adding the following CSS code:
#MicrosoftTranslatorWidget, #WidgetLauncher, #LauncherTranslatePhrase, #TranslateSpan, #LauncherLogo, #WidgetFloaterPanels {
opacity: 0!important;
}
And you can even prevent the before-translated text being showed, by hiding the document.body by default, and then showing it when the page is fully translated:
(function(w, d) {
document.body.style.display = 'none';
/* (...) */
s.addEventListener('load', function() {
var translate = Microsoft.Translator.TranslateArray;
Microsoft.Translator.TranslateArray = function() {
translate.apply(this, [].slice.call(arguments));
waitForTranslation(function() {
/* (...) */
document.body.style.display = 'block';
});
}
});
});
Take a look at the final fiddle I've created.

For me, this was the solution:
on your < style > section add this class
.LTRStyle { display: none !important }
Also, if you are invoking the translation widget this way:
Microsoft.Translator.Widget.Translate('en', lang, null, null, TranslationDone, null, 3000);
then add this to your callback (in this example is TranslationDone) function:
function TranslationDone() {
Microsoft.Translator.Widget.domTranslator.showHighlight = false;
Microsoft.Translator.Widget.domTranslator.showTooltips = false;
document.getElementById('WidgetFloaterPanels').style.display = 'none';
};

Execute some code if element exists

I want to execute some code if this element exists <div id="element">Some text</div> using jquery.
my code until now:
setInterval(function(){check()}, 100);
function check() {
var count = document.getElementById("count");
if(document.getElementById("element") && count.value != 1) {
//some code
count.value = 1;
}
}
It works, but I think this is a very bad way to reach my target.
I want an easier solution, but I didn't find.

Your way is the most reliable, because it cannot fail.
However, you may wish to try listening for change events on the count element, and reset the value if your element exists. This will mean your verification code only runs when a change is made to the value.

do you want to do this initially?
hjow about you do this?
$(document).ready(function(){
if($(#element)) { do something };
});
EDIT:
after 10 seconds of search:
$("#someDiv").bind("DOMSubtreeModified", function() {
alert("tree changed");
});

You can listen DOM events (when an element is inserted or modified) and check your condition only at this time, not every time interval.
If you need some information about DOM events you can take a look at : http://en.wikipedia.org/wiki/DOM_events#HTML_events (mutation events)

One solution I can think of is about using MutationObserver with a fallback mechanism like
jQuery(function() {
if (window.MutationObserver) {
var target = document.querySelector('#myparent');
// create an observer instance
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
[].forEach.call(mutation.addedNodes, function(el, i) {
if (el.id == 'element') {
check();
//if you don't want to listen any more remove the listener
//observer.disconnect();
}
})
});
});
// configuration of the observer:
var config = {
childList: true
};
// pass in the target node, as well as the observer options
observer.observe(target, config);
} else {
setInterval(function() {
if (document.getElementById("element")) {
check();
}
}, 100);
}
function check() {
var count = document.getElementById("count");
if (count.value != 1) {
//some code
count.value = 1;
}
}
});
$('button').click(function() {
$('#myparent').append('<div id="element">Some text</div>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button>Add</button>
<input id="count" />
<div id="myparent"></div>
Note: The solution assumes you have a static parent element for the dynamic element(like the myparent element in the above example)

How to overwrite focus() in JavaScript for all elements?

I want to overwrite the function focus() for all HTML elements in JavaScript.
How do I do that?

The question asks for just how to override the .focus() method for HTML elements, so that will be answered first. There are however, other ways to trigger "focus" on elements, and overriding those methods are discussed below.
Please also note, it is probably not a good idea to override global prototypes.
Overriding the .focus() method on HTML elements
You can override the focus function for all HTMLElement's by modifying its prototype.
HTMLElement.prototype.focus = function () {
// ... do your custom stuff here
}
If you still want to run the default focus behavior and run your custom override, you can do the following:
let oldHTMLFocus = HTMLElement.prototype.focus;
HTMLElement.prototype.focus = function () {
// your custom code
oldHTMLFocus.apply(this, arguments);
};
Overriding the focus event set via handlers on HTML elements
This is done in a similar fashion to overriding the .focus() method. However, in this case, we will target the EventTarget constructor and modify the addEventListener prototype:
let oldAddListener = HTMLElement.prototype.addEventListener;
EventTarget.prototype.addEventListener = function () {
let scope = this;
let func = arguments[1];
if (arguments[0] === 'focus') {
arguments[1] = function (e) {
yourCustomFunction(scope);
func(e);
};
}
oldAddListener.apply(this, arguments);
};
If you don't want original behavior at all, you can remove the func call (func(e)).
Overriding the focus event set via the onfocus attribute
Doing this is actually quite tricky, and will most likely have some unforseen limitations. That said, I could not find a way to override this by modifying prototypes, etc. The only way I could get this work was by using MutationObservers. It works by finding all elements that have the attribute onfocus and it sets the first function to run to your override function:
let observer = new MutationObserver(handleOnFocusElements);
let observerConfig = {
attributes: true,
childList: true,
subtree: true,
attributeFilter: ['onfocus']
};
let targetNode = document.body;
observer.observe(targetNode, observerConfig);
function handleOnFocusElements() {
Array
.from(document.querySelectorAll('[onfocus]:not([onfocus*="yourCustomFunction"])'))
.forEach(element => {
let currentCallbacks = element.getAttribute('onfocus');
element.setAttribute('onfocus', `yourCustomFunction(this); return; ${currentCallbacks}`);
});
}
If you want to stop the original onfocus from firing its events completely, you can just empty the onfocus attribute entirely on any mutation changes, and just set the value to your desired function.
An example with all of the code snippets together:
(function() {
window.yourCustomFunction = function(target) {
console.log('OVERRIDE on element', target);
};
let observer = new MutationObserver(handleOnFocusElements);
let observerConfig = {
attributes: true,
childList: true,
subtree: true,
attributeFilter: ['onfocus']
};
let targetNode = document.body;
// Start overriding methods
// The HTML `.focus()` method
let oldHTMLFocus = HTMLElement.prototype.focus;
HTMLElement.prototype.focus = function() {
yourCustomFunction(this);
oldHTMLFocus.apply(this, arguments);
};
// Event Target's .addEventListener prototype
let oldAddListener = HTMLElement.prototype.addEventListener;
EventTarget.prototype.addEventListener = function() {
let scope = this;
let func = arguments[1];
if (arguments[0] === 'focus') {
arguments[1] = function(e) {
yourCustomFunction(scope);
func(e);
};
}
oldAddListener.apply(this, arguments);
};
// Handle the onfocus attributes
function handleOnFocusElements() {
Array
.from(document.querySelectorAll('[onfocus]:not([onfocus*="yourCustomFunction"])'))
.forEach(element => {
let currentCallbacks = element.getAttribute('onfocus');
element.setAttribute('onfocus', `yourCustomFunction(this); return; ${currentCallbacks}`);
});
}
window.addEventListener('load', () => {
handleOnFocusElements();
observer.observe(targetNode, observerConfig);
});
})();
let input = document.querySelector('input');
input.addEventListener('focus', function() {
console.log('Add Event Listener Focus');
});
function attributeHandler() {
console.log('Called From the Attribute Handler');
}
<input type="text" onfocus="attributeHandler()">

In pure JS:
HTML:
<input id="test" type="textfield" />​
JS:
var myInput = document.getElementById("test");
myInput.addEventListener("focus",deFocus(myInput),true);
function deFocus(element) {
element.setAttribute('readonly','readonly');
return false;
}
Working fiddle
In JQuery:
HTML
​<input id="test" type="textfield" />
JQuery
​$('#test').focus(function() {
$(this).blur();
});​​​​​​​​​​​​​​​​​​​​
Working fiddle
You can add the EventListener to whatever you want, class, id, etc. and run it through the function or trigger something else to unlock them. JQuery can also handle this pretty smoothly, though if you're going that route I would suggest using a class as a selector and then you can add and remove the class dynamically to disable focus.