Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Javascript document.contains not working on IE11

I'm working on a Business Catalyst site (Adobe). I need to insert a placeholder div after each row of items which another script later appends info to. This is working fine on most browsers but does nothing on IE 11.

The script looks for the last item in a row to insertAfter, ie. rows contain 4 items but if the last row only has 1 or 2 it inserts it after the last one.

I was using Jquery 1.1 but just switched to 1.7 and it seems to make no difference.

My markup:

<div class="roller col-md-3" id="roller001">
<div class="roller-type">
<div class="roller-image">
{tag_small image_nolink}
</div>
<a class="roller-btn" onclick="appendRoller{tag_itemid}('{tag_itemid}')" href="javascript:void(0);">{tag_name_nolink}</a>
</div>
</div>

<div class="roller col-md-3" id="roller002">
<div class="roller-type">
<div class="roller-image">
{tag_small image_nolink}
</div>
<a class="roller-btn" onclick="appendRoller{tag_itemid}('{tag_itemid}')" href="javascript:void(0);">{tag_name_nolink}</a>
</div>
</div>

Script:

<script type="text/javascript">
$(document).ready(function(){
var rollerItems = document.getElementsByClassName('roller');

    for (n=0; n<rollerItems.length; n++) {
        if(n%4 == 0) {
            var rowEnd = rollerItems[n];            
            if(document.contains(rollerItems[n+1])) { rowEnd = rollerItems[n+1]; }
            if(document.contains(rollerItems[n+2])) { rowEnd = rollerItems[n+2]; }
            if(document.contains(rollerItems[n+3])) { rowEnd = rollerItems[n+3]; }
            $('<div class="popup-row"></div>').insertAfter(rowEnd);
            }
        }

});
</script>
like image 694
A.Fellows WVC Avatar asked Jul 26 '16 06:07

A.Fellows WVC


1 Answers

I've realised the problem was not with the 'insertAfter' command at all but with 'document.contains'. Apparently IE does not regard 'document' as a node and I needed to use 'document.body.contains' to determine items at the end of the row.

Eg.

if(document.body.contains(rollerItems[n+1])) { rowEnd = rollerItems[n+1]; }

Went through everything line by line but glossed over that! Not sure if this is the best solution but it works now at least.

like image 63
A.Fellows WVC Avatar answered Oct 23 '22 06:10

A.Fellows WVC