I’m using jQuery’s justFlipIt plugin on some basic CSS cards. I want the cards to grow in size when they flip to the back, but they keep appearing behind the other card. I’ve checked the z-index (1000 for the back and 900 for the front) and both sides are position: absolute; I can’t figure out why the back of my card won’t move to the front. Has anyone else had this problem?
Here’s a codepen example. It’s not really working properly because I had to download the justFlipIt code, but otherwise I think this code should work: https://codepen.io/ckmayo-the-decoder/pen/RBvqMW
Can you provide a JSFiddle or Codepen link of your project? That is alot of code to look through on the forum.
Also, I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make easier to read.
Note: Backticks are not single quotes.
See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.
If I click on the first card which overlaps the 2nd card and then click the 2nd card, shouldn’t the second card overlap the 1st card (based on the OP’s original need)? Basically, the last card clicked, which shows the back should overlap any other cards shown.
Almost, I see the #1 option in the fork which I thought solved the problem but it seems like it only works in one direction. I can click card #1 and it will show in front of card #2, but when I go back to card #1 it appears behind card #2. If I’m reading the solution you gave correctly:
if the card has class ._justFlipIt_panel – which all do
set the z-index to 0
increase the z-index by 1 each time it’s clicked
if not
set the z-index to 1,000
decrease the z-index by 1 each time it’s clicked
Am I getting this right?
I want the card that is clicked to appear in front of all other cards. Could the function just be:
if the card has class ‘._justFlipIt_panel’
set z-index to 1,000
Well, the first approach is first clicked card gets the highest precedence.
Suppose, you have card A, B.
You click A, then B. Then, card A will overlap card B.
Now if you close A and reopen cardA, then you actually clicked cardA later than cardB. Hence, cardB overlaps cardA.
This is what first clicked card appearing first implies.
If you want cardA to always overlap cardB, use appraoch #3.
However, if you want whatever card you clicked to take the highest precedence, then I have to add another implementation. It is doable though, but I won’t be doing it now.
I will tell you the approach I’ll take, though. This will give you a chance to implement it yourself or find a better way.
Here are things that needs to be done:
maintain highest z-index
When a card is clicked
if the card has the highest z-index, then do nothing.
else, update highest z-index and give it to the selected card.
The highest z-index will eventually overflow, but I think no one will ever click that much.
P.S Your method probably won’t work because if every element had fixed z-index, then one that appears first in html will take precedence. This works when you have just 2 cards, but imagine the same more cards. I might be wrong, but just try it out.
