QuickFlip jQuery Plugin

QuickFlip 2 has been released! This major update makes the information here obsolete. Find out more here...

QuickFlip is a jQuery plugin I wrote that uses a CSS trick to cause a div, paragraph or any other piece of HTML markup to flip like a card. With a result similar to the UI animation on the iPhone, this jQuery plugin is easily integrated into your webpage to make any portion appear to flip and show its back.

jQuery QuickFlip

QuickFlip takes any piece of HTML markup and flips it like a card. It’s simple to implement and the animation is fresh and original.

Click to see QuickFlip in action

QuickFlip

A plugin for jQuery

By Jon Raasch

Download QuickFlip

Click to see QuickFlip in action

How QuickFlip works

Normally QuickFlip uses two panels: a front and a back. When a flip occurs, the front panel is split in half with Javascript. The right and left halves slide into one another, and afterwards the opposite occurs with the back panel. While it’s not as smooth as some Flash animation, it all happens so quickly that it really looks like the panel is flipping over.

Download QuickFlip now

Putting QuickFlip on your website

Getting QuickFlip to work is a piece of cake; just wrap any content you want to flip in divs with the class “quickFlipPanel”, then wrap those in a div with the class “quickFlip”:

<div class="quickFlip">
    <div class="quickFlipPanel">
        <p> Front content here </p>
        <p class="quickFlipCta">Click to Flip</p>
    </div>
    
    <div class="quickFlipPanel">
        <p> Back content here </p>
        <p class="quickFlipCta">Click to Flip</p>
    </div>
</div>

Notice that we have two quickFlipPanels here. You can use any number of .quickFlipPanel’s, from one on up; they are grouped together by divs with the class “quickFlip”.

Also notice that within each panel there is an element with the class “quickFlipCta”. QuickFlip uses this call to action to trigger the flip when clicked. Alternately, you can trigger the flip without .quickFlipCta, using the quickFlip.flip() function (see below).

The QuickFlip files

There are a few files you need to upload to your site and include. Please make sure to adjust these paths as necessary:

<script src="jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="quickflip.js" type="text/javascript"></script>

<link rel="stylesheet" type="text/css" href="quickflip.css" />

Besides the core Javascript and CSS files, there is some additional CSS you will need to write to get QuickFlip working. Since QuickFlip relies on absolute positioning, you need to define a height and width for .quickFlip and .quickFlipPanel.

In general, try not to overwrite any of the styling in quickflip.css (this shouldn’t effect much). You can attach any extra class names to .quickFlipPanel, but don’t attach an ID or inline style. Additionally, avoid attaching margin, padding or positioning to .quickFlipPanel. You can attach any of these to .quickFlip or anything inside .quickFlipPanel if you need to.

Advanced QuickFlip use

Although basic QuickFlip is easy to implement, there are several options that can be customized by advanced users.

First, flip speed can be customized by adjusting the quickFlip.speed array in Javascript. For example:

<script type="text/javascript">
    quickFlip.speed = Array( 100 , 90 );
</script>

The first integer in this array is the speed at which the front panel closes and the second integer is the speed at which the back panel opens. You can also set the speed of a particular .quickFlip group:

<script type="text/javascript">
    quickFlip.wrappers[0].speed = Array( 120 , 30 );
</script>

This allows you to speed up or slow down any group of panels. Just make sure not to slow it down too much—it’s called ‘QuickFlip’ for a reason, if it’s too slow the illusion turns into a trrrrrrrain wrrrrrrreck.

Triggering the flip manually

Additionally, if you would like to trigger the flip function without the use of .quickFlipCta elements, you can use the quickFlip.flip() function. This function expects three variables; the first two are the indexes of whichever QuickFlip wrapper and panel you’d like to flip, and the third is an option controlling how many times the panel is flipped. For the third variable you should normally use 1 to flip the panel once, but try flipping it more times, or setting the value to -1 to flip continuously.

<script type="text/javascript">
    quickFlip.flip(2,0,1);
</script>

This takes the third QuickFlip wrapper, and flips over the first panel to reveal the second (a single flip).

Known bug and a decent workaround

QuickFlip uses Javascript to append duplicates of an element to create the illusion that it is flipping. When this occurs in Internet Explorer 6 and 7, any Javascript events that were attached within that element get removed (click, hover, etc.).

The QuickFlip plugin gets around this internally by reattaching the click event for the .quickFlipCta, so most QuickFlips are unaffected. Additionally this problem only effects Javascript events, not normal <a href=""></a> links. However, if there are extra Javascript events attached within the QuickFlip panels, these events must be put in a function with no arguments, and the name of this function must be passed to quickFlip.reattachEvents. When this is set, it will cause QuickFlip to reattach the events for Internet Explorer users.

Download QuickFlip



Jon Raasch

Jon Raasch is a UX nerd and free-lance web designer / developer who loves jQuery, Javascript & CSS.




You Might Also Like:


30 Comments to “QuickFlip jQuery Plugin” RSS 2.0

  1. yamaniac says:

    Nice!! Loved the effect!

  2. webomatik says:

    great plugin, it really provides interactive touch

  3. bronius says:

    Yes, very slick– thanks for sharing it!
    note to the wayward developer:
    - do provide a height/width in css for your panels– without it, it swaps but doesn’t smoothly flip
    - front and back should be of the same size
    - clip your content with overflow: hidden if you’re unable to reliably stuff your content into a certain size.

  4. teramange says:

    Excellent plugin, use it loads on my site.

  5. SN Prabhu says:

    Good Plug-in, Thanks

  6. Kristoffer Svanmark says:

    Can’t get it to work, getting following error message in FireFox

    Error: $ is not defined
    Source file: http://sortimentet.intelligentmedia.se/work/js/quickflip.js
    Row: 133

  7. Jon Raasch says:

    Hi Kristoffer,

    I’d guess that you aren’t including jQuery.

    -jr

  8. Andy says:

    Hi Jon,

    I have the script working (love it!) but for some reason in IE8 it often results in the message:

    “A script on this page is causing Internet Explorer to run slowly. If it continues to run, your computer may become unresponsive”.

    Has anyone else had this problem? It seems to work perfectly in Chrome and Firefox. The animation pauses 1/3 of the way through i.e. when each side has come in about 1/4 of the way.

  9. Jon Raasch says:

    Hi Andy,

    Quickflip is working fine for me in IE8 with no errors. I think maybe you were using a beta version (your comment was posted before IE8′s official release). Also IE6 and IE7 have been supported by Quickflip since it’s release.

    But I always appreciate debugging info like this, let me know if Quickflip continues to give you problems.

    Thanks for reading,
    jr

  10. jeremyBass says:

    Hello, I really like this, but I had to do a hover flip type setup. I tried to take a stab at it and it almost works but thought you would know best on this….

    this is what I tried (quickflip.js ~L 121)

    attachHandlers : function($the_cta, i, panel) {
    //attach flip
    $the_cta.bind(“mouseenter”,function(ev){
    ev.preventDefault();
    quickFlip.flip(i, panel, 1);
    });
    $the_cta.find(“.mediaLinks”).bind(“mouseleave”,function(ev){
    quickFlip.flip(i, panel, 1);
    });
    },

    with a structure of

    the test is here…
    http://www.digitalbarn.tv/testing-page.html

    any ideas would be great… thank you for any help

    Cheers
    jeremyBass

  11. Andre says:

    Hi,

    Very nice work, simple to implement… beautiful!

    I have an issue, and was wondering if there’s a way to accomplish this: I want to use QuickFlip on a blog that already uses mootools. I also have other scripts running on jquery and mootools and have managed to avoid conflicts by using: var jQuery = jQuery.noConflict(); and replaceing all $ references with jQuery.

    what would i have to change in your code to get this working? simply replaceing $ with jQuery doesn’t do the trick… Please don’t be too harsh, i’m not a web developer, i’m a designer :)

    thanks so much!

  12. Jon Raasch says:

    Hi Andre,

    I’m planning on reworking the QuickFlip plugin a bit in the next couple weeks, and that should solve any jQuery namespacing issues you’re having.

    I’ll let you know,
    jr

  13. jeremyBass says:

    Hello would that happen to include a variable trigger type setup? :) just thought I’d ask …

    Cheers
    jeremyBass

  14. Jon Raasch says:

    Yeah Jeremy, I’m planning on making it so you can call quickFlip from any jQuery object, so it’ll be something like:

    $( obj ).quickFlip();

    I think that should make what you’re doing in the comments above easier.

    -jr

  15. jeremyBass says:

    Sweet… that’s great… Thanks for the help… always good stuff coming from your way… :D

    Cheers
    jeremyBass

  16. Andre says:

    wow, wonderful :) i’ll post the link as soon as i get it working :) thanks a lot for the great work!

  17. Andre says:

    Hi there, again… quick question: how can i trigger a flip of the elements on page load? this is a nice user clue so they know they can flip elements… i tried creating a function that would do quickFlip.flip(a,b,1) and called it onload but this doesn’t seem to do it… is there any way to do this?

    thanks!

  18. Ian says:

    Hey there,

    Love this, really good work. It perfect for my needs. I had a similar issue to Andy on the 7th March, this was being caused by trying to use this plugin with jQuery 1.3.2, I swapped back to 1.2.6 and its working like a charm.

    Just thought I would post and save anyone else having the same issue.

    Great work once again, be looking out for the full plugin.

  19. Ian Beadle says:

    Great plugin, and can be really useful. There are definitely problems with jQuery 1.32 though as Ian said above. It would be really good if this could be updated to sort this out.

    Thanks for the great work on this one.

  20. dlv says:

    this is a great jquery script!
    i will surprise of what user can do with it !
    thanks for share

  21. Jon Raasch says:

    QuickFlip 2 has been released and is way better than the original, check it out here:
    http://jonraasch.com/blog/quickflip-2-jquery-plugin

    The update solves a number of the problem people mentioned above. The IE8/jQuery 1.3.2 conflict has been fixed, as well as namespacing issues.

    It is now way easier to use, since it can be chained from any jQuery selector, and it calculates the dimensions automatically and applies all the CSS it needs through Javascript, so there is no longer any need for a QuickFlip stylesheet.

    Finally there is a much easier to use $.quickFlipper() function which makes triggering the flips manually a piece of cake.

    Get it here: http://jonraasch.com/blog/quickflip-2-jquery-plugin

  22. Lex says:

    Can you edit the code so that it flips on its own (without rollover, or any mouse event) and flips through multiple images? If so, how can I go about doing that?

  23. Josh Lind says:

    Hi. Thanks for this plugin!

    I’m trying to use flip for mouseover or mouseenter type behavior.

    I’d like to have it flip one way with a mouse over, then flip back on a mouseout… but am not sure how to separate the two actions as it’s setup more like a toggle on line 121-127.

    I tried a super simple way of just created a new class and manually attaching a flip trigger in order to flip back. But that didn’t quite work.


    $(document).ready(function() {
    $('.quickFlipBack').mouseout( function() {
    quickFlip.flip('.quickFlip', '.quickFlipPanel', 1);
    });
    });

    Here is an example: http://tackysmack.com/flip

    Thoughts?

    This makes for a pretty rad interactive experience. And I picked your Flip above the others for it’s speed because I was going to use it like this.

  24. smd says:

    Hi,
    I am using this quick flip, and i wanted to know if there is a way in which i can remember the side i am looking at ?
    What i mean is
    I am on side1 – I do a flip to view side 2.
    I refresh the page, i should be able to view side 2.
    Can i maintain an attribute/hidden id etc to get this to work ?

  25. zubayer says:

    I have the same question with smd. And also I have another question, how can I link to a specific tab from the same page or another page.
    Like linking to a page which has three tabs, how can I access the 3rd tab or second tab in this page.
    From the same page it will flip, from another page it will directly go there.
    I am using quickflip1.
    Thanks

  26. MPR says:

    I’m trying to figure out how to create a proper print CSS for quickflip. I’m guessing that the way quickflip works is by positioning one element behind another. So in my print css I would need to use relative positioning to move the back panel below the front panel so that they both show up when printed. Correct?

  27. vany says:

    i use your script with an infinite scroll script. strange thing is that i have to load the quickflip.js and jquery on the additional loaded entries which results in some weird animations since quickflip gets loaded several times :/

    anyway to avoid this?

  28. Web Design says:

    A jquery plugin that flips any piece of HTML like a card.

  29. Jhon says:

    This is what i was looking for from last two days

  30. knguyen says:

    It doesn’t run in IE 9. Please check it.



Leave a Reply



  • HTML permitted
  • Wrap code in <pre><code></code></pre>
  • Escape HTML to display as text