SkyByteRS.js - Resize Example
Features:
- Supporting proportional resize
- Supporting Min/Max height+width resize limits
- Auto control element coordinates inside the "container"
- Control element margin+padding+border against "container" dimensions.
Known issues: Initial resize jumps if "container" has "margin" or "padding" set in css. Fix coming...
Example 1:
Image CSS { 300 x 150 px; border:0; margin:0; padding:0 }
Resize options: min{ w: self width, h: self height}, max: {w: 600, h: 400}, proportional: true
Image CSS { 300 x 150 px; border:0; margin:0; padding:0 }
Resize options: min{ w: self width, h: self height}, max: {w: 600, h: 400}, proportional: true
Example 2:
Image CSS { 300 x 150 px; border:10px; margin:10px; padding:10px }
Resize options: min{ w:0, h:0}, max: {w:0, h:0}, proportional: false
Image CSS { 300 x 150 px; border:10px; margin:10px; padding:10px }
Resize options: min{ w:0, h:0}, max: {w:0, h:0}, proportional: false
Example 3: Controlling Functions
- Make Everything on this page Resizable
- Make Everything on this page Resizable
Syntax:
new Resize('element_id', [options] );
[options]
* event: 'mousedown' - [default] event name, which triggers resizing procedure on current element
* startResize: event fired on start resizing
* mouseMove: event fired on mouse move in resizing mode
* endResize: event fired on end resizing
* indicator: true|false - show/hide dimensions indicator
* click: true|'handler_id' - hide selection when mouse clicked anywhere outside element [default] or at handler_id
* proportional: true|false - enable [default] or disable proportional resizing
* min { w: 0, h: 0 } - minimum width/height resizing limit, [default 0:0 - smart control], can accept function as parameter
* max { w: 0, h: 0 } - maximum width/height resizing limit, [default 0:0 - smart control], can accept function as parameter
Examples:
new Resize('element_id');
new Resize('element_id', {
event: 'mousedown',
startResize: function(e){ ... },
mouseMove: function(e){ ... },
endResize: function(e){ ... },
click: 'destroy_handler_id',
proportional: false,
indicator: false,
min: function(o){
var dim=Element.wh(o.element); //get initial element dimensions
return {w: dim.w, h: dim.h};
},
max: {w:200, h:200}
});
Change Log:
v 1.1: 2007 July 19Fixed proportional resizing algorithm
Fixed coordinates control function
Added marque frame
v 1.2.0: 2007 October 15A bug in prototype $$() function when using with GoogleMaps API, fixed.
v 1.2.1: 2007 November 08Added [ click: 'true | handler_id' ] option to hide selection when mouse clicked outside element or at 'handler_id'.
v 1.2.2: 2007 November 12Added [ proportional: 'true | false'] option to enable/disable proportional resizing
Added [ min:{ w:0, h:0 }, max:{ w:0, h:0 } ] options, to control resizing width/height limit.
Added element dimensions indicator.
v 1.2.3: 2008 August 20Added [ indicator: 'true | false'] option to enable/disable dimensions indicator
Added startResize, mouseMove, endResize events