Garden Gnome Software

Hello all
Is there any way to change the Z-index of an item on the click event of a button?
Many thanks
Paul

Anyone have any comments?

Hi Paul,

Yes you can change the Z-Index of an element using a mouse click, Go to URL and Javascript.

https://p2vrlittlebits.s3-ap-southeast- ... index.html

In this example I have two coloured rectangles, a blue one, named 'blue' and a pink one, named 'pink'. The blue one has a Z-Index of 1 and the pink one has a Z-Index of 2.

I also have two text buttons, one 'Blue to the Front', named 'blue front', and one 'Blue to the Back', named 'blue back'. The 'Front' button changes the Z-Index of the blue rectangle to 3, hides itself and shows the 'Back' button. The 'Back' button changes the Z-Index of the blue rectangle to 0, hides itself and shows the 'Front' button.

The Actions for the 'Front' button are;

1. Source = Mouse Click | Action = Go to URL | URL = javascript: skin._blue.style.zIndex = "3";
2. Source = Mouse Click | Action = Visibility | Type = Hide Element | Target = _self
3. Source = Mouse Click | Action = Visibility | Type = Show Element | Target = blue back

The Actions for the 'Back' button are;

1. Source = Mouse Click | Action = Go to URL | URL = javascript: skin._blue.style.zIndex = "0";
2. Source = Mouse Click | Action = Visibility | Type = Hide Element | Target = _self
3. Source = Mouse Click | Action = Visibility | Type = Show Element | Target = blue front

cheers,

Tony

Hi Tony
That’s great thank you. Think it’s just what I’m looking for.
Developing an animated carousel type of navigation system so I’m keen to get the Z index sorted for a smooth transition.

Thanks again.

Paul

Hi Paul,

Glad it helped. I'd like to see your finished animated carousel when you are done.

Tony

Hi Tony
When it’s all done I’ll pm you a link.

Paul.