Love this plugin! I’m having one problem, though. I’ve designed a game with multiple cards that a player can flip. When they flip Card A, flip it back, then flip Card B, the image from the Card A back shows for a second before correctly displaying the back of Card B. How can I prevent this?

You can see this happening here: https://emergentgame.com/

Hello,

Can I ad a random element?

Hi David – Hoping I can run something by you? I just purchased today and have the randomized timing for the flips working fine on desktop. This is pulling the images from a loop in WordPress. When I start scaling for mobile, I’m getting a lot of whitespace between the rows that I can’t figure out how to remove?

Here’s what I’m seeing: https://www.loom.com/share/450350056dd54d0cbffe7925dfc5381e

Any thoughts on how to remove that whitespace?

Thank you, Jonathon

Hi David

I’m not sure what I did wrong and am hoping you can point me in the right direction.

When I installed your code (flip right) one of the first things that I did was to check to see that it worked on mobile (iPhone) and it worked great. But after I added my own content and styles on rotate the card back displays a reverse of the image I used on the card front. It briefly flashes the content that I created for the back, but that’s reversed also. Note that is works fine on my desktop and on my Kindle Fire—just not on the iPhone.

If you need to see code or the development site let me know the best way to get it to you.

I appreciate any assistance you can offer. Thanks, Tom

Hello can you help please? I just want to have a click button. The button appeared but when I click on it nothing happened? This is the code:

Hi I have a problem. The Flipping Cards works corretly on Google Chrome, but don´t do the flipping efects on IE 11, whats happend?.

Kind Regards

Hello! I have problems with Bootstrap about the width of the card and columns. Can you help me via e-mail? Thanks

Hello. One question before purchase. On mobile devices (smartphones) the effect on hover does it work? How? Thank you!

Are card sizes easily editable, and will they still auto stack into the masonry style? In your demo, the area that contains all the boxes is not the size I want. Is that adjustable?

Hi, the flipcard is very good but i have a question:

It’s possible to put more than 2 images inside the box? I mean if i wanna make a rotation of 5/6 diffrent images its that possible? and how?

Thank u so much

Does this work with wordpress? Do you have ‘instructions’ on how to set it up as the live example (http://www.davidbo.dreamhosters.com/?page_id=11) shows?

Thanks so much.

Hi,

Is there any way to get this thing to be centered on the page and maintain being centered while the browser window is being resized?

I noticed the demo has the same issue where it’s slightly offset to the left. I know that it needs some space to the right when it’s shrunk down, but if you check the demo, anything over 760PX really shows the lack of center alignment.

Hi, I’ve been struggling a bit longer with this than I would like to admit, so I decided it’s better to ask. As a demo I am setting up, I have 2 columns described with div’s with classes of “col-md-6” (using twitter bootstrap). In each of the columns I have 2 content boxes, which for now are identical. The problem is they are all lying on top of each other in their respective columns. What am I missing if I want them to lie underneath each other (as in one content box per row)?

  <div class="card-container">
    <div data-direction="right" class="card click">
      <div class="front">
        <div class="content-box box-default">
          <span class="icon-ar icon-ar-lg icon-ar-inverse icon-ar-circle">
            <i class="fa fa-cloud" />
          </span>
          <h5 class="content-box-title">  Default Box</h5>
          <p>Eveniet quo minima deserunt quisquam libero iste veritatis consectetur nulla.</p>
        </div>
      </div>
      <div class="back">
        <div class="content-box box-default">
          <span class="icon-ar icon-ar-lg icon-ar-inverse icon-ar-circle">
            <i class="fa fa-cloud" />
          </span>
          <h5 class="content-box-title">  Default Box</h5>
          <p>Eveniet quo minima deserunt quisquam libero iste veritatis consectetur nulla.</p>
        </div>
      </div>
    </div>
  </div>

If you need a description of the content boxes, this is the template I am using Artificual Reason

Fancy to buy this item, but …. not working in (latest) Opera, just see the fallback fade animation. Is this a known issue?

On Chrome: As long as i DON’T move the mouse over the middle of the item (eg. for example moving mouse from right-to-left) the flipping is not completed: it just stutters, (half) flipping back and forward. Known issue?

Working on W7, PC

This seems a most promising plugin, but in real life, not really working?

Curious to your experience.

Seems to be a problem in the newest update of Chrome. I realllly hope you can fix this:

If on the front card any element has position that is not “static”. (like relative, absolute, etc) then the front side will show through when you flip the card.

There is no problem in other browsers, and this only happens in the VERY latest version of Chrome. Using Chrome Dev tools, I did this in your demo and it breaks it there too.

For my site, I require an element on the front side to have a relative (or absolute) position, so this is really important. Thanks for the great support.

Hi David, thanks for the great work. Your script is working great for us, but the I.E. fade fallback is not showing the back of the card. The fade is executed, but the back does not display.

Can you help?

I will need to give you a login to our staging site so that you can see this – if you PM me, I will send you one. Many thanks, Jonathan.

I’ve got an image background with overlaid text that I’m trying to get working with the flipper.

When i set the image as a background to the div, it gets flashy and erratic during the flip effect. I’ve seen this before with CSS/JS animations, so no big surprise there.

So my second attempt was to position the image absolutely top:0 left:0, then z-index it below the text which is positioned relatively. This gives the effect I want, and eliminates the flashing and erratic behavior, however the fillper fails to hide the front face of the card, which now shows up backwards and on top of the back face, when it should be showing the back face only.

I’ve spent an hour trying to figure it out, and all I’ve come up with is that its the position:absolute on the image and position:relative on the text that is causing this. If i remove these attributes, it obviously breaks the styling of the card faces, however the content flips properly and hides the front side.

the code:

div class=”front” p style=”position:relative; z-index:1;” /p p style=”position:relative; z-index:1;” /p img style=”position:absolute; z-index:0; top:0; left:0;” /div div class=”back” p style=”position:relative; z-index:1;” /p img style=”position:absolute; z-index:0; top:0; left:0;” /div

I’m also curious if its possible to have the cards flip on a timer as WELL as on click? I’ve got the click class on there, which works, but as soon as I added the data attributes for auto flip, the click doesn’t seem to work any more.

Thanks in advance!

The issue is the header is scrolling behind the boxes rather then on top of it like the rest of the page. Any ideas how this can be fixed?

Thanks!

Hello How many image I can put on each card.

Almost got the plugin,but I saw that it’s not working on my Android phone, the automatic fliped card work fine but not the other one, too bad.