Inspired by Greg Stager’s great new JavaScript Idea Series, I thought I too might share some js goodies that I picked up over the years. Mind the term – ‘Picked Up’, because that’d mostly be stuff I didn’t figure out myself but found somewhere, and at best developed further to fit my needs. For this one, all credits go to TLCMediaDesign for pointing me into the right direction with his comment on this forum post here.

Think about creating a tabbed interaction, where the tab headers are stacked and slightly overlap. Clicking it should not only display the corresponding page below (easy enough to do with states), but also bring that tab header to the front (not so easy with states). Or think about an interaction where the learner would have to find things in a cluster of other items; maybe partly hidden by other stuff. Clicking them pops them to the foreground – mission accomplished.

Captivate provides no way of dynamically changing a slide’s stacking order. It’s hardcoded and basically defined by the order of objects in the timeline.
However, one can alter that by changing the zIndex of one of the Captivate object’s html elements via JavaScript.

There’s three html elements for each Captivate object. If your Captivate object is labelled ‘MyObject’, it will be represented by those three DOM elements:

• ‘MyObject’
• ‘MyObjectc’
• ‘re-myObjectc’

It’s the bottom one of those three above, the so called ‘rewrap’ element that seems to be relevant for the decision where our Captivate object ends up in the stacking order. If we change it’s zIndex style property with JavaScript, we can move our Captivate object up or down in the stacking order. The syntax to change the zIndex is:

document.getElementById(“re-MyObjectc”).style.zIndex = 2000;

The higher the number at the end of this line of code, the more the element comes to the foreground. A zIndex of 0 would be furthest back. With a zIndex of 2000 as shown in the line of code above,’MyObject’ would most probably be moved to the very top of the stack, since it would be quite unlikely that there are more that 2000 objects on our Captivate slide, so nothing else will have a zIndex value higher than that.

Review a demo here.

Clicking one of the square shapes on the left brings that very shape to the foreground and sends the others back to their original place in the stacking order. It also tabs through the content displayed on the right side of the slide, which is basically the text from this blog post (navigate through it from top/light-blue to bottom/red in turn to review everything in the correct order).

The square shapes are labelled ‘LightBlue’, ‘DarkBlue’, ‘BlueGreen’, ‘Green’, ‘Yellow’ and ‘Red’, so their rewrap elements ids are:

• re-LightBluec
• re-DarkBluec
• re-BlueGreenc
• re-Greenc
• re-Yellowc
• re-Redc

Ran on slide entry, this code records the original zIndex values for all six elements and writes them to variables:

var zLightBlue = document.getElementById(“re-LightBluec”).style.zIndex;
var zDarkBlue = document.getElementById(“re-DarkBluec”).style.zIndex;
var zBlueGreen = document.getElementById(“re-BlueGreenc”).style.zIndex;
var zGreen = document.getElementById(“re-Greenc”).style.zIndex;
var zYellow = document.getElementById(“re-Yellowc”).style.zIndex;
var zRed = document.getElementById(“re-Redc”).style.zIndex;

Every square is a SmartShape ‘used as Button’ with a JavaScript click action that first restores the original stacking order (by retrieving the zIndex values from the variables saved on slide enter) and then moves the clicked square to the foreground by changing it’s rewrap element’s zIndex to 2000 (shown below for the ‘Red’ object):

document.getElementById(“re-LightBluec”).style.zIndex = zLightBlue;
document.getElementById(“re-DarkBluec”).style.zIndex = zDarkBlue;
document.getElementById(“re-BlueGreenc”).style.zIndex = zBlueGreen;
document.getElementById(“re-Greenc”).style.zIndex = zGreen;
document.getElementById(“re-Yellowc”).style.zIndex = zYellow;
document.getElementById(“re-Redc”).style.zIndex=2000;

The action also changes the state of the shape on the right (object label: ‘Description’) to display the appropriate section of the description:

cp.changeState(“Description”,”[State name]”);

The names of custom states invoked on the ‘Description’ object are ‘LightBlue’, ‘DarkBlue’, BlueGreen’, ‘Green’, ‘Yellow’ and ‘Red’, corresponding to the square shapes’ object labels, as they are selected.

Here’s the catch:
This only works as expected as long as no alternative object state is invoked for an object that has been moved up or down this way. Switching states pushes the object back to it’s original position in the stacking order. This also includes inbuilt states like Rollover.

Another catch:
In those areas where two objects overlap, a mouse click will always be registered by the elements that was higher up in the stacking order originally. Moving an object above another the way we discussed here does not make it capture a click event in the overlapping area. Maybe mouse events are captured by one of the other two elements: ‘MyObject’ or ‘MyObjectc’, for which we didn’t change the zIndex value. To be investigated.