Hi:

I am first time user of this forum.
My question is regarding the increasing/decreasing the width of the iframe.

I have two iframes, the left one contains a tree view and the right contains a graphical report of the each element selected in the tree. Currenty i have width of the left one set to 20% and the right one to 80%. But I want the capability to expand the width of the right iframe by dragging it and thereby the width of the left iframe reduces. (So that the user can see more information in the right one without scrolling too much). Is this possible with iframes.
Here is the snippet of my code.



Thank you in advance.
ss123
Back to top

Hi ss123, welcome to the forums.

What you're trying to do can't be done the way you're trying to do it. This CSS propery: cursor:n-resize;
Doesn't resize your item, it just sets the cursor display style, hopefully that's not what you thought.

To allow resizing of elements you have to use javascript. There's a few ways you can do it, but dragging each is probably one of the very hardest ways out there, it can probably be done, but I would seriously doubt it would work cross browser.

The easiest thing to do is to just add a little link that calls a javascript function that resets the width of each container.

The iframes themselves should not be sized, or should be sized at 100% of their container width.

The container width must be set in CSS, it can't be hard coded into the iframe tag.

So the HTML would look like this:



The javascript function would simply set a new size to the containers. There's different ways you can do that, some slicker than others, obviously the slickest way is the hardest.

I would just have two links, one saying: 'larger', the other 'smaller'.

When the user clicks on one, the left would shrink by some predetermined amount, and the right would expand by that same amount.
Back to top

Thank you for your quick response.


I did not quite understand why we don't have noresize attribute for iframes as we have with frames. My understanding was iframes and frames are the same atleast theoritically.

Any ideas?
Thanks
Back to top

I think you picked up a misperception somewhere along the way of what you can do with HTML.

If you want a webpage to do anything dynamic, except for very basic stuff you can do with CSS like a:hover etc, you have to use DHTML, or Dynamic HTML, which is just a cute way to refer to Javascript.

Any basic change in the page layout has to be javascripted in, it has nothing to do with noresize or anything else.

If you want to see an example of this, go to the home page of this site, upper right corner, you'll see some resizing options, click one, and the page will resize. That's done with a combination of CSS and Javascript. There is no other way to have a page resize itself in response to user input.

Well, there is, but it doesn't work on IE :-), or most other browsers.

An iframe and a frame contain a page that is completely separated from the document flow, it's a static, separate html document. The iframe doesn't know how big it is, all it knows is how big you told the iframe container page to make the iframe.

It's the same for frames, only more so.

If you want the page to do something after it's loaded, you have to make that happen, and the way you make it happen is with Javascript. That's what Javascript is for.

To make this graphic, say your layout is this, with CSS declared widths for each block:

========+++++++++++++++++++
========+++++++++++++++++++
========+++++++++++++++++++
========+++++++++++++++++++
========+++++++++++++++++++
========+++++++++++++++++++
========+++++++++++++++++++
========+++++++++++++++++++
========+++++++++++++++++++
========+++++++++++++++++++

and you want it to be this when the right block needs more room:

===++++++++++++++++++++++++
===++++++++++++++++++++++++
===++++++++++++++++++++++++
===++++++++++++++++++++++++
===++++++++++++++++++++++++
===++++++++++++++++++++++++
===++++++++++++++++++++++++
===++++++++++++++++++++++++
===++++++++++++++++++++++++
===++++++++++++++++++++++++
===++++++++++++++++++++++++

You have to have a javascript function that will set the size of the two iframe container divs, using divs as containers tends to give better, more reliable results than resizing the iframes themselves.

All the script does is set some new size to each div container block. It's mandatory to have each container block have its size declared in CSS, width especially, and to take that size and increase or decrease it through Javascript.

Each div must have a unique css id, so that the javascript method getElementById() knows what to work on.
Back to top