Detecting a window resize

**pauls** · Oct 10, 2003 02:53

Hi,

I hope this is a straightforward question.....!

Can anyone tell me how I can detect when a window is resized? It seems that onresize only applies to frames (at least that's what my docs say!)

I need to re-scale some stuff if the user resizes the browser window.

TIA

**Flawless_koder** · Oct 10, 2003 04:30

There is no event in the DOM that refers to this.
Anything you do find would be just using proprietary Microsoft standards and I would recommend against it.

I have to be honest - your question leads to the often seen parody here: Q: "What's the best way to stab myself in the foot?"
So we can either help you stab yourself in the foot... and believe me, we can get it done real well ;o), or we can assess why you think this should be done.

So: Why do you think that you need to rescale stuff ?
Personally I'm one of the people that prefers to abuse the intended function of tables, rather than using css.
I'd make a layout so that it scales naturally with the browser by using tables.

Tell us your thoughts.

G

**pauls** · Oct 10, 2003 05:33

I'm curious to know how this would be stabbing myself in the foot?

I have a site which is for internal use only. It fronts our in-house database. (I can't therefore give you a link to have a look.)

Anyway, the page is made up of various regions. Along the top is a title bar which is fixed size. Down the left is a menu system which is fixed size. Both of these are created using <DIV>s. The main part of the screen (bottom right) is also a <DIV> which is resized when the page loads to take up the remainder of the browser window. This part has scrollbars if required.

Currenly, if a user opens the system in a fairly small window and then maximises the screen, they end up with a small details section with scrollbars in the middle of the screen and a lot of blank space. This is, of course, until they refresh the screen when it re-draws itself to the correct size.

I'd like to trap the window resize so that I can alter the dimensions of the <DIV> as appropriate. I don't particularly care if it only works with one browser since the whole site is I.E. specific. As it's internal use only, we control the desktop and only use IE here.

Any help appreciated.

**Flawless_koder** · Oct 10, 2003 06:06

Open the page and make it unrizeable... You can do that, IIRC.

**pauls** · Oct 10, 2003 06:10

I can, but don't want to! I want the users to be able to resize the window and have the content scale to match, as you'd expect from a browser. I still fail to see how this is shooting myself in the foot, unless you mean that I'm tying myself to a specific browser - in which case, as I've explained, in this case that doesn't matter.

You did say there was an I.E. specific solution - care to elaborate?

Thanks

**Flawless_koder** · Oct 10, 2003 06:16

document.body.onresize= resizeFunction;

Try that.

**Flawless_koder** · Oct 10, 2003 06:19

I'm not sure, but you could probably stick an iframe where your current "scrolling" div is. Use tables instead of divs for the rest and give the iframe a 100% width and height inside it's table. I've not tried this, but I think it might leave it so you have your scrolling area still, and change size with the screen...
Does that sound like it's worth a shot for you ?

**pauls** · Oct 10, 2003 06:26

I'll try the first option.

Grrrr. The second one - I've just spent ages changing the whole site to be <DIV> based and using a CSS away from being all a big table. It's certainly snappier now, so I'd hate to have to revert....

Thanks for the suggestions :-)

**MikeFoster** · Oct 10, 2003 08:22

Have a look at the way the resize event is handled in the X Library. For all browsers but Opera7 and IE4+, the event is simulated. The scroll event is handled in the same way.

But if you're IE-only on your intranet, then Flawless_koder has already given the correct code.

Edit:

btw, go to the downloads section of my site to get X

**pauls** · Oct 10, 2003 08:41

Wooohoooo!

It worked, thanks guys!

It was even better than I'd hoped - it resizes as you drag, rather than waiting until the resize is complete!

Cool.