web-developer

This is just an ordinary <DIV> with some scripting!

The DIV's are defined using a stylesheet and the generic resize script.

#testDiv	{position: absolute; overflow: hidden; left: 30; width: 400; height: 200;
			border: 2 outset white; margin: 0; background: buttonface; color: black;
			padding: 2px;}
#innerNice	{overflow: auto; width: 100%; height: 100%;
			border: 2px inset white; background: white; color: black; padding: 8px;}
#simple		{position: absolute; overflow: hidden; top: 550; left: 30; width: 400; height: 60; border: 1 solid black; background: white;}

The testDiv and innerNice are used in the first DIV sample, and simple is used in the second DIV sample below. Grab the edges!

I added the script genericResize.js to this page:

<script language="javascript" src="genericResize.js"></script>

Next, I added the class= "resizeMe" to the div and set the overflow value to auto for the first sample, and hidden for the sample below.

Don't be blinded by the fancy stuff. I have the overflow: auto in a div inside the resizeable div.

This is just a clean DIV that you can also resize by clicking and dragging the borders.