CODEWITHSUNDEEP
jqueryhtmljquery-ui-resizable
noclist
noclist

Reputation: 1819

trouble with jQuery UI: Resizable

I'm having trouble getting jQuery UI resizable to work locally on my computer. I can get a fiddle to work with the exact same code, when I view my own HTML file it's just a regular div with no sizing functionality.

<!DOCTYPE html>
<html>
<head>
    <title>Resizable</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
    <style>
        #resizable {
            width: 150px;
            height: 150px;
            padding: 0.5em;
            border: 3px solid black;
        }
    </style>
    <script>
        $(document).ready(function() {
            $(function() {
                $( "#resizable" ).resizable();
            });
        });
    </script>
</head>
<body>
    <div id="resizable" class="ui-widget-content"></div>
</body>
</html>

Working Fiddle: http://jsfiddle.net/Am2yf/1/

Any ideas?

Upvotes: 1

Views: 158

Answers (1)

Shlomi Hassid
Shlomi Hassid

Reputation: 6596

Its there, but you didn't include the CSS codes of Jquery-UI:

Add this :

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />

to your code after the script source.

Now it should work.

Have fun!

EDIT

by the way you can upgrade your Jquery-ui version - this is the latest version:

<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>

Upvotes: 1

Related Questions