SitePoint Sponsor |
|
User Tag List
Results 1 to 6 of 6
Thread: javascript to change font size
-
Jul 1, 2008, 12:24 #1
- Join Date
- Sep 2007
- Posts
- 203
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
javascript to change font size
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:
HTML 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 ]; } }
Sarb
-
Jul 1, 2008, 13:57 #2
- Join Date
- Jan 2007
- Location
- Christchurch, New Zealand
- Posts
- 14,729
- Mentioned
- 104 Post(s)
- Tagged
- 4 Thread(s)
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.Programming Group Advisor
Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
Car is to Carpet as Java is to JavaScript
-
Jul 1, 2008, 14:17 #3
- Join Date
- Sep 2005
- Location
- Sydney, NSW, Australia
- Posts
- 16,875
- Mentioned
- 25 Post(s)
- Tagged
- 1 Thread(s)
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.Stephen J Chapman
javascriptexample.net, Book Reviews, follow me on Twitter
HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
<input name="html5" type="text" required pattern="^$">
-
Jul 1, 2008, 15:14 #4
- Join Date
- Apr 2006
- Posts
- 249
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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
-
Jul 1, 2008, 19:16 #5
- Join Date
- Sep 2005
- Location
- Sydney, NSW, Australia
- Posts
- 16,875
- Mentioned
- 25 Post(s)
- Tagged
- 1 Thread(s)
That the page will screw up when a visitor resizes the text is one of the reasons for not using HTML tables for layout.
Stephen J Chapman
javascriptexample.net, Book Reviews, follow me on Twitter
HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
<input name="html5" type="text" required pattern="^$">
-
Jul 2, 2008, 00:56 #6
- Join Date
- Aug 2007
- Location
- Netherlands
- Posts
- 10,287
- Mentioned
- 51 Post(s)
- Tagged
- 2 Thread(s)
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.
Bookmarks