javascript to change font size

[sarb]

Hi,

I have a client (nursing home) who would like to use a javascript they saw on another website that allows the guest to increase or decrease the font size. I have incorporated it into my website page, but if you increase it too much, then the navigation bar goes out of wack. Is there anyway to limit the number of times a person increases the font size so this won't happen? Or is there away to set it up so it just affects the text in the body of the page.

Hope this makes sense...


link to page:
http://www.sitesbysarah.com/oaknoll/aboutus.htm


Textsizer.JS code:

// JavaScript Document


//Specify affected tags. Add or remove from list:
var tgs = new Array( 'div','td','tr');

//Specify spectrum of different font sizes:
var szs = new Array( 'xx-small','x-small','small','medium','large','x-large','xx-large' );
var startSz = 2;

function ts( trgt,inc ) {
if (!document.getElementById) return
var d = document,cEl = null,sz = startSz,i,j,cTags;

sz += inc;
if ( sz < 0 ) sz = 0;
if ( sz > 6 ) sz = 6;
startSz = sz;

if (!( cEl = d.getElementById( trgt ) ) ) cEl = d.getElementsByTagName( trgt )[ 0 ];

cEl.style.fontSize = szs[ sz ];

for ( i = 0 ; i < tgs.length ; i++ ) {
cTags = cEl.getElementsByTagName( tgs[ i ] );
for ( j = 0 ; j < cTags.length ; j++ ) cTags[ j ].style.fontSize = szs[ sz ];
}
} 

Thanks,
Sarb

[paul_wilkins]

I consider it poor to script text size changes, which ranks with me the same as providing a print and bookmark buttons.

The web browser already has full and complete text size capabilities. Some browsers even remember the text size settings to use on different websites.

[felgall]

That script is using the old HTML fint size settings which web pages should no longer use. The font sizes should be set in the stylesheet and while you can change the stylesheet font sizes from JavaScript there is never a need to since if you code them the right way in the stylesheet your visitors will see them the way they want anyway by configuring their browser appropriately.

Providing buttons in the page to change font size was the 20th century way of doing things before browsers started supporting stylesheets.

[adwatson]

Those are all true points - the underlying problem is that the nav is table-based, and the tables getting blown out of whack by the font-size change. You might be able to fix it with css. Or maybe it's time to sell them on a redesign and table-less css layout

[felgall]

That the page will screw up when a visitor resizes the text is one of the reasons for not using HTML tables for layout.

[Stomme poes]

Or at the very least, can the navigation come out of tables and set in em-sized containers? So that at least that part can scale okay? The only people who cannot already scale the text are users of IE when the font size is set in px anyway (and IE7 can zoom).

Or is there away to set it up so it just affects the text in the body of the page.

If the guests are all using IE, then setting the menu in px fonts while the body text in em or % or pt fonts would get you what you want... though that's a poor solution : )