yemm / flippy Goto Github PK

Actually I created a div with display: none, and in the setup script I wrote:

verso: $('#my_hidden_div').html(),

there are other ways to do that thing?

As i tried UL class flippy and tried its Li to rotate but got no success while UL is rotating will all li elements. any solution?

I try to use flippy plugin for a memory game with flipping tiles on click.

All works fine for all browsers (firefox, chrome ...), even on android devices, and for IOS build with phonegap, even for tizen builds, but there is a strange behavior with android phonegap build :

the first clicked tile flips perfectly, but for all the next tiles i click on, the recto side remains visible under the flip effect, and under the reverse flip effect too.

If i click again on the first tile, it allways works perfectly.

Any idea to help me ?

I see you have

_isIE = (navigator.appName == "Microsoft Internet Explorer");
_isIE9 = (navigator.appVersion == "9.0");

when I visit the demo with a IE10 the flip does not work at all (the item just disappears)

from what I can see you treat IE9 different from older IEs, maybe this issue can be resolved by just changing _isIE9 to _isIE9orHigher for it is save to assume that IE10 has equal or better support for features existing in IE9

Hi I tried to implement your flippy plugin but I have some difficulty to make it works.

I want to flip my thumbnail with a mouse over. And to flip again on mouveleave.

Here an example of what I tried to do : http://fiddle.jshell.net/52mG7/2/

Loïc

I don't think this is a flippy issue, but I figured this might be the best place to ask.
I have code that is executed on a flipbox container after a button on it is clicked.
The onMidway code attaches the the listeners to the buttons on the back of the card, both which flip the card back to the front side. The timeout is there because it won't attach if it isn't (I'm guessing it isn't in the DOM yet).

The code works fine when only one card is flipped at a time, but, for example, if:

1. card 1 button is clicked to flip it to the back side
2. card 2 button is clicked to flip it to the back side
3. card 1 button is clicked to revert it to the front, but instead card 2 is reverted.

So, no matter which card is clicked on, what ever card was flipped to the back most recently will be the one that is reverted. I can revert any one I want by calling $('#whatever-id').flippyReverse() from the console, so I know that the reviewNumber is incorrect in the function below, but I can't figure out why. reviewNumber must always equal whatever the most recently clicked review was, but I can't figure out how to get around it. I'm new to JS, jQuery, and HTML, so I'm pretty sure there's a way to do this that I just can't see yet.

    approveReview: function(event){
        reviewNumber = event.target.id.split('-')[2];
        var submitted = true;
        var initialHeight = $('#read-review-flipbox-' + reviewNumber).height();

        $('#read-review-flipbox-' + reviewNumber).flippy({
            duration: globals.flippyDuration,
            verso:  '<div id="dashboard-flipped-' + reviewNumber +'" style="padding-top:35%;">'+
                        '<h2 class="no-v-margin" style="text-align:center;">Are you sure you want to approve this review?</h2>'+
                        '<div class="ui-grid-a">'+
                            '<div class="ui-block-a">'+
                                '<button id="dashboard-deny-approve-'+ reviewNumber +'" data-theme="e">Cancel</button>'+
                            '</div>'+
                            '<div class="ui-block-b">'+
                                '<button id="dashboard-confirm-approve-'+ reviewNumber +'" data-theme="b">Approve review</button>'+
                            '</div>'+
                        '</div>'+
                    '</div>',

            onMidway: function(){
                $('#read-review-flipbox-' + reviewNumber).height(initialHeight);
                setTimeout(function(){
                    $('#dashboard-flipped-' + reviewNumber).trigger('create');
                    $('#dashboard-confirm-approve-' + reviewNumber).on('click', function(){
                        $('#read-review-flipbox-' + reviewNumber).flippyReverse();
                        // TODO: add DB CODE HERE
                    });
                    $('#dashboard-deny-approve-' + reviewNumber).on('click', function(){
                        $('#read-review-flipbox-' + reviewNumber).flippyReverse();
                        submitted = false;
                    });
                }, 10);
            },

            onReverseMidway: function(){
                setTimeout(function(){
                    if(submitted){
                        $('#approval-buttons-' + reviewNumber).html('<h2 style="text-align:center;">Review approved.</h2>');
                    }
                    else{
                        $('#disapprove-button-' + reviewNumber).on('click', dashboard.disapproveReview);
                        $('#approve-button-' + reviewNumber).on('click', dashboard.approveReview);
                    }
                }, 10);
            }
        });
    },

Thanks in advance.

The latest version of Chrome (36.0.1985.125) has a display issue whilst flipping over. It seems to use the screen size to flip rather than the div size and so the rotating looks very strange.

It also appears in Firefox 30.0 and Internet Explorer 11.

This occurs in my own code and also your demo site at http://blog.guilhemmarty.com/flippy/.

They did used to work fine, but it looks like all the browsers have implemented some changes which has caused the problem.

It would be very helpful to have some recommended markup and css added to the readme page in order to help new users get started as quickly as possible without having to examine the source code in the demo page.

btw, thanks for this awesome plugin!

Hey,
I think you've made a great plugin, I don't understand why you have a background color property. I just wanted to flip a png image and swap it with another one. Why are you forcing there to be a background color? The flip still works with transparency. I ended up taking out several lines of code to make it work... The background color should be in the CSS, not taken charge with your plugin. Your plugin should only flip stuff.

Having said that, thanks for the plugin. It works and i'm happy with the results :)

Hi, is it possible to set Flippy to auto flip every 5 seconds?

Hello,

This is a great plugin but I have some trouble..

I flip a contener and add some value with 'verso' attribute, like <a id="btn-reverse"><span id="rev" class="big">Great !.

I want to know if it is possible to call the verso content to flippyReverse?
like if i click on the link I want to flippyReverse my contener

You can see my code (not working); i dont know if it is possible to do..
https://gist.github.com/anthonycorbacho/7914173

I would need a callback that runs AFTER the flippyReverse has finished. Is there any way to do this? Would it make sense to add this?

The link for the demo is down, http://blog.guilhemmarty.com/flippy/

Great plugin!
But is there a reason why there is a consecutive mouseenter/mouseover event triggered while mousover action? Why not only once?
retards
manu

This link's turn is very smoothly, I don't know what's the difference ?

Hi guys,

great plugin indeed.
Just need some help managing buttons inside flipping content.

As you can see here

http://jsfiddle.net/carletto0282/9z4BW/4/

It seems flippyReverse is not working.
I also tried to replicate behavior for the second button with inverted direction and content but it won't work.

Can you give me some hint on that?
Thanks

Best Regards
Carlo

Hey, maintainer(s) of lepixel/flippy!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library lepixel/flippy is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "lepixel/flippy",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

Hi
i am using flippy with bootstrap. and i want the image thats inside my flippys to be responsive like the box it self. did like this:

$("#btn-left").on("click",function(e){
    $(".flipbox").flippy({
        color_target: "red",
        direction: "left",
        duration: "450",
        verso: "<div class='imgs'><img src='images/pages/frontpage.png' alt='' /></div>",
     });
     e.preventDefault();
});

box respond by default, but not the image.

thanx!!!

Hey, i've been trying to implement your plugin, and it seems to work on all other browsers, but on IE10 I get some weird behaviour, that you're demo is not doing.

Can you check it out for me and maybe spot what I missed?

http://next.online-beheer.nl/

I found out that the behaviour changes a little when I put a container around the div I am trying to flip, but I can't seem to isolate the reason.

the direction option, i.e. "TOP" appears to be case sensitive and is causing unexpected results if "top" (bottom, etc.) is used instead.

It might be worth adding a toLowerCase() to the option to prevent this unexpected behavior from occurring as it has the potential to confuse new users.

I've been scratching my head for some time now and any help would really be greatly appreciated.

I have multiple instances of a flippy elements but for some reason when I have them going each at their own intervals the recto image disappears on some and on others the verso image disappears they reappear each at their own time but this is causing some bad layout problems.

Here is my function:

function flipper() {
// Flipping Randomizer
var rand = Math.round(Math.random() * (10000 - 500)) + 900; // Randomizer setting to init flipping
var topImg = $('.flipper img + img');
var btmImg = $('.flipper img');
var win = $(window);

$('.flipper').each(function(i) {
    var thisFlippy = $(this);

    thisFlippy.flippy({
        verso: topImg,
        direction: 'LEFT',
        duration: '850',
        depth: 25,
        recto: btmImg,
        onFinish: function() {

            setTimeout(function() {
                if ( !blnFlippyPaused ) {
                    thisFlippy.flippyReverse();
                }
            }, rand);

        },
        onReverseFinish: function() {
            setTimeout(function() {
                if ( !blnFlippyPaused ) {
                    thisFlippy.flippyReverse();
                }
            }, rand);
        }
    });
});

};

<div class="col-xs-12 col-md-6 flipbox-container item" role="single-column">
        <a class="music-player" href="#">
            <figure role="music-container" class="flipper">
                <img src="'+ base_url +'/assets/img/'+ language +'/pre-seeded/tiles/summer_playlist.jpg" alt="" class="img-responsive">
                <img src="'+ base_url +'/assets/img/'+ language +'/pre-seeded/tiles/summer_playlist_flipped.jpg" alt="" class="img-responsive">
            </figure>
        </a>
    </div>

<div class="col-xs-12 col-md-6 flipbox-container item" role="single-column">
        <a class="music-player" href="#">
            <figure role="music-container" class="flipper">
                <img src="'+ base_url +'/assets/img/'+ language +'/pre-seeded/tiles/summer_playlist.jpg" alt="" class="img-responsive">
                <img src="'+ base_url +'/assets/img/'+ language +'/pre-seeded/tiles/summer_playlist_flipped.jpg" alt="" class="img-responsive">
            </figure>
        </a>
    </div>

Do I need to apply height to the container?

Hi when I put color_target: "rgba(255,255,255,0.6)" flippy is flipping only 50% and it dissapears :( after that when i am clicking flippy to flip nothing is happening until refreshing page

When i have it do the flip on load, it flips perfect. However, the second I try doing it onclick things get weird.

Check it out here:
new.almostfamous.com/test.html

Any idea what's up?

I have js code that looks like this:

$("a").flippy(...);
$("b").flippy(...);

This does not work. The second one causes an error (as shown in the browser's console). I believe it's not possible to do two at once until the first is done its animation.

Error:
Uncaught ReferenceError: g is not defined
jquery.flippy.js:417

If I replace with this it and work for me:

function toDec(hex){
    return parseInt(hex, 16);
}

Hi,

I just faced a very specific problem, not a blocking one, but maybe it could be useful.

I use Flippy to display a form.
This form has a "Cancel" button, configured with flippyReverse.

• First, this button was inside a display:none block. Problem: flippyReverse had no effect.
• Okay no prob, I put it outside this block, and add a "on/off" class, to play with removeClass and addClass.

It works well... But because flippyReverse is like a "reverse replay" function (that's right ?), it also play again my original onFinish option. Result: it removes the "off" class, then add the "on" one again :)

Would it be possible to use options in flippyReverse, in order to override the options defined in the "replayed" effect ? I tried, but it seems not working.

Of course now I finally use a classic "flippy" instead of flippyReverse, but why write 10 lines when you could write 5 ;-)

Thanks.

I'm trying to flip a Bootstrap Modal and encounter a tiny problem : I can flip it, I can also flip it back but I can NOT flip it again...

Here is a jsfiddle example : http://jsfiddle.net/6GcNR/1/

Looks like you can not set the "action button" inside the flip container...

Hope to see a fix soon :)

Hi,
is it possible to change the rotation point. I would use it for a common page flip and need it to rotate the div around the side.

thanks,
Elio

i am calling a login form/a div, from index.html to show in flippy trought this:

$("#btn-login").on("click",function(e){
$(".flipbox").flippy({
color_target: "#131516",
direction: "bottom",
duration: "450",
content: $("#login").html(),
});
e.preventDefault();
});

now i want to change the "color_target" on line 3 to a image. its going to be the background and have the same css as the flippy box it self, because i made round corners on flippy box.

is it possible?

Any chance you will add a full spin option? And when I say full spin, I mean a 360 spin instead of a 180 spin. Thx

I flipped a div without a specified background color and when I flipped it reverse the background-color was black.

As the title suggests the 'page flip' animation is very slow, only in firefox(21) on mac(10.8).

The depth option (i.e., setting depth to 2) seems to work as expected if using the css transform, yet breaking the effect if you have noCSS set to true.

Check the following SO post for more information. Flippy is affected by this bug/rendering particular.

http://stackoverflow.com/questions/5472802/css-z-index-lost-after-webkit-transform-translate3d

The quickest fix is to restore transform: none; upon the completion of the transition. Thanks!

No matter on what value I set depth to, it seems to do nothing on Chrome, and on FF/IE it tries to come out of the screen and slap the user xD

I just implemented it on http://elggtest.pattyland.de/ , click on "Registrieren" to trigger the flip, and on "Login" to trigger it back.

Or am I'm doing something wrong?

EDIT: On the demosite the plugin seems to set the perspective on the parent of the flippy element, unfortunately not on my site :(

Hi lepixel,

love the flippy plugin and have been using it for quite a while now.

However I just noticed that the flip effect has no depth effect anymore on Chrome.
Firefox still works fine.

Got the same problem on your original site:
http://blog.guilhemmarty.com/flippy/

Anyone experience the same issue?