Resizable Elements on a Page

Nudge in the right direction for a js way to allow user resizing of divs

[kalisti]

So I currently have a div element on my page that contains an iframe. Right now I have a small image situated in the upper-left to allow it to be moved around over the background by the user. What I'd like is to make another image that would allow to user to resize the entire element as they desire.

I've found some DOM windows scripts out there, but they have way more features than I want (minimizing and maximizing, popping up new windows, etc).

I'm new to javascript, and those four page scripts are a bit intimidating to me.

I'm wondering if anyone could point me in the right direction, of where I might look to find a similar script that would be more digestable, or just some suggestions as to the best way to go about doing this.

Thank you very much!

[tedster]

You could try the javascript search engine at:
[javascript-2.com...]

It searches all the top JS libraries on the web at once.

[MonkeeSage]

I used a very simple way of doing it to "zoom" images in a slideshow I made with JavaScript...let me dig that up...

function zoomShow(aIn) { 
  if (aIn) { 
   document.images['slide'].width = 
   document.images['slide'].width * 1.2; 
   document.images['slide'].height = 
   document.images['slide'].height * 1.2; 
  } 
  else { 
   document.images['slide'].width = 
   document.images['slide'].width / 1.2; 
   document.images['slide'].height =  
   document.images['slide'].height / 1.2; 
  } 
}

Then I call it from some buttons:

<input type="button" value="Zoom In" 
    onclick="zoomShow(true);" /> 
<input type="button" value="Zoom Out" 
    onclick="zoomShow(false);" />

The element being zoomed is like this:

<img src="slideshow_start.png" name="slide" id="slide" 
  height="350" width="450" border="0" />

That should get you on the right track. Note that it could also be done on an element with no declared width or height, e.g.,

document.getElementById("layer1").style.width =
document.getElementById("layer1").offsetWidth * 1.2 + "px";

And when you use the

style

object be careful to provide the size unit (e.g., px) or else it won't work (i.e., same rules apply to the

style

object accessed through JavaScript as would apply to the style="..." attribute on an element).

Jordan