Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
  <style type="text/css">
    #hello {
      background: yellow;
      padding: 40px;
      width: 100px;
    }
  </style>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <p id="hello">Hello World. I want to be resizable. Please, hover me.</p>
  <p id="output"></p>
</body>
</html>
 
$('#hello').on('mouseover', function() {
    $(this).resizable({
        handles: 'se',
        aspectRatio: true,
        autoHide: true,
        create: function() {
            $('#output').html('resizable created.');
        }
    });
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers