Inspired by Greg Stager’s great new JavaScript Idea Series, I thought I might as well 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 (easily 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 to dynamically change the stacking order. It’s basically defined by the order of objects in the timeline. However, one can alter that by changing zIndex of one of the Captivate object’s html element 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 last one, 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 property, 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, the more the element comes to the foreground. X-Index 0 would be furthest back. I picked 2000 here just because it’s unlikely that there are more that 2000 objects on the slide and nothing will have a z-index higher than that.
Check out this demo here:
Clicking a square brings that to the foreground and sends the others back to their original place in the stacking order. The squares are labelled:
LightBlue
DarkBlue
BlueGreen
Green
Yellow
Red
So there rewarp 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 sends all other objects back to their original position (retrieved 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 (here 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;
Here’s the catch: this only works as expected as long as no alternative object state is evoked 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: When it comes to the 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.
The post Dynamically change Stacking Order appeared first on eLearning.
This post describes how to bring objects to the front / push them back in the stacking order by the push of a mouse button.
The post Dynamically change Stacking Order appeared first on eLearning.Read MoreBlog, Execute Javascript, Interactive eLearning, JavaScript