nnattawat / flip Goto Github PK

I'm trying to use flip inside a non-fixed size element. Unfortunately, the parent element doesn't seem to take the proper size around the flippable element. I believe this is because the flippable element uses position: absolute.

See http://jsfiddle.net/epbe44mw/2/ for an example. The entire background of the text should be gray (and indeed, it is when you remove the flip code).

Is there a way to deal with this nicely?

Reference issues: #12, #17

Thank you for the awesome plugin!

I seem to have run into an issue where Font Awesome icons are displaying on the back of cards on Google Chrome.

Here is an example in gif form:

My card looks like this:

<div class="card-grid" style="transform: perspective(600px); position: relative; transform-style: preserve-3d;">
<div class="front" style="height: 100%; width: 100%; backface-visibility: hidden; transform-style: preserve-3d; position: absolute; z-index: 1; transition: all 0.5s ease-out; transform: rotateY(0deg);">
<div class="fa highlightItem fa-4x fa-file-pdf-o" style="backface-visibility: hidden;"></div>
<div class="descTitle" style="backface-visibility: hidden;">PDFs</div>
<div style="backface-visibility: hidden;">Create and send PDFs of completed inspections with ease</div></div>
<div class="back" style="transform: rotateY(-180deg); height: 100%; width: 100%; backface-visibility: hidden; transform-style: preserve-3d; position: absolute; z-index: 0; transition: all 0.5s ease-out;">
<table style="backface-visibility: hidden;">
<tbody style="backface-visibility: hidden;"><tr style="backface-visibility: hidden;">
<td style="text-align: center; padding: 0px 25px 0px 0px; backface-visibility: hidden;">
<div class="fa highlightItem fa-2x fa-file-pdf-o" style="backface-visibility: hidden;"></div>
</td>
<td style="backface-visibility: hidden;">
<ul style="list-style: inherit inside inherit; backface-visibility: hidden;">
<li style="backface-visibility: hidden;">Auto-generated based on completed surveys</li>
<li style="backface-visibility: hidden;">Always reproducible with a click of a button</li>
<li style="backface-visibility: hidden;">Print batches of reports for services easily</li>
</ul>
</td>
</tr>
</tbody></table></div>
</div>

Is there a possibilty to completely reset the parent, which is going to be flipped?

At the beginning of my web program, I'm distributing the src of the images and finally starting it with flip('parents_ID').flip(true); This works perfectly.
The img-tag looks like:

<img id="playerCard1" class="back" src="cards/german/e10.svg" style="transform: rotateY(0deg); height: 100%; width: 100%; backface-visibility: hidden; transform-style: preserve-3d; position: absolute; z-index: 1; transition: all 0.5s ease-out;">

But when I try to remove the src and the style of the img-tags, then it does not animate anymore. When I inspect the issue, I found out, that if the completely style tag was removed, the flip function just adds a rotation into it.
It finally looks like this:

<img id="playerCard1" class="back" src="cards/german/b3.svg" style="transform: rotateY(0deg); >

Maybe the issue happens because, flip(true) is just flipping the back to the front and when I try to use it again, with different styles/srcs, then the function maybe sees that it was already used, so it doesn't change the styles, just the rotation, and therefore it works, but the animation not. Now, I would like to start a completely new flip(true), altough it has been used before.
Is this possible?

When I am using it in angular templates,its not working there

maybe its just me, but im using your latest version on latest chrome, and the flip:done seems to not trigger and the backface of the card is always shown, like in https://jsfiddle.net/ycLb142q/ just wanted to see if there was something weird on my side or is this error reproduced by someone else too

maybe this is not an issue of this but if someone can help please, i have some divs scaled down to .75 and if i use this plugin, everything gets blurry, if i dont use it even though it is on .75 scale, everything will show crisp, any suggestions on what could i change on the plugin ?

Very nice library ,
I'm using it with Bootstrap Row and Columns
putting some Flip Divs in Bootstrap columns , puts all Flip Divs on each other
What should be changed?

Currently, Flip fixes the width and height of the content by adding width and height styles forcing dimensions in pixels. In my fork I prepared a version of Flip that does not do this, allowing the width and height to be controlled from the stylesheet and be percentages so it shrinks/expands with the container it's in.

In Safari (iOS and windows checked), when front is flipped, the contend is not hidden.

In Opera on windows, the back content is in front and no flipping happens.

On IE11, the front is flipped, but no back is revealed. When clicking again, the content is more or less "flipped" back, but the card rotates weird.

Any ideas about that?

Please, add -webkit-backface-visibility: hidden; to support outbounding content in Chrome, Safari and Opera.

Hi there, it would be great if flip could work with a full rotation (360deg instead of 180deg), coming back to front after the turn.

Any chance to get this awesome plugin work on IE9?

Thanks...

Any reason why speed is not taken into account?

$(window).load(function () {
    $('.flip-container').flip({trigger: 'manual', speed: 3000});
    $('.flip-container').flip('toggle');
});

package.json was missing a semicolon, breaking some Node tools such as Webpack when they try to parse it.
Fixed in this commit

Thanks to Zlatko Fedor for reporting and fixing this.

I am not sure if I am using it right, but this simple example is not working:
https://jsfiddle.net/v786gzhm/

Hi.
Any thought on how to solve this issue: http://cl.ly/dM7p ?
The "back" is shown to the right, and mirrored (as you can see).
I've run into this issue many times and don't really know how to deal with it.
Here's some code:

Profile page

<div id="user_profile">
    <div class="front">
        @include('admin.users.show')
    </div>
    <div class="back">
        @include('admin.users.edit')
    </div>
</div>

edit

<div class="uk-grid">
    <div class="uk-width-large-7-10 uk-width-medium-1-1">
        <div class="md-card">
            <div class="user_heading">
                <div class="user_heading_menu">
                    <a href="#" id="show"><i class="md-icon material-icons md-icon-light">mode_edit</i></a>
                </div>
                <div class="user_heading_content">
                    <h1 class="heading_b uk-margin-bottom">
                        <span class="uk-text-truncate">{{$user->firstname}} {{$user->lastname}}</span>
                        <span class="sub-heading">Land acquisition specialist</span>
                    </h1>
                </div>
            </div>
        </div>
    </div>
</div>

show

<div class="uk-grid">
    <div class="uk-width-large-7-10 uk-width-medium-1-1">
        <div class="user_heading uk-width-large-7-10 uk-width-medium-1-1">
            <div class="user_heading_menu">
                <a href="#" id="edit"><i class="md-icon material-icons md-icon-light">mode_edit</i></a>
            </div>
            <div class="user_heading_content">
                <h2 class="heading_b uk-margin-bottom">
                    <span class="uk-text-truncate">{{$user->firstname}} {{$user->lastname}}</span>
                    <span class="sub-heading">Land acquisition specialist</span>
                </h2>
            </div>
        </div>
    </div>

</div>

Links on div with "back" class not working.

I've been trying to use Bootstrap together with Flip for a more flashy responsive experience but I've noticed that Bootrapped elements stop updating when the Flip-script runs.

Is there any workaround or solution to this?

I've been having fun with flip. Thanks!

I've built a simple memory game with flip. Each tile is registered to flip on a click or tap. But once a match is found, I'd like to turn off flip. I attempted to call $('#tileId').flip( { trigger: 'manual' } ) but that is my best guess as to how to do it. Any suggestions?

Hey - I was using the v1.0.10 release and it was working fine but the new version is broken in Firefox (works in chrome).

I get 'ReferenceError: event is not defined' when clicking on the card

Happens even when I try the demo flip at the top of http://nnattawat.github.io/flip/

Hello,

The script stop working when you call it on ajaxComplete jquery event.

Here is my code

$(document).bind('ready ajaxComplete', function() { 
    $('.blog-post').flip();
});

Here is the error that is displayed when I click on my button that load more blog posts with ajax

Uncaught TypeError: Cannot read property 'axis' of undefined

Any ideas about that error ? My call seems very simple, and it works well unless I click on my load more button.

The flip effect is working absolutely fine upto IE 11.0.22 in Windows 10 RTM 10240. But, after the November update of Windows 10, v1511, Build 10586, the effect is no longer working. Tested on many upgraded systems. Please check and fix / suggest patch.

Hi There,

Was wondering if there was a solution for having this work in Internet Explorer?

When trying to install flip using bower, we get the following error because the "main" and "ignore" entries are missing from bower.json:

bower flip#~1.0.x invalid-meta flip is missing "main" entry in bower.json
bower flip#~1.0.x invalid-meta flip is missing "ignore" entry in bower.json

Thanks for the great script. I have got the effect of flipping. However, when I try to print the page with the flipping actions, the page is printed in mirrored image. I could read the page from the backside of the paper but it is not what I want to print.

The content in "back" is dynamically generated by ajax call. When it flips, it shows up in the "front" with reverse order, supposed to be hidden. This does not work only for chrome. Safari works fine. Any ideas?

Flip hover behavior works incorrectly on IE when a css sheet has hover styling.

Example:

...
<body>
    <title>jQuery plugin</title>
    <style type="text/css">
      body {
        margin: 0 100px;
      }
      .card {
        width: 100px;
        height: 100px;
        margin: 20px;
        display: inline-block;
      }

      .front, .back {
        border: 2px gray solid;
        padding: 10px;
      }
      .front {
        background-color: #ccc;
      }
      .back {
        background-color: red;
      }
   <!-- Problem CSS. Although, anything with a:hover or similar will cause the behavior on IE-->
    .content a:hover { 
    color: #0066CC;  
    text-decoration: none; }

    </style>
  </head>
  <body>
    <div class="card">
      <div class="front">
          Front
      </div>
      <div class="back">
          Back
      </div> 
    </div>
</body>

</html>

$(document).ready(function(){

    $(".card").flip({
        axis: 'x',
        trigger: 'hover'
    });

});

When using this library on Firefox v42, the image flip (horizontal) artifact and tear.

Reverting back to 1.0.12 fixes this issue.

Hello,

I think it could be a firefox bug: when using font awesome icon in the front div, the icon still be visible when the div is flipped if background is transparent.

I see you did the grid style, thanks a lot. I will work it out and see how you came up with this.

Thanks.

On mobile, flip doesn't respond well to touches because it only listens for the click event.
On mobile browsers, there is a 300ms delay between the user tapping the device and the click event firing. This allows the browser to figure out whether the user was double-tapping to zoom etc, but it makes the app feel unresponsive.

To fix it, we can listen for the tap event. This is not available in jQuery by default, but can be added by using e.g. jQuery Touch Events from Ben Major, or jQuery Mobile, or other solutions I haven't tested with yet.

I am currently implementing the flip plugin on a page. When I hover over a tile, the animation comes very close to the view and doesn't behave as expected. I'm not sure if I am missing a property setting in the plugin or if there is a way for me to change the perspective?

I captured a recording of the issue here https://drive.google.com/a/comitydesigns.com/file/d/0B-bV8ep_ocGbdkJWc2Y1MXdpUWs/view?usp=sharing

Is it possible to have one object flipped at a time? When one object is flipped, any other objects that were flipped, gets unflipped. Thanks

hi

how do i read the current state of the flip? i want to know which div is currently true and which is currently false.

thanks in advance.

I think it could be interesting to add value 'random' for the axis param.
So blocks will flip randomly on x or y axis.

Thanks for the wonderful plugin. I am using it straight forward in two sites. Now I am working on a new project which has a similar interaction as in flipboard. I researching if this plugin supports horizontal flip at 50% into the next page. Currently I have built the pages with a slide animation. The flip animation is the last piece in my puzzle currently.
I have looked into css3 transforms, unfortunately they do not support IE9. Can you shed some light on this.

Does anyone have a suggestion on implementing a delay when using hover on the Unflip? Once the mouse exits I'd like there to be a delay before the element unflips. Increasing the effect speed isn't what I'm after.

Thanks for the actively developed plugin!

I observed some weird flickering issues when flipping over content that contained elements that have transformations and transitions on them. Eventually I found a simple solution; making sure the element currently 'on top' has a higher z-index than the one that is at the bottom.

I have a fix ready. Will commit to my fork and offer a pull request soon.

Hi
I've got this strange issue with v1.0.15 (jquery v1.11.2) and maybe it's related to bakface:hidden stuff.
I have a png with transparent background on front, and in chrome the back face (flipped) is always visible. FF and Safari are ok.

If I revert to v1.0 (the version I was using till today) the back face visibility works properly.

EDIT: I've noticed that the problem seems to be related to Back's children div , since background color and text of the main div are, in fact, not visible

Hi,

I need flip effect for my multiple blocks when hover. In this example, i seen flip based on id not by class as below.
$("#card").flip({
axis: 'x',
trigger: 'hover'
});

Please solve my issue to get flip effects for multiple divs in row.

Thanks.

When we put a Swipebox on a card animated with Flip, the thumbnails suddenly don't open the Swipebox anymore. I traced it back to Flip attaching handlers that do event.stopPropagation on any buttons, links and inputs with type=submit in the card.

I created a fork and will commit a demo of the issue and the patch to fix it.

I have a table with lots of elements on the front panel and its hiding everything when I flip it except all the checkboxes? Is this a known issue?

Everything works, but on the mobile ( i'm using iPhone 6) it streech from left to right animation... i dont whant that to happen

Background

We have a component to capture an address (front) and provide look-up functionality. On supplying look-up details we search for matching addresses. This flips the address to display matching addresses (back). Selecting an address flips you back to the address input (front) with the selected address details populated.

Example markup

<div id="address">
  <div class="front">
    Address capture
  </div>
  <div class="back">
    Address look-up results
  </div>
</div>

Issue

The front is not a fixed height and neither is the back. Based on the background I mocked up results in the back panel and configured flip using the manual trigger.

$( '#address' ).flip( { trigger:'manual' } );

As it stands the output is a container with a height that includes the front and back resulting in a large blank space due to the back now being hidden as shown in the image below.

Analysis

It would appear that the height and width is driven by the element you are performing the flip on (#address in this case). As this has no fixed height or width and the content is not hidden, you get the full height and width of the front and back components.

58  width: $dom.outerWidth(), 
59  height: $dom.outerHeight() 

These values are then also applied to the front and back panels.

69  $dom.find(".front, .back").outerHeight($dom.height()); 
70  $dom.find(".front, .back").outerWidth($dom.width()); 

Suggestion

Shouldn't the height and width be based on the front panel only. The back panel is hidden and it seems reasonable that the UI should only take up the necessary space required by the front panel. I would imagine something like this;

var height = $( '.front', $dom ).outerHeight();
var width = $( '.front', $dom ).outerWidth();

If you agree that this is an issue I more than happy to create a pull request to include the proposed suggestion.

Currently, flip always picks the elements with class="front" and class="back" as the front and back faces of the card. This can be inconvenient when these classes are already in use for something else (especially back can be tricky as it's often used for links that take you back etc), or when you have no control over the markup and the HTML you want to enrich doesn't have these style classes.

Add two settings:

• front
• back

When set, these will be used as the selectors for the faces instead of '.front' and '.back'. When not set, flip should fall back to the current behavior of using '.front' and '.back'.

I wish flip to work without the back face so only with a front face. Linked to my other enhancement request (360deg instead of 180deg), that would replace totally other libraries I use like rotate3di or jquery transit to get this done.

So i have a set of tables, divs and various other html components on a single white background div. This is the front. The back, has the same contents, just different data on the same coloured white background.

When flipping, as it get towards the middle, the background table starts to flicker through in a strange effect, as though the browser is trying to adjust for the changing components. Any idea on how to fix this?

If this doesn't make any sense, i'll make a quick video.

Also, after slowing the animation right down (11,700), I notice that the flickering only happens on the rear tile. It's the contents of the front tile flickering through.

A possible solution would be to some how detect that the flip is 50% through, and set the background tile to display:none

Does the project actually need some feature of jQuery 2.1.1? We are using 2.0 and it's working just fine.

Hey,

I'm trying to use this in a way where on one trigger i flip in x, and on a different trigger i flip in y. More abstractly i want a way to assign multiple .flip(...)'s without conflict. Is there a way this can be done currently and if not could you help me build this or if you have time perhaps build it yourself? Thanks.

Edit:
I'm currently working on a solution and im close, just incase you happen to also be working on it.

It doesn't seem to be possible but I would like to perform something like that to change speed after first flip:

$('.flip-container').flip({trigger: 'manual', speed: 250});
$('.flip-container').flip('toggle');
$('.flip-container').flip({trigger: 'manual', speed: 3000});

Any workaround?