I’ve kept as much to your original file as possible but I did name everything.
The major assumption of my demo is that there will be nothing placed over the top of the cell phone screens.
With this in mind I did not bother with a reset for the z-indices of the screens I just kept adding “+1” to an initial value of “100”. So the first reset of the z-index value for a screen would be “101”; the next reset would be “102” and so on. You can change this initial value of course. The ceiling for CSS z-index value is “2147483647” - i.e. the maximum value of a signed 32-bit integer.
The button that triggers the screen change has an ID similar to the screen name plus a prefix of “Btn_”. So “Btn_Screen_3” is designed to trigger screen “Screen_3”.
The reason for this is I wanted to use the slice() method to strip the button name of its first (4) letters “Btn_” which gives us the ID name for the corresponding screen. (You can create some other set-up with slice() - this is just how I worked it here.)
Timelines do the motion graphics, the “changeZindex” function does the z-index manipulation.
Note: In this demo I did not “correct” for a button being triggered twice in a row… the screen resets itself with every click - this behavior is something You may wish to adjust.
Hype Project: Screen_click_JHSv1.hype.zip (634.2 KB) - Demo here.
The function “changeZindex” function:
var whatBtn = element.id;
whatBtn = whatBtn.slice(4);
/*strip off the first 4 characters of btn name ("Btn_")
so we now have the ID of the corresponding screen*/
var whatScreen = hypeDocument.getElementById(whatBtn);
topScreenIndex = topScreenIndex +1; // init value set > "Head HTML"
hypeDocument.setElementProperty(whatScreen, 'z-index', topScreenIndex);