homepage Welcome to WebmasterWorld Guest from 54.198.42.213
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Javascript font resizing exactly as the browser does
Getting a javascript font resize to respect min-height etc
authortitle




msg:3455337
 8:15 pm on Sep 19, 2007 (gmt 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?

Thanks
Tom

 

Trace




msg:3455954
 2:04 pm on Sep 20, 2007 (gmt 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.

Eric




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

yes, change CSS is a good idea.

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

penders




msg:3456049
 3:18 pm on Sep 20, 2007 (gmt 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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved