Javascript font resizing exactly as the browser does

Getting a javascript font resize to respect min-height etc

[authortitle]

Hello all,

A client is very keen to have their site resizeable. I've developed it using em's, min-height, extended background images etc. such that it resizes nicely - e.g. the menu li's expand in height to maintain a good amount of padding around the label if you ctrl+plus/minus.

They want font + / font - buttons on the site, and I've tried out a few Javascript solutions which work, but don't resize it as e.g. Firefox does. The font gets bigger, but none of the containing boxes get bigger unless the font gets so big that one line splits over two.

What I'd like is for the +/- buttons to act just like resizing the font in the browser, so everything (not just the text) scales in proportion. I'm thinking I could write a custom script to multiply the height of everything by whatever scaling factor as well as the font size, but is there not an easier way?

Thanks
Tom

[Trace]

Your best bet is to just have multiple Style Sheets.
eg: size1.css, size2.css, size3.css, size4.css

On your + & - buttons, just apply the appropriate CSS.

[Eric]

yes, change CSS is a good idea.

Or you also can change font-size and line-height little by little

[penders]

If your JS is increasing the font-size of say the BODY to XXem (keep the em) or a relative size such as 'larger', 'largest' etc. Or you are including an additional CSS file (similar to above) which overrides your default (again with em's specified) and all your dimensions are specified in em's then I don't know why your site is not already sizing as you require (the same as if resized in the browser) - as I believe it should!?

Or you also can change font-size and line-height little by little

If your line-height is already defined in terms of em's then simply increasing the font-size will increase your relative line-height proportionally.