There’s an issue with the alignment of the checkmark icon for visited table of contents (TOC) entries in the HTML5 output from Captivate 9. The problem occurs when entries are grouped and the “Collapse All” TOC runtime option is enabled. This post provides more information and a workaround to fix the alignment.

Problem

The screenshot shows a demo project (started with all default settings) with TOC enabled, two TOC entries grouped, and the “Collapse All” runtime option enabled in the TOC settings. If the group is expanded and the slides are visited then then checkmark icons for the grouped entries appear offset upwards by 20px. In this example the visual difference is minor. But with different themes or other customization there can be much more of a problem. Workarounds such as not grouping TOC entries or not enabling the “Collapse All” runtime option may work for some applications, but are not ideal.

Root cause

The top margin for each checkmark icon is set to half the difference between the height of the tocEntryContainer div and the height of the icon image div. This calculation is set up at runtime when each TOC element is added to the page, but the expression isn’t evaluated until the onload event of the image div. The problem is that collapsed entries have a height of 0px by then. So the calculation of ((40px –  17px)/2)=11.5px becomes ((0px – 17px)/2)=(-8.5px). The top margin attribute will be offset by -0.5 times the height of the tocEntryContainer div.

Solution

One solution is to determine the height of the tocEntryContainer div while setting up the calculation (before it’s collapsed). The value can be stored and used instead of the current height when the expression is evaluated. This way the expression returns the correct value for the icon’s top margin attribute, even if the entry is collapsed.

1. Publish the project with HTML5 output enabled
2. Find the CPM.js file

Open the published HTML5 output, open the assets folder, open the js folder, and open CPM.js using a text editor.

3. Find this section of code (You can search for “createVisited:” )

createVisited:function(a){var b=cp.newElem("img");a.appendChild(b);b.onload=function(){b.style.marginTop=(parseFloat(window.getComputedStyle(a).height.replace("px",""))-b.getBoundingClientRect().height)/2+"px";b.style.marginLeft=parseFloat(window.getComputedStyle(a).width.replace("px",""))-cp.toc.tocRightMargin-cp.toc.scrollBarWidth-b.getBoundingClientRect().width+"px"};b.src=cp.toc.loadedAssetArr.visited.src;this.visitedDiv=b;cp.toc.tocPersistanceManager.getVisited(this)||
(b.style.visibility="hidden")},

4. Replace with this modified code

createVisited:function(a){var b=cp.newElem("img");a.appendChild(b);var c=parseFloat(window.getComputedStyle(a).height.replace("px",""));b.onload=function(){b.style.marginTop=(c-b.getBoundingClientRect().height)/2+"px";b.style.marginLeft=parseFloat(window.getComputedStyle(a).width.replace("px",""))-cp.toc.tocRightMargin-cp.toc.scrollBarWidth-b.getBoundingClientRect().width+"px"};b.src=cp.toc.loadedAssetArr.visited.src;this.visitedDiv=b;cp.toc.tocPersistanceManager.getVisited(this)||
(b.style.visibility="hidden")},

The modification defines a variable c to store the height of element a (the parent tocEntryContainer div) returned by the getComputedStyle method, and then calculates marginTop using the value of c rather than by calling the getComputedStyle method.

5. Save the modified CPM.js file

You will need to modify the CPM.js file each time you publish the project. Luckily this issue only affects the appearance of the TOC, so the fix isn’t necessary when the project is published for testing purposes.

Hopefully this guide will help anyone else stuck in the same situation!

(Tested with Captivate 9.0.2.437)

The problem was also encountered by:
rchil (TOC checkmark alignment)
en6geh77 (Table of Contents Tick/Check is not properply aligned)