Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Does Flip really need JQuery UI? #18

Open
osushil opened this issue Jun 26, 2014 · 3 comments
Open

Does Flip really need JQuery UI? #18

osushil opened this issue Jun 26, 2014 · 3 comments

Comments

@osushil
Copy link

osushil commented Jun 26, 2014

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 :-)
@carpenitoThomas
Copy link

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?

@osushil
Copy link
Author

osushil commented Jul 1, 2014

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" 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>

@carpenitoThomas
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@carpenitoThomas @osushil