WebHelp: JavaScript DOM problems in IE8

FrankyT · Post by **FrankyT** » Thu Apr 12, 2012 3:52 am

I've written some JavaScript that inserts an extra table cell after the logo in the Toolbar frame of WebHelp output. This extra cell contains an H1 heading, which is the title of the Help.

The code works fine in Firefox and Chrome, but won't run in IE8. Here it is:

Code: Select all

function addHeading() {

        // New snippet for page heading.

    pageTitleTableCell = document.createElement("TD");
    h1Title = document.createElement("H1");
    pageTitleTableCell.appendChild(h1Title);
    h1Title.setAttribute("style", "font-family : Calibri,Verdana,Geneva,Arial,Helvetica,sans-serif; font-size : 21px; font-weight : normal; color : #FFFFFF; margin-left : 140px; margin-top : 20px");
    h1Title.appendChild(document.createTextNode(window.top.document.title));

        // Find the logo image, and insert the heading snippet after it.

    toolbar = window.top.frames[0].document;                           // Find the toolbar frame.
    logoTableCell = toolbar.getElementById("logoIcon");               // Find the table cell that contains the logo. 
    test = toolbar.getElementById("ToolbarButtons");                  // Test with a higher-level object: see explanation below.
    alert(test.id);                                                     // Check if the test worked. (It does - see below.)
    alert(logoTableCell.id);        // Check if the logo table cell has been found and assigned to logoTableCell
                                   //     (works in FF and Chrome; IE8's debugger says "Object required").
    logoTableCell.parentNode.appendChild(pageTitleTableCell);          // Insert the heading snippet created earlier.
                                                                    // (Works in FF and Chrome, not in IE8.)
}

window.onload = addHeading();

What should happen is that the table cell containing the logo gets assigned to logoTableCell. This occurs in FF and Chrome, but not in IE.

As you can see, I inserted a temporary alert box to see what's going on: alert(logoTableCell.id); In FF and Chrome, the alert box correctly displays the id attribute of the table cell. In IE, the alert box does not appear, and the script stops running. When I look in IE's debugger, I see the error message "Object required". (I've tried stepping through the script in IE's debugger but the step buttons are greyed out

)

When I looked at the toolbar frame's source in IE, I noticed that the toolbar buttons are not present in the page when it loads. Evidently they are loaded by MadCap's JavaScript subsequently:

Code: Select all

    <body>
        <table style="height: 28px;">
            <tr>
                <td id="ToolbarButtons">
                    <!-- Toolbar buttons and logo are inserted here -->
                </td>
            </tr>
        </table>
    </body>

It would appear that IE doesn't run my script over the final toolbar, but over the empty toolbar, before the buttons and logo have been added by Flare's hard-coded JavaScript. Hence, it doesn't find the logo.

To test this, I added an assignment for the table cell that contains the entire toolbar, called ToolbarButtons; this cell is in the initial HTML as soon as the frame loads:

test = toolbar.getElementById("ToolbarButtons");

Sure enough, this assignment works: the temporary alert box I added to check it displays the id of the table cell as expected.

Has anyone else come across this issue? How do I get IE to run my script over the final toolbar, rather than the initial empty one? And why does it behave differently from other browsers?

Thanks for any advice - this is doing my head in

i-tietz · Post by **i-tietz** » Fri Apr 13, 2012 2:31 am

You could try not to put the h1 into a td, but simply set the h1 to float: right ... maybe you're lucky and the rest of the content is inserted left of the h1 ...

FrankyT wrote:And why does it behave differently from other browsers?

Because it's a different browser, a different version, a different build. Welcome to the wonderful world of creating websites!

FrankyT · Post by **FrankyT** » Fri Apr 13, 2012 9:34 am

I solved - or rather avoided - this problem by putting the JavaScript in the Topic Toolbar, rather than the WebHelp Toolbar.

The Topic Toolbar loads after IE has created the buttons on the WebHelp Toolbar. Therefore, its JavaScript has something to work with. (Evidently, Firefox and Chrome process the toolbar frame's entire DOM before running the toolbar's JavaScript, so do not throw up errors - although I think IE is doing things the correct way, running the script as it loads it.)

Incidentally, there was another problem with my code. This -

Code: Select all

window.onload = addHeading();

- should just be

Code: Select all

addHeading();

No assignment to window.onload is required: the code runs automatically when the page is loaded anyway. In fact, the syntax of the assignment was incorrect: addHeading wasn't being assigned but being called. The value of window.onload was thus the return value of addHeading - in this case, nothing. Consequently, an error alert appeared in IE8 (not in FF or Chrome for some reason).

MadCap Software Forums

WebHelp: JavaScript DOM problems in IE8

WebHelp: JavaScript DOM problems in IE8

Re: WebHelp: JavaScript DOM problems in IE8

Re: WebHelp: JavaScript DOM problems in IE8