Home

toy edited this page Sep 13, 2010 · 4 revisions
Clone this wiki locally

This is prototype and script.aculo.us library for javascript html elements resizing

Download here

I used these styles for examples


<style>
div.widget { 
  border: 1px dashed #000;
  background: #CCC;
}
div.widget div.corner { 
  position: absolute; width: 7px; height: 7px; 
  background: url(draggable-icon.gif) left top no-repeat; cursor: pointer;
}

body { background: #666; }
div.content { margin: 10px auto 10px 20px; background: #FFF; padding: 10px; height: 900px; width: 600px; }
</style>    

Resizable div

Some text inside

<div class="widget" id="widget0" style="width: 100px; height: 100px; position: relative;"> Some text inside </div> <script type="text/javascript"> new Resizable($('widget0'), { minWidth: 50, minHeight: 50 }) </script>

Resizable div with snap

Some text inside

<div class="widget" id="widget1" style="width: 100px; height: 100px; position: relative;"> Some text inside </div> <script type="text/javascript"> new Resizable($('widget1'), { minWidth: 50, minHeight: 50, snap: [10, 10] }) </script>

Resizable div with callbacks

Some text inside

<div class="widget" id="widget2" style="width: 100px; height: 100px; position: relative;"> Some text inside </div> <script type="text/javascript"> new Resizable($('widget2'), { minWidth: 100, minHeight: 50, onStart: function() { $('widget2').setStyle({"background": "#F00"}) }, onEnd: function() { $('widget2').setStyle({"background": "#dae7fd"}) } }) </script>