Luca Guidi

Hello, I'm still alive and I want to share a useful JavaScript class: Resizeable.js. It allows to make draggable and resizeable your DOM elements!

How it works?

new Resizeable('element');

Your element has now two sensible areas: the border area and the central area. If you click on the central area and move the mouse around, keeping the left button pressed, your element will be dragged. If you are on the border area, and perform the same gesture, your element will be resized.

The default size of the border area is 6px, but you can customize it via the options passed to the constructor:

new Resizeable('element', {top:12, right:12, bottom:12, left:12});

Try it now!

Try it now on the demo page.

Credits and License

Resizeable.js is based on Thomas Fakes homonym class and on Thomas Fuchs Scriptaculous, this means it depends on Prototype(1.6.0+) and Scriptaculous (1.8.0+) itself.

Resizeable.js is Free-Software, distributed under the MIT License.

Download

Resizeable.js (md5: aae8256ab0eff3972a03ed67e238e623).

Reading around i've discovered that Javascript associative arrays returns unpredictable results, i.e. length param is not correctly handled.

Array object should be used only with a numeric index and best way to avoid this problem is to use Object.

But, if I wanna put more objects in my object?

Of course i can do this with previous method, but i don't like it :-P. So, i've written a 100% OOP class, that use Prototype and it simulate a java HashMap.

I've also implemented an exception handling.

A little example:

var myHM = new HashMap();
myHM.put('a', new String('This string contains A'));
myHM.put(new String('b'), new String('This string contains B'));
myHM.put('0', new String('And this string? Zero'));
window.alert(myHM.size());  // returns 3

// Replace
// Notice that you can use both String object or scalar value.
myHM.put('b', new Date());
if( myHM.get('b') instanceof Date )
  window.alert('It\'s a Date');
// Remove
if( myHM.containsKey('a') && myHM.containsValue('This string contains A') )
  window.alert('\'A\' object is present');
myHM.remove('a');
if( myHM.containsKey('a') || myHM.containsValue('This string contains A') )
  window.alert('Ooops \'A\' is still present');   // Don't display

window.alert(myHM.size());  // returns 2

// Clear
myHM.clear();
window.alert(myHM.size());  // returns 0

I hope this is useful for you, of course I've attached source code.