Question

I use the following code to find hooks in the html, generate links from them, create and populate popups, and then hide the hooks themselves from view. It works fine in FF, Chrome, Safari, IE8 and IE9 – but fails in IE7.

Here is a link to the actual usecase, note there is no unusual CSS at play, the lists are not floated, etc. I am using JQuery 1.7.1 with UI version 1.8.18, with the default packaged CSS for the dialog:

http://databizsolutions.ie/contents/page.php?v=35&u=admin-videos#a

If anyone could point out how I can close off this error, I’d be very grateful.

The original HTML (generated by TinyMCE):

<h3>Title of list</h3>
<ol>
    <li>Call to  action 1</li>
    <ol>
        <li>[popup]path/to/file1.mp4</li>
    </ol>
<li>Call to  action 2</li>
    <ol>
        <li>[popup]path/to/file2.mp4</li>
    </ol>
<li>Call to  action 3</li>
    <ol>
        <li>[popup]path/to/file3.mp4</li>
    </ol>
...

The JQuery:

$(document).ready(function(){

var num = 0;

//Find [popup] instances, increment the number
$("li:contains('[popup]')").each(function() {
    var nextnumber = num++;

    //add a general and a unique class to the list item containing the hook
    $(this).addClass('popup' + ' ' + 'pop' + nextnumber);

    //Split on the hook, and save remainder of text (the path to file) as the 'path' attr
    var splitpath = $(this).text().split("[popup]");
    $(this).attr("path", splitpath[1]); 
    var path = $(this).attr("path");
    //alert($(this).attr("path"));

    //Get the previous list item (the call to action), and give it general and unique classes also.
    $thisArrow = $(this).parent().prev();
    $thisArrow.addClass('arrow' + ' ' + 'arr' + nextnumber);

    //Make the call to action an anchor link, with a general class identifier.
    $thisArrow.wrapInner('<a class="opener" title="Click to view video" path ="' + path + '"/>');

    //hide hooks
    $('li.popup').parent().hide();
});

$('.opener').click(function() {
    var Header = $(this).text();
    var popupURL = $(this).attr("path");
    var popupBG = "../contents/css/images/white-nontrans.jpg";

    var thisDialog = $('<div></div>')
        .html('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="mediaplayer1" name="mediaplayer1" width="550" height="420"><param name="movie" value="../mediaplayer/player.swf"><param name="autostart" value="true"><param name="allowfullscreen" value="true"><param name="allowscriptaccess" value="always"><param name="bgcolor" value="#FFFFFF"><param name="wmode" value="opaque"><param name="flashvars" value="file=' + popupURL + '&image=' + popupBG + '"><embed id="mediaplayer1" name="mediaplayer2" src="../mediaplayer/player.swf" width="550" height="420" allowfullscreen="true" allowscriptaccess="always" autostart="true" bgcolor="#FFFFFF" wmode="opaque" flashvars="file=' + popupURL + '&image=' + popupBG + '" /></object>')

    .dialog({ close: function() { $(this).html(''); },autoOpen: false, title: Header, modal: true, maxHeight: 500, width:580 });
    thisDialog.dialog('open');
    return false;
})
});

Desired result in HTML:

<h3>Title of list</h3>
<ol>
    <li class="arrow arr0">
        <a class="opener" title="Click to view video" path ="path/to/file1.mp4" >
           Call to  action 1
        </a>
    </li>
    <li class="arrow arr1">
        <a class="opener" title="Click to view video" path ="path/to/file2.mp4" >
           Call to  action 2
        </a>
    </li>
    <li class="arrow arr2">
        <a class="opener" title="Click to view video" path ="path/to/file3.mp4" >
           Call to  action 3
        </a>
    </li>
...

In IE7:

<h3 class="arrow arr0 arr2 arr4 arr6 arr8 arr10">Title of list</h3>
<a class="opener" title="Click to view video" path ="path/to/file1.mp4" >
    <a class="opener" title="Click to view video" path ="path/to/file2.mp4" >
        <a class="opener" title="Click to view video" path ="path/to/file3.mp4" >
<ol>
    <li>Call to  action 1</li>
    <ol>
        <li>[popup]path/to/file1.mp4</li>
    </ol>
<li>Call to  action 2</li>
    <ol>
        <li>[popup]path/to/file2.mp4</li>
    </ol>
<li>Call to  action 3</li>
    <ol>
        <li>[popup]path/to/file3.mp4</li>
    </ol>
...

Answer 1

I havent tested this, but I think this is because your HTML is incorrect. ol is not a valid child element of ol, only li. Your html should look like this:

<h3>Title of list</h3>
<ol>
    <li>
        Call to  action 1
        <ol>
            <li>[popup]path/to/file1.mp4</li>
        </ol>
    </li>
    <li>
        Call to  action 2
        <ol>
            <li>[popup]path/to/file2.mp4</li>
        </ol>
    </li>
    <li>
        Call to  action 3
        <ol>
            <li>[popup]path/to/file3.mp4</li>
        </ol>
    </li>
</ol>

IE is very unforgiving of malformed HTML.