Search the Community
Showing results for tags 'zindex'.
Found 5 results
-
How can I clear z-index from a draggable after releasing it, so that new page elements don't appear beneath the draggable item?
-
Hey everyone! I'm having an issue and I tried to hunt down the solution here to no avail. I think I'm missing a little something and maybe you guys help me past this. Basically it seems like the z-index isn't applying to my animation in Safari correctly. It seems like the z-index doesn't actually get applied until AFTER the animation to that element has completed with GSAP. I've read several things about indexing and Safari when applying certain CSS properties, or not setting the index positions first, etc. I'm just stumped. Basically I have a non-dynamic photo-stacking-rotating-thingy going on here. Top-most photo slides up, gets sent to the back of the photo stack (z-index), then slides behind the rest of the photos, then the whole things just keeps repeating forever. You can actually see the photos start to NOT stack correctly after the first photo shuffle...you have to look at the edges...you'll see it doesn't actually move to the very back. Check out the Codepen. Anyone been down this road? Sincerely appreciate the help in advance! Brian
-
I'm converting another Flash movie. This one has 16 buttons, each targeting a unique text box. When the user clicks on a button, it changes the text that appears in an adjacent area. In the Flash version, this was done with layers and moving around on the Timeline. No problem figuring out the onclick actions. But how to handle the "stack" of text boxes? 1.) When the page opens, the default text box is in place. When the user clicks a button, it's easy to change the zIndex, or the opacity, or even the show/hide properties. But, when the click occurs, this is what has to happen: 1.) The selected layer is "activated," either by changing its opacity to 1, or bringing it to the top of the "stack" with zIndex. The text box appears. BUT, simultaneously, the text box that was at the top of the stack must be "deactivated." 2.) The box at the "top of the stack" at any time could be any one of those 16 different boxes. Obviously, it must now "go away," by hiding it, or changing its opacity to 0, or sending it to the bottom of the "stack" with a lower zIndex number. Easy to "activate" a box, but not so easy to send away the one that's currently visible when the click occurs. Since it will always be a different box, I can't see a way to target it. I would think that when the selected text box loads, it has to somehow automatically become a variable that could be addressed later. But this is above my jQuery knowledge level... can someone point me in the right direction? TIA!
-
I've been having an issue using TweenMax and setting the css properties of an element. It seems to be automatically picking out a z-index and applying it to the style of the element. I'm assuming this is something that was added as a quick fix for performance or css3 animation flickering as backface-visibility is also added without me requesting it (which is a whole different issue and really bogs down performance on iOS Safari). The code is: TweenMax.set(element, {css:{y:0}}); This ends up being: <div class="header" style="z-index: 0; -webkit-backface-visibility: hidden; -webkit-transform: translate(0px, 0px); ">...</div> The problem is the z-index on the style attribute is overriding the z-index i have applied in my stylesheet. And as it sets the value to 0, my element just disappears. I can manually set the z-index in the tween and fix that issue but i shouldn't have to worry about updating that value anywhere other than my css. Is there something that I'm applying improperly? Maybe another parameter that will remove this default behavior (tried autoRound: false but didn't work)? If this is the intended behavior might i suggest getting the element's z-index and applying that value to the style attribute so to not override it to 0. Thank you for this awesome platform. I've been using greensock for such a long time and so glad it made it to JS.
-
Hi, i wounder how to fade all elements in a timeline. I can't introduce a new extra container - which would be easy to fad - cause of several zIndexes used for the elements. Can someone give me a hint? Jan
