Notice: Undefined variable: extrahead in /home/tznqzkawbfzr/domains/dev.jonraasch.com/html/inc/blocks.inc.php on line 63
QuickFlip Plugin for jQuery - Documentation

QuickFlip Plugin for jQuery - Documentation

Created by Jon Raasch

QuickFlip 2 for jQuery is a plugin that flips any piece of HTML markup over like a card. The plugin supports any markup and styling, and uses an animation shortcut that is barely noticeable when fired quickly.

Download QuickFlip Plugin for jQuery

Basic use of QuickFlip 2

Let's start with the markup. Since QuickFlip flips between a number of panels, we'll need a wrapper for each of them, which we will then need to wrap with something we can target: 

<div class="quickflip-wrapper">
    <div>Front panel content</div>

    <div>Back panel content</div>
</div>

Next let's be sure we've included jquery.quickflip.js and the jquery library, then call $.quickFlip() on our wrapper when the page loads: 

$(function() {
    $('.quickflip-wrapper').quickFlip();
});

This will attach the QuickFlip to this node. QuickFlip automatically attaches a click event to anything with the class "quickFlipCta". To take advantage of this we can use a couple links: 

<div class="quickflip-wrapper">
    <div>
    <a href="#" class="quickFlipCta">Click to flip front panel</a>
    </div>

    <div>
    <a href="#" class="quickFlipCta">Click to flip back panel</a>
    </div>
</div>

Alternately, we can trigger the flip effect using the $.quickFlipper() function. Simply chain this to any jQuery object: 

$('.quickflip-wrapper').quickFlipper();

This can be attached to a click or hover event, or the custom function of your choice. Additionally, $.quickFlipper() will initiate the QuickFlip if $.quickFlip() hasn't yet been called on the given node. However it is best to pre-load the quickFlip for performance reasons.

(If you only use $.quickFlipper() you should predefine some CSS styles: position: relative for your wrapper and position: absolute for each panel within)

QuickFlip examples

Exposed Functions in QuickFlip 2

$.quickFlip( options )

Initiates the QuickFlip on the given node, attaching CSS styles and appending necessary DOM elements.

options (Object)
Option values (see below).

$.quickFlipper( options, nextPanel, repeater )

Triggers the flip effect. If $.quickFlip() hasn't been called on the given node, $.quickFlipper() will call it first.

options (Object)
Option values (see below). These options will overwrite any set in $.quickFlip().

nextPanel (Integer)
Index of the next panel to be shown. By default this is null which automatically shows the next panel in the DOM, looping to the first panel if this doesn't exist.

repeater (Integer)
Number of times to flip the panel, set to -1 to repeat the flip effect indefinitely.

$.whichQuickFlip()

Determines the QuickFlip index of the node it is called upon. This assists with interfacing with the $.quickFlip.flip() function (which you shouldn't really have to use).

Customizable options for QuickFlip 2

closeSpeed (Number)
The number of milliseconds it takes to flip over and hide the front panel.

openSpeed (Number)
The number of milliseconds it takes to flip over and show the back panel.

vertical (Boolean)
Whether or not to flip vertically - defaults to false. Added in QuickFlip 2.1

easing (String)
If you are using the jQuery easing plugin (http://gsgd.co.uk/sandbox/jquery/easing/) pass the string of the easing method you want to use. There are also two easing methods built into jQuery, linear and swing. By default easing is set to swing.

ctaSelector (jQuery Selector String)
QuickFlip attaches a click event to this jQuery selector that triggers the flip effect. Set to '', 0 or null to stop the process and speed things up a tiny bit.

refresh (Boolean)
Provides an option to refresh the QuickFlip animation each time a flip is called. This is useful if the content within the flip changes visually, however is turned off by default for performance reasons.

panelWidth (Number or CSS string)
This sets the width of the QuickFlip panels statically, and prevents QuickFlip from automatically generating this value based on the panel's dimensions (this can also be accomplished through simple CSS).

panelHeight (Number or CSS string)
This sets the height of the QuickFlip panels statically, and prevents QuickFlip from automatically generating this value based on the panel's dimensions (this can also be accomplished through simple CSS).

noResize (Boolean)
Disables the window resize event which reattaches QuickFlip panels on window resize. Set this to true if your QuickFlip wrapper is not effected by the window size. Defaults to false.

Advanced functions in QuickFlip 2

Coming soon...

Troubleshooting QuickFlip 2

QuickFlip is removing the margin / padding from my panels

QuickFlip's animation requires that the panel wrappers and main wrapper have no margin or padding, so the script forces this setting when it loads.

However the inner content of each panel can have any styling, so use an inner wrapper if you need margin or padding.

Portions of the QuickFlip panels are getting cut off

QuickFlip automatically pulls in the width and height of the first panel in the wrapper when $.quickFlip() is called. This can cause problems if any of the later panels are smaller than the first, or if content loads dynamically into the panel (for example if an image loads).

The easiest way to get around this is to set a height and width for the QuickFlip panel, either via CSS or using the panelHeight and panelWidth QuickFlip options.

On page load the panels are tall for a moment, then flicker closed

When $.quickFlip() loads it aapplies some CSS to hide all but the initial panel. This will cause a brief flicker when the page loads, unless you apply this CSS ahead of time.

The main styles to apply are position: relative to the QuickFlip wrapper, and position: absolute to the inner panel containers. You may also want to define a height and width for the wrapper panel.

Other panel height and width issues

If you are having other height and width issues, try applying a height and width to the main QuickFlip wrapper either via CSS or using the panelHeight and panelWidth QuickFlip options.

Version history for QuickFlip

QuickFlip 2.1.1

Released 08.23.2010

QuickFlip 2.1

Released 11.23.2009

QuickFlip 2.0.1

Released 11.22.2009

QuickFlip 2

Released 07.13.2009

QuickFlip (original)

Released 10.20.2008

Upcoming enhancements to QuickFlip

Known Issues

Licensing of QuickFlip 2

QuickFlip 2 is released under the FreeBSD license:

Copyright (c) 2009 Jon Raasch (http://jonraasch.com/)

Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:

  1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
  2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.

THIS SOFTWARE IS PROVIDED BY JON RAASCH 'AS IS' AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL JON RAASCH OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

The views and conclusions contained in the software and documentation are those of the authors and should not be interpreted as representing official policies, either expressed or implied, of Jon Raasch, who is the man.



Make A Donation