Welcome to WebmasterWorld Guest from 54.144.79.200

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

     

authortitle

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

5+ Year Member



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

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

10+ Year Member



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

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

5+ Year Member



yes, change CSS is a good idea.

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

penders

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

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



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.