Flippant.js - A mini JS and CSS library for flipping things over

http://mintchaos.github.io/flippant.js/

by toastdriven • 13 years ago

108 33 13 years ago

mintchaos.github.io

beat• 13 years ago

Very cool! I was actually thinking about wanting something like that.

diminoten• 13 years ago

Cool, but the modal is huge. Being mostly a noob at this kind of stuff, I assume that's outside of the scope of the library?

sbarre• 13 years ago

It's probably just sizing the modal to your browser window by default, and you can override/adjust it in the CSS when you're styling it for your needs anyways.

CedarMadness• 13 years ago

The initial flip isn't animating correctly every time in Firefox. Half the time it flips over too quickly to see any animation. Flipping back to the original content looks alright though.

Arelius• 13 years ago

I'm getting this also.

BaconJuice• 13 years ago

no love for IE6? great stuff anyways. Saved for future use.

raylu• 13 years ago

Does anyone love IE6? IE6 doesn't need love, it needs an axe.

tg3• 13 years ago

It's at 0.2% usage in the US, with similar levels around the world (with the exception of the PRC). Even IE7 is below 1% worldwide at this point.

http://www.ie6countdown.com/

dan_b• 13 years ago

No love for IE at all by the looks of things.

umsm2• 13 years ago

Even chrome frame has been retired because IE6 usage is so low.

gokulk• 13 years ago

not able to close windows

joeyrobert3• 13 years ago

Full flippant source is 79 lines: https://github.com/mintchaos/flippant.js/blob/master/flippan...

Call me old-fashioned but I prefer not to use these "mini JS and CSS" libraries for every little thing I do. Any competent JS/HTML developer be able to implement something like this using CSS3 transitions in an hour. Too many developers just paste libraries together these days.

umsm2• 13 years ago

Why spend time re-inventing the wheel? If you're looking to sharpen your skills, then go for it. I believe most people would prefer to get their product out the door as quickly as it's reasonable.

joeyrobert3• 13 years ago

Agreed, results are important but you're taking a chance trusting any library Joe Programmer created in a couple of hours. I think it's a form of Cargo cult programming.

esailija• 13 years ago

What is the time it takes you to find this "library" and verify its fitness for your purpose? You can see that it causes runtime errors in IE8 and one had to read the source code to see this because it's not mentioned anywhere.

If you are making a custom implementation specific to your application, most of the css and js is not needed (especially if you are using jQuery) or are useless and need to be changed. It would be so trivial to write you would not even think of finding a library for it.

orenbarzilai• 13 years ago

Hour is a long time when you can use libraries to do stuff like this in a manner of minutes.

bronson• 13 years ago

It's never minutes. Adopting someone else's library means now you're debugging their code on browsers they don't use. And, you need to figure out the inevitable idiosyncrasies like why do "card" and "modal" modes exist?

Sometimes it's worth it. For this? Seems unlikely.

ngoel36• 13 years ago

If I'm paying my dev $100k/year, I'd rather spend that $48/hour doing something else.

joeyrobert3• 13 years ago

What's he going to do when he comes across a problem where these is no library that solves it?

theg2• 13 years ago

Broken in Opera...not surprising but worth nothing.

franze• 13 years ago

i like it, will combine it with http://miniqr.com/onsnap.r just because

thezilch2• 13 years ago

Note: doesn't work in <IE10 and doesn't degrade gracefully

joseph_cooney2• 13 years ago

In IE 10 the 'flip' in the demo worked for me, but the 'flip back' didn't. It looks like it is just the way the even handler on the 'back' of the item is wired up.

thezilch2• 13 years ago

I don't think it's the library; the demo uses `CustomEvent`, external to the lib, which is not supported in IE, as a constructor. I honestly didn't test any of it, but looking at the code was obvious it'd both not work and just throw errors in IE.

josscrowcroft• 13 years ago

Beautiful. thanks!

aiiane• 13 years ago

nitpick... why does the css class applied during card mode have 'modal' in its name?

gren• 13 years ago

Flippant means creepy in French!

NKCSS• 13 years ago

The card version looks nice and usable, but the test flip has some issues. Works nice in IE10, but in Crome, the font gets ugly and has drawing artifacts (see http://imgur.com/aXwvVr8 ), but that's chrome and not your fault :)

Also, in IE10, the input of the card is a bit off, where you can't read it properly ( http://imgur.com/NF7lXbQ ) and the update button doesn't work...

Flippant.js - A mini JS and CSS library for flipping things over

Related Stories