jQuery justFlipIt plugin z-index isn't working

jQuery justFlipIt plugin z-index isn't working
0
#1

Hi all,

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

#2

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.

markdown_Forums
markdown_Forums.gif1024x600 194 KB

#3

I’ve updated the post with a codepen example, but the example doesn’t have the justFlipIt source code. It gives an idea though.

#4

Interesting! Their demo was kind of weak on details but they also have this codepen.

Maybe that will be useful. Good luck

EDIT: It works! You just need to include this library in your settings
https://rawgit.com/SimHub/justFlipIt/master/src/justFlipIt.min.js

#5

The trouble is the OP wants the back of the card to be in front of the other card once it is flipped.

#6

Doh. Got carried away with a the new toy.

That might do it. Not sure what side-effects there would be

._flipY_ {
  z-index:10;
}
#8

Seems like a lot of extra work for such a small plugin.

#9

Well, about 10 lines of code fixed it. But, yeah. The lib wasn’t designed as OP’s need. It is supposed to be a fixed size card.

#10

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.

#11

Oh, that’s a good point. I was actually only focused on giving a relative order. I think I can fix that thanks.

#12

Well, now that I’ve thought about it, this is quite an ambiguous behavior. Consider which order of precedence makes the most sense:

  1. First clicked card gets the highest precedence
  2. Last clicked card gets the highest precedecne
  3. Each card has ordered fixed precedence such as based on their layout in the html.

So, the issue is based on what OP said, the order of precedence can’t be determined. Any 3 approaches can make sense depending on what OP wants.

My initial solution was approach #3.
Now, I’ve implemented a rough solution that covers either one of #1 or #2, but not both.

#13

I think the OP wanted this one, but unless the OP replies back, we will not know for sure.

#14

Yes, I was hoping the last clicked card would get highest precedence. Sorry for the delay! Trying out the solution now!

#15

Where are you running the code? codepen?

#16

I’m using Aptana studio

#17

I see that you’ve edited the last comment. So, I guess the problem is solved?

#18

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

if not
set z-index to 0
?

#19

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.

#20

Thanks! I’ll try it out.

#21

Here’s the one with approach #4