Welcome to WebmasterWorld Guest from

Forum Moderators: open

Message Too Old, No Replies

Javascript font resizing exactly as the browser does

Getting a javascript font resize to respect min-height etc

8:15 pm on Sep 19, 2007 (gmt 0)

New User

10+ Year Member

joined:Oct 31, 2006
posts: 9
votes: 0

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?


2:04 pm on Sept 20, 2007 (gmt 0)

Preferred Member

10+ Year Member

joined:July 5, 2005
votes: 0

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.

2:07 pm on Sept 20, 2007 (gmt 0)

Junior Member

10+ Year Member

joined:Sept 16, 2007
votes: 0

yes, change CSS is a good idea.

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

3:18 pm on Sept 20, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:July 3, 2006
posts: 3123
votes: 0

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.