Captivate 9: TOC opening from bottom to top?

[Contentbee]

The standard options to open a TOC offer it sliding from the left or sliding from the right. My customer wants the TOC sliding from the bottom! Because that´s where the button is placed which opens/closes the TOC. I tried with a custom button and "no playbar" settings - which works fine except the sliding effect Maybe there´s an opportunity to solve it with advanced actions or javascript? We´re going to publish a HTML5 only.

[TLCMediaDesign]

You can do it with a little JavaScript.

You would need to use a custom TOC button. To show the TOC execute this JavaScript:

var myTOC = document.getElementById("toc");

1. myTOC.style.top =  cp.model.data.project.h + 50 + 'px';
2. myTOC.style.left = 0 + "px";                                                       

$("#toc").animate({top: 0}, 1000);

to Hide execute JavaScript::

var myTOC = document.getElementById("toc");                                                              

$("#toc").animate({top: cp.model.data.project.h  + 50 }, 1000);

[Contentbee]

Thanks, TLC! I would have never encountered this ... to be honest I´m less than a newbie at JavaScript

But what a pity, this one does not work. Did I do something wrong?? At first I´ve created a custom button, applied the advanced action "Show TOC" and everything works fine - the TOC showing from the left as I checked in the TOC settings. Then I tried to use the advanced action "Execute Javascript" instead of "Show TOC" as you suggested, inserting your code into the script window, but nothing´s happening at all! I´m sure I missed something ...

Can I use the standard TOC or do I have to design an group of custom object which is named ""toc"?

Could you please give me another hint? Thanks!

[TLCMediaDesign]

When I tested it I created two buttons and just executed the scripts with simple actions. Then I turned it into an external function that toggles. They both worked fine. I did not use any Captivate commands. The TOC was set to overlay. Can you put in an alert to make sure the TOC is found?

[Contentbee]

I´m not quite sute what you mean with "put in an alert to make sure the TOC is found" ... The TOC ist set to overlay and shows perfectly when I use the small button in the upper left corner (this one comes automatically). An additional button using a single action "Show TOC" works fine as well. But not the button with the Javascript ...

I even tried to make a function form the script. But please take a look here at my settings for the advanced action:

Maybe the place where this should happen is wrong? I can select between "new/parent/this/top" - here it´s set to "this" ("Aktuell")

[TLCMediaDesign · Accepted solution]

I just noticed that this forum changed some of the script to bullets! Use this for the open:

var myTOC = document.getElementById("toc");

myTOC.style.top =  cp.model.data.project.h + 50 + 'px';

myTOC.style.left = 0 + "px";                                                       

$("#toc").animate({top: 0}, 1000);

[Contentbee]

That´s just PER-FECT (and a proof of my lack of knowledge when it comes to scripts ...)

Do you have any further information for me about any things I can change/adjust in this script, e.g. size, timing, opacity or whatever?

Thanks a lot!

[TLCMediaDesign]

I doubt that you could change the size because of the way the TOC is built.

You could do the same this with the opacity though, although the you may still be able to click on the TOC when it's opacity is 0.

Before any button is clicked you would first need to move the TOC to the position and set the opacity to 0. You would need to use the moduleReady event to ensure the TOC is in the DOM first. Then the jQuery animate would be:

$("#toc").animate({opacity: 1}, 1000);

[Contentbee]

Okay, I´m not quite sure if I understand what you meant, but I know how to change opacity in the standard settings and like to set it to 80%. I thought maybe this opacity was somewhere written in the script as well. Obviously not?

With "changing the size" I meant: the TOC should not open completely until to top, but stops 100px before. So that the headline which is placed on all slides can still be seen and will not be covered with the TOC title.

[TLCMediaDesign]

What I meant was that you can animate most of the CSS properties of an object with jQuery, I used opacity as an example.

If you want to stop the TOC 100px short of the top change this line to:

$("#toc").animate({top: 100}, 1000);

The second parameter (1000) is the duration of the animation in milliseconds.

[Contentbee]

Hi TLC!

This little script works superb - but I failed with reversing the effect. I tried some changes, but none of them worked. Either the TOC just disspears or nothing happens at all. Could you pleas give me another hint?

Thanks!!

[TLCMediaDesign]

What script are you using to open and what script are you using to close?

[Contentbee]

Hi!

For opening I use the same as for closing: "Execute JavaScript" ... applied to two seperate buttons!

When opening I inserted your script:

var myTOC = document.getElementById("toc");

myTOC.style.top =  cp.model.data.project.h + 50 + 'px';

myTOC.style.left = 0 + "px";                                                       

$("#toc").animate({top: 0}, 1000);

For closing I tried the same with different parameters, e.g.:

var myTOC = document.getElementById("toc");

myTOC.style.top =  cp.model.data.project.h + 50 + 'px';

myTOC.style.left = 0 + "px";                                                       

$("#toc").animate({bottom: 0}, 1000);

I changed a lot of other parameters which I thought may have the wanted effect, but I did not find out which part really starts the upward movement and which parts I have to change in which way so get a downward movement. So it would be very helpful - not only for me, but for all followers as well - to know which tiny litte screws one has to draw to get a downward movement, so that this script could be used not only for opening TOCs from bottom to top and close from top to bottom, but also to open from top to bottom and close from bottom to top 🙂

[TLCMediaDesign]

Bottom is not a parameter. You need to use top.

var myTOC = document.getElementById("toc");                                                               

$("#toc").animate({top: cp.model.data.project.h  + 50 }, 1000);

[Contentbee]

Sorry for answering late ... but thanks for your hint to the parameters! That´s just what I needed and what I meant with "any further information for me about any things I can change/adjust in this script" 🙂