Rotate on click css card flip

[karl0]

Hi,

I don’t know JS and I was wondering if there is a way to make the card flip back on a second click and on mouse leave?

Here is the existing fiddle:

http://jsfiddle.net/GDdtS/2199/

Thanks,

Karl

[JohnMotylJr]

@Karl0,

Hey man, im unsure if you want the card to flip back with either a second click & mouse leave, or both. I forked your fiddle into a codepen so check it out and tell me if that is what you wanted. But to answer your initial question, we just need to bind multiple events using the bind() method and a little toggle() action.

References:

1. CodePen Example
2. jQuery’s bind( ) method
3. jQuery’s toggle( ) method

[karl0]

@JohnMotylJr

thanks for your help John! I was looking for #2.

I have a small problem though, when I try to render this in Chrome (Version 26.0.1410.19 beta on MacOS ML) it doesn’t flip at all.

Do you have any idea why? It flips perfectly in CodePen..

Thanks,

Karl

[karl0]

@all
I found the solution.. I didn’t use document ready properly (more info here: http://api.jquery.com/ready/)

Thanks again for the help!

Karl

[JohnMotylJr]

@karl0,

Have you tried inspecting element to see if there is an issue with the javascript? I am on a windows machine so i cant really help ya out there (test wise).

What i suggest to try

1. Did you add a link to jquery?
2. Is it the ‘latest’ jquery? (try different release versions)?
3. Inspect element to see if you get any console errors

As of late though, with the latest jQuery version 1.9.1, toggle has been acting very strange. In most instances it will hide the element almost immediately. I revisited that code and i will make some improvements, but basically to attach two events just use bind(). Let us know how it turns out on your MacOS ML. Ill shoot you a improved pen shortly.

Good to hear. Better yet, instead of using .ready( ), why not just use an anonymous function?

I got an EXAMPLE here. There are more ways to do it but i’ve forgotten, feel free to add.

[karl0]

@john
I’ll look into that!

I have tested it with different version of jquery and I can confirm that with 1.9.1 and toggle, it disappears, everything below that works fine for me..

Also on a side note: quite happy with the current solution but if you’re up for it:

How would you code it, so that the card only flips on state2 (back) using mouseleave and click? So that it would NOT flip on state 1 (front) using mouseleave. The only option to flip state1 should be via click…

Thanks for your help, I appreciate it a lot!

Karl

[JohnMotylJr]

@karl0, yeah man ill shoot you a use case here in a little bit.. basic thought for this would be just to bind your events and for each event run your code.

[JohnMotylJr]

@karl0,

Updated CodePen

[kingdok]

This is awesome guys :D.

Is there a way to do this where it doesn’t turn over all cards without having an individual id for each item?

So ideally on click it turns over 1 card.

[Author]

Posts