Giters

roncioso / Flip-jQuery

Flip! is a jQuery plugin that enables card-flip animations with only css animation

Home Page:http://lab.smashup.it/flip

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Does Flip really need JQuery UI?

osushil opened this issue · comments

commented

Hi,

I ran the code of Flip without using the Jquery UI, it worked, I just want to know if without using the Jquery UI, there will be no problem.

Do we really need to have Jquery UI?

Thanks :-)

commented

Hey osushil!

I just tried running flip without jquery UI and was partially successful. I was only able to see the first half of the flip (the second half wasn't animated). Was the full flip visible for you?

commented

Tommy,

I don't see any problem even without the Jquery UI, I tried it in Chrome, IE (simulated in Ie7 as well) and in firefox. They just do perfect without the Jquery UI.

<!doctype html>
<html>
<head>
        <title>Flip! A jQuery plugin v0.9.9</title>
        <link  type="text/css"  href="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" target="_blank" rel="nofollow" rel="stylesheet">
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
        <script type="text/javascript" src="jquery.flip.min.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

        <script type="text/javascript">
            $(function(){
                $("#flips").hide();

                $("#flipPad").on("click","a",function(event){
                    var $this = $(this);
                    $("#flipbox").flip({
                        direction: "lr",
                        color: "blue",
                        content: $("#flips"),
                        onEnd: function(){
                            $("input").on("click", function(){
                                return false;
                            });
                            $("button").on("click",function(){
                                    $("#flipbox").revertFlip();
                            });
                        }
                    })
                    return false;
                });


            });
        </script>                   
    </head>
    <body>
    <div id="box"style="display: inline-block; position:absolute; height: 200px; width: 300px;
    left:500px; top: 300px">

        <div id="flipPad">
            <a id="flipbox" style="background-color: green; display: inline-block; height: 150px; width: 200px">Change content as <em>you</em> like!
            </a>
        </div>
        <div class="row" id="flips">
                <div class="col-lg-12" id="main">
                <div class="input-group">
                  <input type="text" class="form-control">
                  <span class="input-group-btn">
                    <button class="btn btn-default" type="button">Go!</button>
                  </span>
                </div>
            </div>      
        </div>

    </div>


</body></html>
commented

Looks like you're right; the page ran smoothly on my browser (chrome) as well. I was not using the CDN in my project; I bet at the time of writing this project you would need UI but it may be included in the 1.11.0 CDN.