Hey,
I was wondering if there is a way, or a plugin, to help change the z-index after the click of a button?
My example is that I want to be able to have an uploaded picture with a transparent element. Then a user uploads a photo on top of it and that on save, the orders are flipped?
Any help would be great!
I don’t sure what you exactly want but you can display a default picture before user uploads one. That seems the easier way for me.
Hey,
Thanks for the reply. That actually helps me out with another problem… when I have tried to set a default image (I use the static image) but then can’t seem to have a dynamic image as well.
For the issue that I was actually creating this topic for. I don’t want to replace one with another, I will be wanting to keep them both, just have one below the other as the image on the software will have a transparent element in it. So users will upload their image on the top and then it will swap orders so the transparent element is on top. Though I want to try and find a way to automatically change the z-index,
This can be done easily with CSS – you can look at the Classify plugin by @julienallard1 to assign your bubble element to a class (🔥 Classify 4: A tiny plugin that brings CSS classes and +)
The code would look something like Z-index: -1; for the image on the bottom, and Z-index: 0; for the image on top. You could also look into css documentation to do more with it.
You can do it with a little JavaScript.
Give your bubble element an attribute ID, for example my_element
Then using the “Run Javascript” action you can do
document.getElementById('my_element').style.zIndex = 10;
That just sets the z-index to 10 but you can change that to any number.
You can add an hidden element on image and as soon as the user uploaded an image a condition makes this element visible. So that no needed to play with the css.
This topic was automatically closed after 70 days. New replies are no longer allowed.
