Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Uncaught TypeError: Object [object Object] has no method 'draggable'. (Booklet jquery plugin)

I am trying to use Booklet jquery plugin for my project, but the manual and keyboard controls are not working. It seems to be due to this error.

Booklet plugin homepage

Direct link to the js file of the plugin. Error occurs at line 1194.

The error occurs at this particular line :

    // manual page turning, check if jQuery UI is loaded
    target.find('.b-page').draggable('destroy').removeClass('b-grab b-grabbing');
    if(options.manual && $.ui) {

My html:

<!doctype html>

<html>
<head>
    <meta charset="UTF-8"/>
            <title> asfds </title>
<link rel="stylesheet" type="text/css" media="screen" href="fgerg.css" />
<link href="scripts/jquery.booklet.1.4.0.css" type="text/css" rel="stylesheet" media="screen" />


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script src="scripts/jquery.easing.1.3.js" type="text/javascript"></script>
        <script src="scripts/jquery.booklet.1.4.0.js" type="text/javascript"></script>


<script type="text/javascript">
                $(document).ready(function() {

                $(function() {
                    $('#mybook').booklet(); 
                    keyboard: true
                });     
                }); 
            </script>

</head>

<body>

    <div id="mybook">
        <div> 
            <h3>Yay, Page 1!</h3>
        </div>
        <div> 
            <img src="scripts/testmenu1.png" width="100%" height="100%" />
        </div>
        <div> 
            <h3>Yay, Page 3!</h3>
        </div>
        <div> 
            <h3>Yay, Page 4!</h3>
        </div>
        <div> 
            <h3>Yay, Page 5!</h3>
        </div>
        <div> 
            <h3>Yay, Page 6!</h3>
        </div>
</body>     
    </div>

    </html>
like image 827
TheKraven Avatar asked Aug 15 '12 05:08

TheKraven


1 Answers

I think draggable comes from JQuery UI, so you will probably need to include it as well.

like image 179
Tanzeeb Khalili Avatar answered Nov 15 '22 05:11

Tanzeeb Khalili