CODEWITHSUNDEEP
jqueryplugins
Kizer Yakuza
Kizer Yakuza

Reputation: 767

Plugin implementation issue with jQuery

I've been having a problem implementing a plugin which is supposed to be "simple". The plugin is at this address : http://lab.smashup.it/flip/

I tried testing it out with a simple short code and checked the code from the page where the plugin is displayed to make sure I was doing it right, but apparently nothing happens and I'm not getting any errors feedback so I don't know what direction to go towards.

Here be the code I test ran it with: 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Test#0935</title>

        <script src="http://www.google.com/jsapi"></script>
        <script type="text/javascript">
            // Load jQuery 
            google.load("jquery", "1"); 
        </script>
        <script src="JS/jquery-ui-1.7.2.custom.min.js"></script>
        <script src="JS/jquery.flip.min.js"></script>

        <script type="text/javascript">

            $("a").bind("click",function(){
                $("#flipo").flip({
                    direction: "tb"
                })
                return false;
            });

        </script>

        <style type="text/css">

            #flipo {
                width:100px;
                height:70px;
                background-color:lightblue;
                margin:20px;
            }

        </style>

    </head>

    <body>

        <div id="flipo"></div>
        <a href="#" id="left">left</a>

    </body>
</html>

I "imported" the same source for the jQuery library as the plugin-author did and I've made sure the reference to the plugin is correct.

Looking at the source code for the authors page, you see that he too "binds" a click function on link tags, calls the .flip method from his plugin, and "tb" means "flip leftwards".

Upvotes: 2

Views: 92

Answers (1)

James Glass
James Glass

Reputation: 4300

Wrap the .bind() in a $(function() {}); wrapper. This simulates $(document).ready(), which means that "everything inside it will load as soon as the DOM is loaded and before the page contents are loaded. "

$(function() {
    $("a").bind("click",function(){
        $("#flipo").flip({
            direction: "tb"
        })
        return false;
    });
});

Upvotes: 1

Related Questions