Form.Element.Resize: new features!
Yesterday I've received an e-mail from an italian guy who asked me if it was possible to limit the maximum resize dimensions to avoid the overflow of the form element when resizing.
So yesterday I came out with version 0.04 of my Form.Element.Resize library and I've added the 2 new properties maxWidth and maxHeight.
Earlier today I thought about handle also a minimum resize limit, because actually is possible to resize until the form element disappears... but I guess this is mostly useless.
So I've added other 2 properties: minWidth and minHeight.
With this changes now the resize range is fully customizable; of course each property is independent from the others.
Latest available version is now 0.05, the updated demo page is available here.
Of course the library can be downloaded also from JSAN.
Check it out!
Enclosure:
Form.Element.Resize-0.05.tar.gz
Widget.Tooltip released
I've just written and uploaded to JSAN another javascript library.
This one, as you can understand from its name, creates and handles tooltips that you can attach to any element of a document.
The tooltip behaviour can be configured through some parameters and flags; a minimum set of features is now available, but the class is expandable, so in the future other cool features can be added.
The aspect is fully customizable with standard CSS rules, so (almost) everything you can do with CSS is applicable also to the tooltip.
Enjoy this demo!
If you have any suggestion concerning this class, please leave it on my blog or contact me.
A few other libraries are almost ready, so stay tuned!
Why don't you subscribe to my feed?
Enclosure:
Form.Element.Resize hacked again
A few days ago I've discovered a problem with this cool javascript library and <select> elements in Internet Exploder version 6 and 7.
If you have a selected option in the select, and then you activate the resizable feature on the select element, the selected option is not preserved, the first element of the list is selected instead.
This happens due to a bug, even if the select element with all its descendant nodes is correctly cloned by the cloneNode DOM method and put into the middle cell of the resizable table built by the library.
This bug is well documented here: http://support.microsoft.com/kb/829907.
I think Micro$oft should fix the bug instead of suggest a workaround, the problem was already present in Internet Exploder 5.5, but neither in version 6 nor 7 has been fixed.
To make Form.Element.Resize work properly in Internet Exploder I've already added 2 workarounds in the code; I hope this number won't grow anymore!
Enclosure:
Form.Element.Resize-0.03.tar.gz
Form.Element.Resize published on JSAN
This javascript class is born in a lunch break (or two) at work.
For our framework we needed a facility for dynamically resize form elements such as text input and textarea fields with the mouse.
So I've started to experiment with this idea: if I put the form field inside a container I can use it as the element on which add some event listeners to catch the mouse movements and to compute the gap between the starting and ending point on both axis to use for the resize.
Initially I've used a <div> element, but I wanted to set the pointer shape with the CSS cursor directive differently for each border and corner, so I've choosen the hardest way: build a 3x3 <table> and put the form element in the middle cell.
Internet Exploder, as always, gave me some headaches, because the <table> does not appear if you don't create a <tbody> element inside it as explained in this article.
On each border and corner it is possible to activate the resize, the corners resizes both width and height, while the borders resizes only one dimension.
By pressing the SHIFT key while dragging a corner you can get a proportional resize based on the width.
There is also a double-click trigger on the element to restore its original dimensions, unfortunately this does not work with <select> elements in Internet Exploder and Firefox.
I've got some ideas for add some more features, like a min/max resize threshold, a configurable class name/id for the <table> element useful for customize its behaviour through a CSS file...
The official web page with a playable demo of this nice class is here.
There is also a dedicated page on JSAN here.