This is my code.Its working fine on firefox
<script language="JavaScript"type="text/javascript">
window.onload=function createDiv()
{
var body = document.getElementsByTagName('body') [0];
var div = document.createElement('div');
div.setAttribute('id','errorMessage');
div.setAttribute('class','blockMessage');
var text = document.createTextNode('TO close the message click on cancel');
var closeText=document.createElement('span');
closeText.setAttribute('id','close');
closeText.setAttribute('onclick','destroyObject()');
var text1=document.createTextNode('Close');
closeText.appendChild(text1);
div.appendChild(text);
div.appendChild(closeText);
document.body.insertBefore(div, document.body.firstChild);
//body.appendChild(div);
}
function destroyObject(){
var getId=document.getElementById('errorMessage');
getId.remove(getId);
}
</script>
As workaround, you could add some more code if its IE, like:
//for class
div.className = "your_class_name";
//for onclick
div.onclick = function() {destroyObject();}; // for IE
See here for more
For old versions of IE (6/7) use can use properties instead of attributes:
div.id = 'errorMessage';
div.className = 'blockMessage';
closeText.onclick = destroyObject;
Related
Popup won't close when i click close button, i tried debugging with console.log and it looks like closeButton.onclick function doesn't run at all for some reason.
When running close() function manually from the console everything works fine.
class Popup {
constructor(content){
this.div = document.createElement("div");
this.div.className = "block";
//tried positioning popup into the center of the screen, doesn't work yet
this.div.style.position = "fixed";
this.div.style.margin = "auto auto";
//caption
this.caption = document.createElement("div");
this.caption.style.textAlign = "right";
//closeButton
this.closeButton = document.createElement("button");
this.closeButton.textContent = "X";
this.closeButton.onclick = this.close;
document.body.appendChild(this.div);
this.div.appendChild(this.caption);
this.caption.appendChild(this.closeButton);
this.div.innerHTML += content;
}
close(){
this.div.parentNode.removeChild(this.div);
delete this;
}
}
new Popup("close me");
That's how it looks like:
var popup = new Popup("hm hello");
SOLUTION:
The issue was happening because:
I was appending content of the popup right into main div using +=. That made DOM refresh and onclick trigger reset.
this.closeButton.onclick = this.close; here onclick trigger will execute close function and also will overwrite this keyword, so it contains a button that called trigger, not the Popup object. I decided to put Popup into a variable that is visible to onclick function. Now everything works fine.
class Popup {
constructor(content){
this.div = document.createElement("div");
this.div.className = "block";
this.div.style.position = "fixed";
this.div.style.margin = "auto auto";
//делоем капшон
this.caption = document.createElement("div");
this.caption.style.textAlign = "right";
//кнопка закрытия
this.closeButton = document.createElement("button");
this.closeButton.textContent = "X";
let popup = this;
this.closeButton.onclick = function(){popup.close()};
this.content = document.createElement("div");
this.content.innerHTML = content;
this.caption.appendChild(this.closeButton);
this.div.appendChild(this.caption);
this.div.appendChild(this.content);
document.body.appendChild(this.div);
}
close(){
this.div.parentNode.removeChild(this.div);
delete this;
}
}
new Popup("hello guys");
The issue is that right here:
this.div.innerHTML += content;
When you assign a value to .innerHTML, the entire previous value is overwritten with the new value. Even if the new value contains the same HTML string as the previous value, any DOM event bindings on elements in the original HTML will have been lost. The solution is to not use .innerHTML and instead use .appendChild. To accomplish this in your case (so that you don't lose the existing content), you can create a "dummy" element that you could use .innerHTML on, but because of performance issues with .innerHTML, it's better to set non-HTML content up with the .textContent property of a DOM object.
You were also going to have troubles inside close() locating the correct parentNode and node to remove, so I've updated that.
class Popup {
constructor(content){
this.div = document.createElement("div");
this.div.className = "block";
this.div.style.position = "fixed";
this.div.style.margin = "auto auto";
//caption
this.caption = document.createElement("div");
this.caption.style.textAlign = "right";
//closeButton
this.closeButton = document.createElement("button");
this.closeButton.textContent = "X";
this.closeButton.addEventListener("click", this.close);
this.caption.appendChild(this.closeButton);
this.div.appendChild(this.caption);
// Create a "dummy" wrapper that we can place content into
var dummy = document.createElement("div");
dummy.textContent = content;
// Then append the wrapper to the existing element (which won't kill
// any event bindings on DOM elements already present).
this.div.appendChild(dummy);
document.body.appendChild(this.div);
}
close() {
var currentPopup = document.querySelector(".block");
currentPopup.parentNode.removeChild(currentPopup);
delete this;
}
}
var popup = new Popup("hm hello");
I've finally found a final solution.
As Scott Marcus mentioned in his answer, i will have troubles inside close function, so i decided to put Popup object into a variable that is visible to close function. Everything works fine without applying classes. Though it may look like a bad code.
class Popup {
constructor(content){
this.div = document.createElement("div");
this.div.className = "block";
this.div.style.position = "fixed";
this.div.style.margin = "auto auto";
//делоем капшон
this.caption = document.createElement("div");
this.caption.style.textAlign = "right";
//кнопка закрытия
this.closeButton = document.createElement("button");
this.closeButton.textContent = "X";
let popup = this;
this.closeButton.onclick = function(){popup.close()};
this.content = document.createElement("div");
this.content.innerHTML = content;
this.caption.appendChild(this.closeButton);
this.div.appendChild(this.caption);
this.div.appendChild(this.content);
document.body.appendChild(this.div);
}
close(){
this.div.parentNode.removeChild(this.div);
delete this;
}
}
new Popup("hello guys")
P.S.
What's the point of this restriction?
When using Google Map Custom Overlay to add pop over with input text boxes as seen below, when I try to click on the input box on IE Edge 15 (Haven't tested on other IE versions) I can't click on it and start typing as if it won't set focus on the input box.
It does works on Chrome though.
CustomMarker.prototype.onAdd = function() {
var self = this;
var div = this.div;
if (!div) {
// Generate marker html
div = this.div = document.createElement('div');
div.className = 'custom-marker';
div.style.position = 'absolute';
div.innerHTML = '<span><input type="text" value="asfd" style="padding:10px;font-size:18px;" /></span>';
var innerDiv = document.createElement('div');
innerDiv.className = 'custom-marker-inner';
div.appendChild(innerDiv);
if (typeof(self.args.marker_id) !== 'undefined') {
div.dataset.marker_id = self.args.marker_id;
}
google.maps.event.addDomListener(div, "click", function(event) {
google.maps.event.trigger(self, "click");
});
var panes = this.getPanes();
panes.overlayImage.appendChild(div);
}
};
Full example code here - jsfiddle
I am wondering if my implementation above is wrong or this is a bug from Google Map? [Edit: or is there a work around?]
I've forked your fiddle. It might be a bit hacky, but I've updated the click event to focus on the input:
google.maps.event.addDomListener(div, "click", function(event) {
google.maps.event.trigger(self, "click");
event.target.focus();
});
https://jsfiddle.net/ng4hxqfs/5/
Not sure what I'm missing here...
window.onload = function() {
var testDiv = document.createElement("div");
testDiv.style.backgroundImage = "url('http://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/2000px-Smiley.svg.png')";
document.body.appendChild(testDiv);
}
The issue is you're setting a background-image on a div with no height or width. Add those:
window.onload = function() {
var testDiv = document.createElement("div");
testDiv.style.backgroundImage = "url('http://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/2000px-Smiley.svg.png')";
testDiv.style.backgroundSize="cover"; //image is large, you dont need this if you dont want
testDiv.style.height="100px"; //add some value
testDiv.style.width="100px"; //add some value
document.body.appendChild(testDiv);
}
FIDDLE
I have a transperent iframe, which created by next JS function:
Frames.prototype.CreateIframe = function (frameName, frWidth, frHeight, zindex) {
var frameObj = document.createElement('iframe');
frameObj.width = PX(frWidth);
frameObj.src = 'Content.htm';
frameObj.height = PX(frHeight);
frameObj.id = frameName;
frameObj.name = frameName;
frameObj.frameBorder = 0;
frameObj.allowTransparency = 'allowtransparency';
frameObj.style.zIndex = zindex;
frameObj.style.position = 'absolute';
frameObj.style.scrolling = 'no';
frameObj.style.scroll = 'no';
frameObj.style.overflow = 'hidden';
frameObj.style.left = PX(0);
frameObj.style.top = PX(0);
GlobalClass.AppendChild(window, frameObj);
}
Below that is another iframe where the images are placed. I created event handlers for these images. For example document.GetElementById("MyImage").onclick(alert("Click!"));
If I run it by IE, everything works fine. But I run it by Chrome, Firefox, Opera nothing works. How I can correct this?
The upper transparent iframe has event handlers and it works in IE also.
document.GetElementById("MyImage").onclick= function(){
alert("Click!");
}
I am trying to change the contents of a div without using jQuery. I want to select the div by id or class.
Ive managed to get append to work:
function appendHtml(targetC, htmldata) {
var theDiv = document.getElementById(targetC);
var newNode = document.createElement('div');
newNode.innerHTML = htmldata;
theDiv.appendChild(newNode)
}
But cant figure out how to change text of one..
Any ideas?
see this fiddle for a basic sample
<html>
<head>
<script>
function bold(targetC) {
var theDiv = document.getElementById(targetC);
theDiv.innerHTML = '<b>' + theDiv.innerHTML + '</b>';
}
</script>
</head>
<body onload='bold("message")'>
<div>Hello, World!</div>
<div id="message">What a nice day!</div>
</body>
</html>
Edited:
<div id="foo">old text</div>
The JS code:
function appendHtml(targetC, htmldata) {
var theDiv = document.getElementById(targetC);
theDiv.innerHTML = htmldata;
}
appendHtml('foo', 'new text');
Here is a fiddle: http://jsfiddle.net/7QjcB/
simply change the html of a div by using innerHTML
var anyDiv = document.getElementById(targetID);
html = "content";
anydiv.innerHTML(html);
as a variation of your provided function:
function changeHtml(targetC, htmldata) {
var theDiv = document.getElementById(targetC);
theDIV.innerHTML = htmldata;
}
Here is a fiddle that might answer your question. All I changed was getting the element before and then passing it in.
function appendHtml(targetC, htmldata) {
var newNode = document.createElement('div');
newNode.innerHTML = htmldata;
targetC.appendChild(newNode);
}
var getDiv = document.getElementById("testing");