CODEWITHSUNDEEP
javascriptjqueryhtmlinternet-explorerdom
Eric
Eric

Reputation: 93

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

Upvotes: 1

Views: 479

Answers (1)

Blazemonger
Blazemonger

Reputation: 92903

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/

Upvotes: 1

Related Questions