castlecode

castlecode supports this item

Supported

This author's response time can be up to 1 business day.

48 comments found.

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)?

The html for these demo boxes are the following:
  <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

awesome :D glad to hear it, the JS Fiddle solution would be awesome so we all can benefit from it ;)

No problem, here it is JS Fiddle. Not sure how long you want me to keep the JS Fiddle up for as it shows the code I purchased (I wasn’t sure how to add the code files as private resources).

ohh alright, now I got it, since you didn’t specify a manual width and height (with pixels) the flipping cards didn’t get any dimensions, removing the position absolute make the flipping cards dimensions variable to the content, make sense ;) thank you for the example, and you are right, you can remove it now since it shows the source code :)

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.

Hello,
are you talking about the content inside?
or do you mean all the cards? if so, the plugin is not a grid, it is a flipping 3D card, you can have as many as you want and even float them so they get stacked, but they are independent, so you can put them in a centered container, or anywhere in your page, but the plugin it self is just a flipping card with a static height and width

I hope this make sense
Best castlecode

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.

I saw your Note: If you would like to know how I configure the admin page and customize the flipping cards in the live preview, contact me via email and I will show you all I did.

Yes, please let me know (step-by-step) how you configured the admin page, etc. Thanks so much.

This is in regards to the wordpress one ($11). thx

Hi, here is how I configured it: http://www.davidbo.dreamhosters.com/plugins/configuration/ you just put the shortcode in your pages/posts and inside the shortcode put any HTML, like text, images, divs, etc

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

Hello,
this feature is not included in the plugin as it is, I’m guessing it can be done via JS, but you would need to tweak it according to your needs, I’m guessing something similar to this:
$('.front').click(function(){
     $(this).find('img').attr('src', url);
});

$('.back').click(function(){
     $(this).find('img').attr('src', url);
});
depending on your purpose the url would need to change.
I hope this helps ;)

Best, David

Thank u so much for your quick and usefull help.

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?

Hello,
the flipping cards are independent from each other, in other words is not a grid (it will not stack into a masonry style) it looks like a grid because the cards have the same dimensions and they are just float to the left

yes you can change the width and height of each card (via CSS), you can check the source code to see the styling ;)

Best, David

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

Hello,
the clicking flipping cards work like taps (since it is kind of like the same)
the hover flipping cards works but a little bit different, when you tap them they flip, but you need to tap outside the flipping card to flip it back to the front (it is like the translation of the hover on mobile)
but I guess you could also add a fallback to change from hover to click when it is mobile (with JS) ;)

Best, David

Hello! Thanks for the fast replay David :)

enzob

enzob Purchased

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

Hello,
Yes of course ;), please send me a message through here: http://codecanyon.net/user/castlecode#contact so I can answer you via email

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

Hi, Yes indeed, the flipping is not supported by IE, I tried to add it, but I found too many bugs on IE, which causes more harm that good, so I added a fallback of a fade effect instead

that’s why in the “Compatible Browsers” section in the plugin page there’s no mention of IE, and also I mention the fallback in the description: “IE fallback of fade effect”

Best :)

by
by
by
by
by
by