Topics
Members
Website
Knowledge Base
New Topic
Archived

Help with styling TOC

@npowell9105

April 1, 2016 12:00 AM

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("button15676undefinedtoc18809undefined
c[0].style.border ="0undefined
}

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…

undefined

Cheers,

Nick

exportToHTML.jpgpreviewInBrowser.jpg

Discussion (5)

@timk April 1, 2016 12:00 AM

Did you check "Frameless" in the tocs' properties? The TOC is set up differently if it's checked. The iframe is only a child of the div if it's unchecked. While it's checked the toc is made up as a table in the div. The iframe itself exists but is not inside the div.

I'm attaching my test version of a toc moving into view by click on a button. It was working for me in all browsers, Chrome works online only.

Tim

@ssneg April 1, 2016 12:00 AM

I'd be happy to take a close look. Can you share a one-page demo of this effect?

@npowell9105 Author April 1, 2016 12:00 AM

Thanks a bunch for the speedy replies, gang. I'm coming back in here with my tail between my legs... so after an entire couple of days trying to figure this out. I finally gave up on it and uploaded it to an LMS... guess what? It worked.... omg. Why I didn't think to upload it to test, is beyond me! Stared at it too long maybe! lol

Sorry I forgot to add what browser I have been testing with... it is Internet Explorer 11 (say no more!). Why the JS wouldn't run locally is a mystery to me, maybe you gurus out there can shed some light on that!?

I guess maybe on the bright side of all this, if anyone wants to get rid of the border on their TOC's, they can use the code above!

undefined

Cheers everyone,

Nick. :)

@mnotermans5114 April 1, 2016 12:00 AM

First thing to check.. what browser you are previewing inside Lectora, and what browser you use to view the final content.

undefined

@mnotermans5114 April 1, 2016 12:00 AM

IE11 uses a somewhat restricted mode when viewing it locally.

https://blogs.msdn.microsoft.com/ieinternals/2012/06/19/enhanced-protected-mode-and-local-files/

Normally you should see the bar with 'Internet Explorer restricted this webpage from running scripts or ActiveX Controls - Allow blocked content' locally.

Discussions have been disabled for this post

Join The Discussion

Signup or login to get started!