Changing z-order of g containers

[rbrodt]

Is there a way of changing the z-order of a container from JavaScript? I have an analog watch where the hour and minute hands have different axes of rotation, i.e. the minute hand is shifted horizontally to the right of the hour hand like this:

I'm using the watch API and I have the clock hand images defined in index.gui. I would like to have the minute hand appear ABOVE the hour hand when minute>30 and BELOW the hour hand when minute<30. The only way I can think of doing this is to rearrange the DOM elements for the clock hand containers. I have tried changing the container.zIndex values for both, but no luck. Can someone suggest a way to do this?

Thanks!

Bob

[Gondwana · Accepted solution]

I don't know about changing z-order, but you could create two instances of one of the hands in different z-order positions and show/hide them as appropriate.

I'm surprised that this image doesn't contravene IP rights! I guess the original work is now out of copyright.

[rbrodt]

Thanks for the tip - I hadn't thought of that.

BTW, I do not have any plans on publishing or distributing this watch face to anyone - it's for my own edification only 🙂

[JonFitbit]

https://dev.fitbit.com/build/guides/user-interface/javascript/#layer-stacking-order-z-index-

[rbrodt]

Thanks JonFitbit - guess I missed that part of the documentation.