We Keep Coding

IE11 Form Templating, innerHTML & outerHTML issue

I made a big form and I need a little templating to get it to work.
Like so
So I want to have an HTML DIV in my HTML code with the id="sponsor_template", read it and add it to the button.
Here is my js-code
var sponsorBTN = document.querySelector('[name="sponsors_add"]');
if (sponsorBTN !== null) {
sponsorBTN.addEventListener('click', function () {
var s_template = document.querySelector('[id="sponsor_template"]');
sponsorBTN.insertAdjacentHTML('beforeBegin', s_template.outerHTML.replace('id="sponsor_template"', 'name="sponsor"')
.replace('display:none', ''))
})
}
It works perfectly on any browser except for IE.
The only thing I know, where the issue could be is innerHTML / outerHTML because my output is incomplete when I console.log them in IE.
So it just cuts off after the 7'th line of HTML.
Here is the JSFiddle to this issue: https://jsfiddle.net/tdxkiller/b5m0t7xm/

This line is your problem:
s_template.outerHTML.replace('id="sponsor_template"', 'name="sponsor"').replace('display:none', '')
I'm not sure why it has a problem with "display:none"; I think there's some problem with the ":" character. However, I changed it to the below and it worked:
s_template.outerHTML.replace('id="sponsor_template"', 'name="sponsor"').replace('none', 'block')

jQuery `[jQuery created Element].is(":hover")` Only Seems To Work In Chrome

Please see the code below (very stripped back and not my full function). I've also got a fiddle that you can test it at: https://jsfiddle.net/glenn2223/uk7e7rwe/1/
var
hov = $("<div class=\"over\">I'm Over You</div>"),
box = $("<div>Result: WAITING</div>")
$("body").append(hov).append(box);
$("#MeHover").on('mouseleave', function(){
var d = new Date();
box.text("Result: " + hov.is(":hover").toString().toUpperCase() );
});
We have a div and div.over overlaps it slightly. When you move from div to div.over I want the function to return true.
In my full function: this stops it from hiding the div.over element.
Opening it in Chrome it works as expected. However, it's not in pretty much everything else (Tested in: Edge, IE11 and Firefox).

Okay so we've found out why it doesn't work the :hover was removed from .is() a while back.
Rather than changing this question to suit my findings I will ask another (saves confusion).
My New Question: Keep jQuery Appended Element Open When Hovering It

Changing Background Image in IE 10 using javascript

I'm developing a web site these days, I developed a option for my site so users can change the background image.
I previously used windows 7 and XP, changing background image worked on both win 7 and XP's Internet Explorer but recently I moved to windows 8 which comes with IE 10, when I test my site with IE 10, changing background images doesn't work.
why are these guys changing these stuff? I shouldn't even care about this matter but still there are people who use IE. :(
here is my code
var body = document.getElementsByTagName("body")[0];
body.style.backgroundImage = "url(" + picurl + ")";
Any idea how it can be done with IE 10 ?

The code you provided is working for me in IE10. Incase your url has a space character,
Try this
body.style.backgroundImage = "url('" + picurl + "')";

If the image is already known in advance, it would reduce maintenance if you specified it in a class in a CSS file, and simply added a new class. In jQuery:
$(body).addClass('my-bgd-class');
However, since you're using a variable, you would do:
$(body).css('background-image', 'url("' + picurl + '")');

The code you've quoted works fine for me.
I've done a jsFiddle to prove it -- http://jsfiddle.net/Ryavz/
var picurl = "http://static.travelblog.org/Wallpaper/pix/waterfall_desktop_background-1600x1200.jpg"; //just a random image I found on the web
var body = document.getElementsByTagName("body")[0];
body.style.backgroundImage = "url("+picurl+")";
The above code works the same for me in IE10 and other browsers.
If there is a specific problem with your site in IE10, it's not with the code you quoted.
You probably should be adding quotes to the url() style parameter, in case the URL has a space or a bracket or something like that in it, but other than that, your code is fine, and it works for me in all browsers with or without quotes.

Image Hide in and hide out using event handler

I am working on a web page which contains a list of items and sub items for display. In the Div element, I am setting up the values, image. Using the image show and hide option On click event handler is triggered. This seems to be working fine with IE9, but doesn't work with other browsers (FireFox, Chrome and safari).
<div id="Type_A Medicine" value="H" entity="Type A Medicine" onClick="showHide(this,'MIE_Type_A Medicine')"><img src='<%=request.getContextPath()%>/images/plus.gif'>Type A Medicine</div>
function showHide(ctrl,id)
{
if (ctrl.value == "H")
{
ctrl.value = "S";
ctrl.innerHTML = "<img src='<%=request.getContextPath()%>/images/minus.gif'>" +ctrl.getAttribute("entity");
showBlock(id);
}
else if (ctrl.value == "S")
{
ctrl.value = "H";
ctrl.innerHTML = "<img src='<%=request.getContextPath()%>/images/plus.gif'>" + ctrl.getAttribute("entity");
hideBlock(id);
}
}
function hideBlock(blockId)
{
var str = "document.all." + blockId + ".style.display='none'";
eval(str);
}
function showBlock(blockId)
{
var str = "document.all." + blockId + ".style.display=''";
eval(str);
}
I still couldn't figure out the difference with the list of browsers. Kindly help...

I'm guessing it is because you use an invalid ID syntax. ID's cannot have spaces. If you use invalid HTML you can't expect javascript to work the same way across browsers.
id="Type_A Medicine"
Also, you never post the code for showBlock or hideBlock where you pass the ID in. Can't tell what goes wrong there without code.

To retrieve non-standard attributes, you should use .getAttribute() rather than trying to access them as properties.
So ctrl.entity should be ctrl.getAttribute("entity") and the same for other non-standard attributes. Run this example in Chrome: http://jsfiddle.net/jfriend00/Lxna7/.
Also, you should remove the space from your ID value as that's not a legal character and makes the id unusable in many circumstances (where a space is a delimiter between identifiers).

Try closing correctly the image tags to see if that fix the problem:
<img src="path/file.html" />

JavaScript source file not loading in IE8 Popup

I have an issue where the JavaScript source file is loading in popup for IE6, Chrome, Firefox, Safari and Opera. But the same source file is not loading up in IE8.
As a result of this the HTML is not being replaced in the Popup and I am getting an error in IE8 popup saying tinyMCE is not defined
I have referred to Formatting this JavaScript Line and solved issue on all browsers except IE8.
The JavaScript function is as follows:
function openSupportPage() {
var features="width=700,height=400,status=yes,toolbar=no,menubar=no,location=no,scrollbars=yes";
var winId=window.open('','',features);
winId.document.open();
winId.document.write('<html><head><title>' + document.title + '</title><link rel="stylesheet" href="../css/default.css" type="text/css">\n');
var winDoc = winId.document;
var sEl = winDoc.createElement("script");
sEl.src = "../js/tiny_mce/tiny_mce.js";/*TinyMCE source file*/
sEl.type="text/javascript";
winDoc.getElementsByTagName("head")[0].appendChild(sEl);
winId.document.write('<script type="text/javascript">\n');
winId.document.write('function inittextarea() {\n');
winId.document.write('tinyMCE.init({ \n');
winId.document.write('elements : "content",\n');
winId.document.write('theme : "advanced",\n');
winId.document.write('readonly : true,\n');
winId.document.write('mode : "exact",\n');
winId.document.write('theme : "advanced",\n');
winId.document.write('readonly : true,\n');
winId.document.write('setup : function(ed) {\n');
winId.document.write('ed.onInit.add(function() {\n');
winId.document.write('tinyMCE.activeEditor.execCommand("mceToggleVisualAid");\n');
winId.document.write('});\n');
winId.document.write('}\n');
winId.document.write('});}</script>\n');
window.setTimeout(function () {/*using setTimeout to wait for the JS source file to load*/
winId.document.write('</head><body onload="inittextarea()">\n');
winId.document.write(' \n');
var hiddenFrameHTML = document.getElementById("HiddenFrame").innerHTML;
hiddenFrameHTML = hiddenFrameHTML.replace(/&/gi, "&");
hiddenFrameHTML = hiddenFrameHTML.replace(/</gi, "<");
hiddenFrameHTML = hiddenFrameHTML.replace(/>/gi, ">");
winId.document.write(hiddenFrameHTML);
winId.document.write('<textarea id="content" rows="10" style="width:100%">\n');
winId.document.write(document.getElementById(top.document.forms[0].id + ":supportStuff").innerHTML);
winId.document.write('</textArea>\n');
var hiddenFrameHTML2 = document.getElementById("HiddenFrame2").innerHTML;
hiddenFrameHTML2 = hiddenFrameHTML2.replace(/&/gi, "&");
hiddenFrameHTML2 = hiddenFrameHTML2.replace(/</gi, "<");
hiddenFrameHTML2 = hiddenFrameHTML2.replace(/>/gi, ">");
winId.document.write(hiddenFrameHTML2);
winId.document.write('</body></html>\n');
winId.document.close();
}, 300);
}
Additional Information:
Screen shot of the page
Rendered HTML
Original JSPF
please help me with this one.

Why are you using actual DOM functions to add the <script> tag that includes tinymce.js but everything else is using document.write?
I think that's also where your problem lies, as <head> is within <html>, which is not yet closed where you want to append said <script> tag.
Otherwise, you could use the existing <script> tag in the popup to add the code that includes the required external javascript file. If that makes any sense.
So, basically I'm saying, try it the same way as everything else is in your script, using document.write.
(quick addition) I'm not saying this is the 'best' way to do this, I would recommend creating an actual page instead of dynamically creating one in the popup. But in this scenario, I think what I wrote earlier might solve the problem you are having.