How to MutationObserver for new created element? When I create a new element, mutatonObserver does not work. I need to register if the giant box has changed style ...
<button onclick="myFunction()">Create</button>
<button onclick="myFunctionStyle()">Change style</button>
var observerm = new MutationObserver(function(mutationsm) {
mutationsm.forEach(function(mutationRecord) {
alert('style changed!');
});
});
var targetm = document.getElementById("Box");
observerm.observe(targetm, { attributes : true, attributeFilter : ['style'] });
function myFunction() {
var newdiv = document.createElement("DIV");
newdiv.innerHTML = "Box";
newdiv.id = "Box";
newdiv.style.width = "100px";
newdiv.style.height = "50px";
newdiv.style.backgroundColor = "red";
document.body.appendChild(newdiv);
}
function myFunctionStyle() {
document.getElementById("Box").style.backgroundColor = "blue";
}
Since the newly added elements are appended to the document.body, that's the element you need to attach another MutationObserver to.
new MutationObserver(() => {
console.log('mutation on document body');
// rest of the code you need when an element is appended
})
.observe(document.body, { childList: true })
Related
var currentHtmlContent;
var element = new Image();
var elementWithHiddenContent = document.querySelector("#element");
var innerHtml = elementWithHiddenContent.innerHTML;
element.DefineGetter("id", function() {
currentHtmlContent="";
});
setInterval(function(){
currentHtmlContent= innerHtml;
console.log(element);
console.clear();
elementWithHiddenContent.innerHTML = currentHtmlContent;
}, 1000);
I have just two elements, a div with an object attached as child, which contains an SVG image. The click handler works fine when there is just the div by itself, or another tag as it's child, such as img. However, when the object is a child, the div click handler is only triggered in the very bottom right corner. I'm really stuck as to what would be causing this behavior.
let divContainer = document.createElement('div');
divContainer.className = 'divContainer';
divContainer.style.position = 'absolute'
divContainer.style.top = '100px';
divContainer.style.width = '150px';
divContainer.style.height = '150px';
divContainer.style.background = 'green';
let imageChild = document.createElement('object');
imageChild.type = 'image/svg+xml';
imageChild.data = 'https://svgsilh.com/svg_v2/48363.svg'
imageChild.className = 'imageChild';
imageChild.style.width = 'inherit';
document.body.append(divContainer);
// Comment this out, and it works fine
divContainer.append(imageChild);
divContainer.onclick = function(event) {
console.log('Click OK!');
}
here is the working code
let divContainer = document.createElement('div');
divContainer.className = 'divContainer';
divContainer.style.top = '100px';
divContainer.style.width = '150px';
divContainer.style.height = '150px';
divContainer.style.background = 'green';
let imageChild = document.createElement('object');
imageChild.type = 'image/svg+xml';
imageChild.data = 'https://svgsilh.com/svg_v2/48363.svg';
imageChild.className = 'imageChild';
imageChild.style.width = 'inherit';
imageChild.style.pointerEvents = 'none';
document.body.append(divContainer);
// Comment this out, and it works fine
divContainer.append(imageChild);
divContainer.addEventListener('click', function () {
alert('Click OK!');
});
I have 5 objects (ie instances of a class), and I need to set an event listener on the "im" property, that runs the function "squash()".
I attempted to use this.im.click(squash()) in the class, but that did not work. How can I create the event listener?
let divs = $(".flies");
divs.each(function(i){
let img = $("<img/>");
img.attr({
"id": i,
"src": "http://clipart-library.com/images/8iznoLG8T.png"});
$(this).append(img)
});
class Fly {
constructor(div, im, alive){
this.div = div;
this.im = im;
this.alive = true;
}
squash(){
this.alive= false;
this.element.css("visibility", "hidden");
}
}
let fly1 = new Fly($('#fly1'), $('#0'), true);
let fly2 = new Fly($('#fly2'), $('#1'), true);
let fly3 = new Fly($('#fly3'), $('#2'), true);
let fly4 = new Fly($('#fly4'), $('#3'), true);
let fly5 = new Fly($('#fly5'), $('#4'), true);
Use im.click(this.squash.bind(this));
class Fly {
constructor(div, im, alive){
this.div = div;
this.im = im;
this.alive = true;
this.init()
}
init(){
this.im.click(this.squash.bind(this));
}
squash(){
this.alive= false;
// wasn't sure what `element` is supposed to be, used `div` instead
this.div.css("visibility", "hidden");
}
}
let fly1 = new Fly($('#fly1'), $('#0'), true);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="0">Click to hide content</button>
<div id="fly1">Content 1</div>
I followed this control-button-leaflet tutorial and it worked for me. Now I want to:
show some text when i hover over the button (like with the zoom buttons)
Change the color of the button when i hover over it
be able to write text inside the button instead of an image.
Here's the code:
var customControl = L.Control.extend({
options: {
position: 'topleft'
},
onAdd: function (map) {
var container = L.DomUtil.create('div', 'leaflet-bar leaflet-control leaflet-control-custom');
container.style.backgroundColor = 'white';
container.style.backgroundImage = "url(http://t1.gstatic.com/images?q=tbn:ANd9GcR6FCUMW5bPn8C4PbKak2BJQQsmC-K9-mbYBeFZm1ZM2w2GRy40Ew)";
container.style.backgroundSize = "30px 30px";
container.style.width = '30px';
container.style.height = '30px';
container.onclick = function(){
console.log('buttonClicked');
}
return container;
}
});
var map;
var readyState = function(e){
map = new L.Map('map').setView([48.935, 18.14], 14);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
map.addControl(new customControl());
}
window.addEventListener('DOMContentLoaded', readyState);
It seems you more need a Button than a div:
var container = L.DomUtil.create('input');
container.type="button";
Then you can easily set a mouseover text:
container.title="No cat";
And some Text instead of an image:
container.value = "42";
And you can use the mouse events to style the button:
container.onmouseover = function(){
container.style.backgroundColor = 'pink';
}
container.onmouseout = function(){
container.style.backgroundColor = 'white';
}
(you could of course do this last part with css, might be more elegant)
Full example: http://codepen.io/anon/pen/oXVMvy
I have created a custom close button for the InfoBox, but I cannot get it to close. I have tried to create an eventlistener for when the box is clicked, but no luck so far. The code is as follows:
InfoPopupbox.prototype = new google.maps.OverlayView();
InfoPopupbox.prototype.onAdd = function() {
//add is after the map has been initiated
var div = document.createElement('div');
var classname = "infoWrapper ";
if (this.customclass){
classname += this.customclass;
}
div.className = classname ;
div.style.border = "none";
div.style.borderWidth = "0px";
div.style.position = "absolute";
div.appendChild(this.content_);
this.div_ = div;
var panes = this.getPanes();
//panes.overlayLayer.appendChild(div);
//float the Pane above the map
panes.floatPane.appendChild(div);
google.maps.event.addListener( this , 'click' , function(){
console.log('click close');
that.infotoggle();
});
};
You want to use addDomListener instead of addListener for click, and you'll need to bind it to the DOM Element:
google.maps.event.addDomListener(this.div, 'click', function() { ... });