Extracting specific information (position) from OldValue using MutationObserver - javascript

I am trying to retrieve the old position value of a div element on a page using the Mutation Observer. This is the code that I have:
var mutationObserver = new MutationObserver(callback);
var target = document.getElementById('test');
var config = {
attributes : true,
childList : false,
subtree : false,
attributeOldValue : true,
};
mutationObserver.observe(target, config)
function test (){
var target = document.getElementById('test');
target.style.backgroundColor = "black"
}
function callback(mutations, mutationObs){
for (var i = 0; i < mutations.length ; i++){
var mutation = mutations [i];
alert(mutation.oldValue)
}
}
When the color of my test div changes, I get an alert with all the old style attribute value.
Alert : "position: relative; top:40px;"
Is there a way to only use the top value for example?
Thank you!

You can split you string and get what you need.
var alertValueSplit = mutation.oldValue.split("top:")
var topValue = alertValueSplit[1]

Related

Disable spellcheck and autocomplete globally in a HTML document?

It's possible to disable spellcheck or autocomplete on individual input elements by adding the tags spellcheck="false" or autocomplete="off" to that element.
But for those who would like to disable it globally across the entire DOM, is there a way to do this using vanilla javascript or HMTL (accounting for the fact that new input elements may be created over the lifetime of the page)?
In vanilla javascript, one option would be to iterate all the inputs on the page and apply the necessary attribute, something like this:
var inputs = document.getElementsByTagName("input");
for(var i = 0; i < inputs.length; i++){
inputs[i].setAttribute("spellcheck", "false");
}
For a more dynamic situation where you're unable to control the creation of new inputs, a mutation observer could be used to apply the desired attributes to dynamically created:
window.addInput = function(){
var container = document.getElementById("container");
var input = document.createElement("input");
input.setAttribute("type", "text");
container.appendChild(input);
container.appendChild(document.createElement("br"));
}
//MutationObserver docs: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
var observer = new MutationObserver(function (e){
for(var i = 0; i < e.length; i++){
for(var j = 0; j < e[i].addedNodes.length; j++){
if(["INPUT", "TEXTAREA"].indexOf(e[i].addedNodes[j].tagName) > -1){
e[i].addedNodes[j].setAttribute("spellcheck", "false");
console.log("attribute set")
}
}
}
}).observe(document.getElementById("container"), {childList:true});
<button onclick="addInput();">
Add Input
</button>
<div id="container">
</div>
To handle dynamic elements, try this
document.addEventListener('focus',function(e){
var elem = e.target;
if (elem && elem.tagName.toLowerCase()=="input" {
elem.spellcheck=false;
}
})
Else loop:
var inp = document.querySelectorAll("input[type=text], textarea");
for (var i=0; i<inp.length; i++){
inp[i].spellcheck=false;
inp[i].autocomplete="off";
}
To be able to handle dynamically created elements, you should use DOM Mutation Observers, which can monitor a DOM node for changes and fire a callback at that point:
// Create the mutation observer
var observer = new MutationObserver(function(mutations) {
// Loop through the mutations
mutations.forEach(function(mutation) {
// Loop through the mutation record for that mutation
for (var i = 0; i < mutation.addedNodes.length; i++){
// Cache current node being added
var n = mutation.addedNodes[i];
// Check node for an input
if(n.nodeName === "INPUT"){
// Set properties as desired
n.setAttribute("spellcheck", "false");
n.setAttribute("autocomplete", "off");
// Confirm changes to new element
console.log(n);
}
}
});
});
// Start observing the <body>
observer.observe(document.body, { childList: true });
// Dynamically add a new input
document.body.appendChild(document.createElement("input"));

how to get itemId values using hasOwnProperty method to hide a tab in ext js

I tried this code to hide a tab:
hideTab: function() {
var dashboard_obj = Ext.ComponentQuery.query('sellax-navigation-panel');
var tabBarObj = dashboard_obj[0].down('tabpanel').getTabBar();
var tabsArray = tabBarObj.items;
for(var tabBarObjItems = 0; tabBarObjItems < tabsArray.length; tabBarObjItems++)
{
var tabObj = tabsArray.get(tabBarObjItems);
if(tabObj.card.id == "tabSettings")
{
var tabObj_list = Ext.ComponentQuery.query('sellax-navigation-sub[id=settingsSubNav]');
var tabBarObj_list = tabObj_list[0].getTabBar();
var tabsArray_list = tabBarObj_list.items;
for(var tabSubBarObjItems = 0; tabSubBarObjItems < tabsArray_list.length; tabSubBarObjItems++)
{
if(tabsArray_list_item.id == "tab-1334")
{
tabsArray_list_item.hide();
}
But the console values are not correct, so how can I hide that tab?
My code:
var tabsArray_list = tabBarObj_list.items;
for(var tabSubBarObjItems = 0; tabSubBarObjItems < tabsArray_list.length; tabSubBarObjItems++)
{
var tabsArray_list_item = tabsArray_list.get(tabSubBarObjItems);
if (tabsArray_list_item.hasOwnProperty('itemId'))
{
value = tabsArray_list_item['itemId'];
if (value == 'tabdeptsList')
{
tabsArray_list_item.hide();
}
}
Code throws no error but tab is not hiding.
How to get ItemId of this panel and hide this tab?
Find Component in Container
To retrieve the component for a specific itemId you should use the getComponent method of the Ext.container.Container. It accepts an itemId as it's parameter and returns the matching component.
From the Sencha ExtJs 6.2.1 documentation:
Examines this container's items property and gets a direct child component of this container.
So you do not need too loop over the items, just call the function.
var tabsArray_list = tabBarObj_list.getComponent('tabdeptsList');
Hide Tab
To hide the associated tab, you can use the tab property of the component.
var tab = tabsArray_list.tab; // Each component has a reference to it's tab
tab.hide();
Full Code
var tabsArray_list = tabBarObj_list.getComponent('tabdeptsList');
var tab = tabsArray_list.tab;
tab.hide();

Image doesn't display after changing src attribute

Like the title says after I change the src to the value during the rollEvent function, the image doesn't change. When I print the value of display.src to console it is correct. But the actual document doesn't change the src value for the img tag with the class of display_box. Am I missing something here?
jsfiddle.net/bNL5C/3/
window.onload = function eventsLoad (elem, display) {
elem = document.getElementsByClassName('images');
display = document.getElementsByClassName('display_box');
function rollEvent(e) {
var sourceURL = this.src;
console.log(sourceURL);
display.src = sourceURL;
console.log(display.src);
};
console.log(elem);
console.log(display);
for (var i = 0; i < elem.length; i++) {
elem[i].addEventListener('mouseover', rollEvent, false);
console.log('Added event listener to ' + elem[i]);
};
}
getElementsByClassName returns NodeList, so you should change display.src = sourceURL:
function rollEvent(e) {
var sourceURL = this.src;
display[0].src = sourceURL; // <--- change here
console.log(display.src);
};
Demo: http://jsfiddle.net/bNL5C/4/
or use display = document.querySelector('.display_box'); instead.
Try this... Change:
document.getElementsByClassName returns an array - display is a list. Try changing
display.src = sourceURL;
To:
display[0].src = sourceURL;

CreateElement with id?

I'm trying to modify this code to also give this div item an ID, however I have not found anything on google, and idName does not work. I read something about append, however it seems pretty complicated for a task that seems pretty simple, so is there an alternative? Thanks :)
g=document.createElement('div'); g.className='tclose'; g.v=0;
You should use the .setAttribute() method:
g = document.createElement('div');
g.setAttribute("id", "Div1");
You can use g.id = 'desiredId' from your example to set the id of the element you've created.
var g = document.createElement('div');
g.id = 'someId';
You can use Element.setAttribute
Examples:
g.setAttribute("id","yourId")
g.setAttribute("class","tclose")
Here's my function for doing this better:
function createElement(element, attribute, inner) {
if (typeof(element) === "undefined") {
return false;
}
if (typeof(inner) === "undefined") {
inner = "";
}
var el = document.createElement(element);
if (typeof(attribute) === 'object') {
for (var key in attribute) {
el.setAttribute(key, attribute[key]);
}
}
if (!Array.isArray(inner)) {
inner = [inner];
}
for (var k = 0; k < inner.length; k++) {
if (inner[k].tagName) {
el.appendChild(inner[k]);
} else {
el.appendChild(document.createTextNode(inner[k]));
}
}
return el;
}
Example 1:
createElement("div");
will return this:
<div></div>
Example 2:
createElement("a",{"href":"http://google.com","style":"color:#FFF;background:#333;"},"google");`
will return this:
google
Example 3:
var google = createElement("a",{"href":"http://google.com"},"google"),
youtube = createElement("a",{"href":"http://youtube.com"},"youtube"),
facebook = createElement("a",{"href":"http://facebook.com"},"facebook"),
links_conteiner = createElement("div",{"id":"links"},[google,youtube,facebook]);
will return this:
<div id="links">
google
youtube
facebook
</div>
You can create new elements and set attribute(s) and append child(s)
createElement("tag",{attr:val,attr:val},[element1,"some text",element2,element3,"or some text again :)"]);
There is no limit for attr or child element(s)
Why not do this with jQuery?
var newDiv= $('<div/>', { id: 'foo', class: 'tclose'})
var element = document.createElement('tagname');
element.className= "classname";
element.id= "id";
try this you want.
that is simple, just to make a new element with an id :
var myCreatedElement = document.createElement("div");
var myContainer = document.getElementById("container");
//setAttribute() is used to create attributes or change it:
myCreatedElement.setAttribute("id","myId");
//here you add the element you created using appendChild()
myContainer.appendChild(myCreatedElement);
that is all
I'm not sure if you are trying to set an ID so you can style it in CSS but if that's the case what you can also try:
var g = document.createElement('div');
g.className= "g";
and that will name your div so you can target it.
window.addEventListener('DOMContentLoaded', (event) => {
var g = document.createElement('div');
g.setAttribute("id", "google_translate_elementMobile");
document.querySelector('Selector will here').appendChild(g);
});

dojo equivalent of document.X

What will be the dojo equivalent code of following.?
var msgContainer = document.createElement('div');
msgContainer.id = 'alert'; // set id of div
msgContainer.setAttribute('role', 'alert');
msgContainer.className = 'contenthide' // set class name
msgContainer.appendChild(document.createTextNode(msg));
document.body.appendChild(msgContainer);
var div = dojo.byId('alert');
while (div) {
div.parentNode.removeChild(div);
div = dojo.byId('alert');
}
var msgContainer = dojo.create("div", {
id:"alert",
role:"alert",
"class":"contenthide",
innerText:msg }, dojo.body());
Please check on the Dojo Toolkit's documentation for more DOM functions.

Categories