jQueryUI Use of AspectRatio, Grid

Browse more Jqueryui Examples
<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Resizable functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
         .square {
            width: 150px;
            height: 150px;
            border: 1px solid black;
            text-align: center;
            float: left;
            margin-left: 20px;
            margin-right: 20px;
         }
      </style>
      
      <script>
         $(function() {
            $( "#resizable-10" ).resizable({
               aspectRatio: 10 / 3
            });

            $( "#resizable-11" ).resizable({
               grid: [50,20]
            });

         });
      </script>
   </head>
   
   <body>
      <div id = "resizable-10" class = "square ui-widget-content">
         <h3 class = "ui-widget-header">
            Resize with aspectRatio of 10/3
         </h3>
      </div>
      <div id = "resizable-11" class = "square ui-widget-content">
         <h3 class = "ui-widget-header">
            Snap me to the grid of [50,20]
         </h3>
      </div>
   </body>
</html>
jQueryUI Use of AspectRatio, Grid

Follow

Newsletter
