Develop Reference

jQuery Before (and other DOM manipulations) Not Executing in Internet Explorer

I've been searching through stackoverflow, jquery, and google for the answer, thinking surely there would be a definitive answer on why I can't get a jquery call to .before() to run in Internet Explorer. It seems to work correctly in Chrome, Firefox, Safari and Opera.
Original Problem
We have a fixed breadcrumb and nav bar at the top of a document. The rest of the document contains many paragraphs enclosed in appropriate <p></p> tags. Before every opening P tag, is an A anchor in the format of <a name='paragraphidentifier'>paragraphidentifier</a>. Typically the format of the pargraph identifier is citational like (1)(b)(a).
Since introducing the nav bar at the top of this page, any external hyperlink to one of these anchors, causes the anchor to appear beneath the toolbar. I found what seems like a reasonable fix by pixelflips.com found here by adding span tags with a class above the anchor.
I used jQuery to accomplish adding the span tags it suggests using the below jQuery code and related CSS:
if(window.location.hash){
var myHash = window.location.hash;
var hashName = myHash.substring(1, myHash.length);
$("a[name=" + hashName +"]").before("<span class='anchorfix' id='" + hashName + "'></span>");
// I have also tried .prepend and .replaceWith
}
.anchorfix{
display: block;
height: 12px; /*same height as header*/
margin-top: -12px; /*same height as header*/
visibility: hidden;
}
I have additionally tried the below jQuery code to no success either.
$("a").each(function(index, element) {
var aName = $(this).attr('name');
var aHtml = $(this).html();
if(aName) $(this).replaceWith("<span class='anchorfix' id='" + aName + "'></span><a name='" + aHtml + "' />" + aHtml);
I have a demo using lipsum text on jsfiddle found here. If you test in Chrome, it works. If you test in IE, it never adds the span tag.
UPDATE
I have updated my code above to reflect .before() instead of .prepend(). ".before()" was what I originally tried with no success and began trying other functions.
I'm not able to post images or add another link to show a screenshot, I'll put this in as plaintext URL for now which I hope is acceptable to demonstrate the problem. https://www.dropbox.com/s/8jqf0l93n4tv8kf/Screenshot%202015-04-23%2006.32.18.png?dl=0
Any guidance or pointers someone can provide on why this executes correctly in Chrome but not IE (I've tested IE8 and IE11 with no success), would be greatly appreciated. Thank you. -Eric

I believe this is what you're trying to do:
$(document).ready(function (e) {
$("a[name]").each(function() { // only selects tags with a name attribute
var aName = $(this).attr('name');
// .prepend() adds inside the element, .before() adds outside of it
$(this).before("<span class='anchorfix' id='" + aName + "'></span>");
});
});
http://jsfiddle.net/mp2z7hhu/

How to insert content at cursor?

I have a page where a user can edit the contents of an email that is sent out (the template).
Here is a look at what my page is like:
The Code:
<a name="tag" data-toggle="tooltip" tag="<<SubmitterFirst>>" title="The first name of the employee submitting the nomination"><<SubmitterFirst>></a>
...
$('[name=tag]').click(function(){
var caretPos = document.getElementById("templateContent").selectionStart,
currentTemplate = $('#templateContent').val(),
theTag = $(this).attr('tag');
$("#templateContent").empty().val(currentTemplate.substring(0, caretPos) + theTag + currentTemplate.substring(caretPos));
$("#templateContent").focus();
});
This seems to work fine in firefox with the adding of the tag at the cursor but when I do it in IE, it duplicates the whole template at the position.
I think the issue is happening here where its putting the content of the template back after adding the tag:
+ theTag + currentTemplate.substring(caretPos)
Any suggestions of how I can get this to work in IE or another suggestion?
See this jsFiddle for an example:
http://jsfiddle.net/cTzzs/
I have also tried the suggestions from the similar question here Inserting a text where cursor is using Javascript/jquery but none of them worked in IE8.
Here is an updated fiddle of another attempt. Works in FF but not IE8;
http://jsfiddle.net/qBWn7/
In ie8, it places the tag anywhere within the textarea, not where the cursor is.
UPDATE
This question solved my answer: Inserting text after cursor position in text areа which links to the jsfiddle of http://jsfiddle.net/rmDzu/2/

How can I programmatically copy all of the style attributes from one DOM element to another

I have a page with two frames, and I need to (via javascript) copy an element and all of its nested elements (it's a ul/li tree) and most importantly it's style from one frame to the other.
I get all the content via assigning innerhtml, and I am able to position the new element in the second frame with dest.style.left and dest.style.top and it works.
But I'm trying to get all the style information and nothing's happening.
I'm using getComputedStyle to get the final style for each source element as I loop through each node then and assigning them to the same position in the destination nodelist and nothing happens to visually change the style.
What am I missing?

With getComputedStyle, you can get the cssText property which will fetch the entire computed style in a CSS string:
var completeStyle = window.getComputedStyle(element1, null).cssText;
element2.style.cssText = completeStyle;
Unfortunately, getComputedStyle isn't supported by Internet Explorer, which uses currentStyle instead. Doubly unfortunate is the fact that currentStyle returns null for cssText, so the same method cannot be applied to IE. I'll try and figure something out for you, if nobody beats me to it :-)
I thought about it and you could emulate the above in IE using a for...in statement:
var completeStyle = "";
if ("getComputedStyle" in window)
completeStyle = window.getComputedStyle(element1, null).cssText;
else
{
var elStyle = element1.currentStyle;
for (var k in elStyle) { completeStyle += k + ":" + elStyle[k] + ";"; }
}
element2.style.cssText = completeStyle;

Have you tried cloneNode? It can copy the element and all of its children in one fell swoop.
http://www.w3schools.com/dom/met_element_clonenode.asp

Well I gave up the original tack of trying to get the [computed] style information out of the source tag, I just never got it to work.
So instead I tried this, and it did work...
First I grabbed the -style- tag from the source frame, then I appendChilded it to the end of the -head- tag of the second frame.
For which this proved useful...
How do you copy an inline style element in IE?
Then I made a few nested div elements, each having an id or style class I needed to inherit so that the hierarchy matched the first frame.
Then I shoved the innerhtml of the source frame's tag that I wanted to copy and then finally appendChilded it to the body of the second frame, and magically, it all worked.
var topd = doc.createElement('div'); // make a div that we can attach all our styles to so they'll be inherited
topd.id = 'menuanchorelement';
// shove our desired tag in the middle of a few nested elements that have all the classes we need to inherit...
topd.innerHTML = "<div id='multi-level'><ul class='menu'>" + dh.innerHTML + "</ul></div>";
doc.body.appendChild(topd); // voila

document.getElementById().innerHTML fails with 'Unknown Error' in IE

I'm trying to use document.getElementById().innerHTML in a JavaScript to change information in a webpage. On FireFox this works as described in the W3C documentation, however, the same method returns 'Unknown Error' in IE. The JavaScript looks like this:
function Change_Info (ID, ROW, VALUE)
{
if (document.getElementById)
{
var ntext = "<td width=4\% bgcolor=#FFFFFF> </td><td width=92\% bgcolor=#FFFFFF colspan=2><font face=Arial size=2 color=#5578C4>" + VALUE + "</font></td><td width=4\% bgcolor=#FFFFFF><center>&nbsp</center></td>";
document.getElementById( ID + "-" + ROW).innerHTML = ntext;
return false;
}
}
The script is called by a MouseOver event like this:
onmouseover='Change_Info("thetag","1","Some Info");
The script would combine ID with a - and then ROW, which, in this example would be, thetag-1. The exact tag does exist in the html document. Using getElementById with the hardcoded tag name, reveils the same error, and the variable method is the prefered one in this situation.
To questions regarding why full html table information is in ntext, for whatever reason nested ID's fail on both FireFox and IE, even though the W3C specification states it should work (obviously both browsers have not fully implimented the W3C specs as persceribed). If someone knows of the way to access and change nested ID's, that works in both FireFox and IE, I'd sure like to know it.
Additionally, as yet I'm only getting this 'Unknown Error' in IE when using innerHTML to change the information. Reading works without error.
Can someone point out where my scripting error is so that I can swap text 'messages' on mouseover events.

IE does not let you add.alter table rows that way. You will need to use DOM Methods removeChild, appendChild, and createElement OR insertRow and insertCell

"Additionally, as yet I'm only getting this 'Unknown Error' in IE when using innerHTML to change the information. Reading works without error."
I faced the same problem and used the following:
var newdiv = document.createElement("div");
newdiv.innerHTML = "new content";
var container = document.getElementById("container");
container.removeChild( container.firstChild );
container.appendChild(newdiv);
http://domscripting.com/blog/display/99

as for getting rid with the ntext, you could do something like
document.getElementById(ID+'-'+ROW).getElementsByTagName('font')[0].innerHTML = VALUE;
If it's the getElementById part that's not working, you'll still be out of luck, though. Try:
var test = document.getElementById(ID+'-'+ROW);
alert(test);
To find out if the object is even found, as to figure out whether you're getting an error because you're trying to access innerHTML on a null error, or if it's actually setting innerHTML that doesn't work. The latter seems probable to me, in which case the proposed solution might help.

Please give jQuery a chance. It very nicely abstracts the browser idiosyncrasies. download latest jquery from jQuery Site and following will suffice:
<script type="text/javascript" src="path/to/jquery"></script>
<script type="text/javascript">
function Change_Info (ID, ROW, VALUE)
{
if (document.getElementById)
{
var ntext = "<td width=4\% bgcolor=#FFFFFF> </td><td width=92\%
bgcolor=#FFFFFF colspan=2><font face=Arial size=2 color=#5578C4>"+ VALUE+
"</font></td><td width=4\% bgcolor=#FFFFFF><center>&nbsp</center></td>";
$("#" + ID + "-" + ROW).html(ntext);
return false;
}
</script>
<script type="text/javascript">
$(document).ready(function(){
$("# ID OF YOUR ELEMENT").mouseover(function(){
Change_Info("thetag","1","Some Info");
});
});
</script>

YUI Editor (RTE): Insert HTML element and place cursor inside

I have a problem. I've been trying to tackle it for a while now and I'm ready to explode. Here's my requirement:
I have an external toolbar (not part of YUI) above the editor that I want to use to insert HTML tags. The user should be able to click a link on the toolbar after which a few things may happen:
If there's any selected text, this text gets wrapped into an HTML tag
If there's no selected text, an empty HTML tag is inserted in the editor
Regardless of the scenario, cursor MUST be placed inside the new element, so that when the user enters more text, it resides in the new element
The functionality is very similar to that of pressing "B" or "U" buttons on the editor's toolbar (now that I'm using this editor, it also does it well :-)). It preserves everything nicely. So far I'm able to do 1 or 2, but not 3. Step 3 is VERY important, because without it, user experience greatly suffers. I really need your assistance to implement it. Below is a simplified version of the method that performs the insertion (just inserting DIV for the sake of simplicity). this._oEditor - local instance of YUI Editor:
this._insertElement = function() {
var sSelection = this._oEditor._getSelection(); // Attempt to get selected text from the editor
if (sSelection == '') sSelection = ' '; // If nothing was selected, insert a non-breaking space
var sNewElt = '<div>' + sSelection + '</div>';
this._oEditor.execCommand('inserthtml', sNewElt);
this._oEditor.focus(); // This gives the editor focus, but places cursor in the beginning!
}
What is it that I must do to place the cursor in the right position? Is it even possible? Also, if there's a better way of implementing this, I'm all for it. Thank you!

Here's complete the solution:
this._insertElement = function() {
var sSelection = this._oEditor._getSelection();
if (sSelection == '') sSelection = ' ';
var sNewElt = '<div>' + sSelection + '</div>';
this._oEditor.execCommand('inserthtml', sNewElt);
var pos = 1000; //pos determines where to place the cursor. if greater than the length of characters, it will place at the end.
if(this._oEditor.createTextRange) { //IE Specific code
var range = this._oEditor.createTextRange();
range.move("character", pos);
range.select();
} else if(this._oEditor.selectionStart) { //Works with Firefox and other browsers
this._oEditor.focus();
this._oEditor.setSelectionRange(pos, pos);
}
this._oEditor.focus();
}

Placing the cursor requires different methods for different browsers. With IE you'll want to create a TextRange object, in Mozilla you can make use of window.find() or a Selection object, webkit/safari/chrome require yet another method.