Styling TOC with CSS

npowell9105

Hi all,

I'm wondering if anyone else has come across this problem.

I have inserted a TOC into my title and don't want the border as it kills my design. However, using a Frameless TOC has the items running off a background box the TOC is sitting on. (hope that makes sense!).

So, I have added some custom javascript to run at the bottom of the page...

document.getElementById("button15676").onclick=function(){

var c = document.getElementById("toc18809").childNodes;

c[0].style.border ="0";

}

The "button15675" is the Table of Contents button used to move the TOC from offscreen to onscreen.

The toc18809 is the ID for the Div that contains the iFrame for the TOC. The childNodes looks in the div to see what's there. c[0] is the first node which happens to be the iFrame. Obviously the rest is to turn the default border off.

Now to my problem...

When I click the Preview in a browser, this all works just fine. See previewInBrowser.jpg - no border.

When I export the package to HTML, the code no longer works. See exportToHTML.jpg - bevelled border! I've been pulling my hair out for 2 days trying different things but I'm now at a loss...

 

Can anyone help?!

 

Cheers,

Nick

npowell9105

OK, so it turns out, that IE run locally ignores the javascript to remove the iframe border! I uploaded the template to an LMS and low and behold, it worked!! lol

On the bright side, the above code may be helpful to someone looking to style their TOC...

 

 

cwhelan2537

Thank you very much for sharing the result. I was looking to do my TOC on the last course to do the same thing, but could not find anything specific to what I was trying to do. This solves the problem for next time I want to do this.

 

Appreciated.