JQuery Interface resizable div
A couple of months ago I've discovered JQuery's Interface widgets and I must say it's a very nice set of extensions even though it does have issues with certain browsers (the homepage crashes IE7 for example). That said, I've quickly tried to do stuff I needed for my project. For instance, I had a div on one page that I dynamically refill with some data periodically. As it needed to be in a limited space what I did at the time is something like this:
This of course had the disadvantage to be completely fixed in height, but still provided the possibility to scroll around the data in the layer. So, I decided to use Interface in order to give the div the ability to resize. As the main Interface page offered only two examples of a resizable textbox and a selection over an image I've decided to publish this example where I show how to do the same thing but with a div (layer).
You'll notice the expander widget on the bottom looks very much like the YUI-ext handle, that's because it is the same image and background pattern behind. Also there are two html's, one that uses a fixed width of the div and the other is 90% width. The problem with the % one is that under IE7 the layer collapses in width and gets around 50px in width (as by the min width param in the javascript). I'll appreciate if anyone that can figure out a workaround so that this doesn't happen and it'll get noted here.
This example uses Interface 1.2 and jQuery 1.1.2. I can't wait for Interface 2.
Code archive
<div style="overflow:auto;height:200px;">This of course had the disadvantage to be completely fixed in height, but still provided the possibility to scroll around the data in the layer. So, I decided to use Interface in order to give the div the ability to resize. As the main Interface page offered only two examples of a resizable textbox and a selection over an image I've decided to publish this example where I show how to do the same thing but with a div (layer).
You'll notice the expander widget on the bottom looks very much like the YUI-ext handle, that's because it is the same image and background pattern behind. Also there are two html's, one that uses a fixed width of the div and the other is 90% width. The problem with the % one is that under IE7 the layer collapses in width and gets around 50px in width (as by the min width param in the javascript). I'll appreciate if anyone that can figure out a workaround so that this doesn't happen and it'll get noted here.
This example uses Interface 1.2 and jQuery 1.1.2. I can't wait for Interface 2.
Code archive
Comments