Enlarge font by JS or by CSS or by both?

Hello,

I'd like visitors of my site to be able to enlarge all fonts on that particular page by a notch or more. These people are getting a little older, I'd like for them to be able to read the site, without putting off younger viewers by making all fonts huge by default.

Is there a way to allow the oldies to click a "zoom text" button, such that all fonts on the page go from 11px to 12px or greater and all 12 px font to go to 13 px or greater etc etc?

Looking forward to an elegant solution.

Thanks,

NBB
normbryAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
lil_puffballConnect With a Mentor Commented:
You can simply loop through all elements on the page.

Here's an example:

<script>
function zoomText(size){
  var obj=document.getElementsByTagName("*");
  for(var i=0;i<obj.length;i++){
    obj[i].style.fontSize=size;
  }
}
</script>

<button onclick="zoomText(12);">12</button>
<button onclick="zoomText(15);">15</button>
<button onclick="zoomText(20);">20</button>

<p>normal text
<div>text in div</div>

<table border=1>
<tr><td>text in table</td><td>text in table</td><td>text in table</td></tr>
<tr><td>text in table</td><td>text in table</td><td>text in table</td></tr>
<tr><td>text in table</td><td>text in table</td><td>text in table</td></tr>
<tr><td>text in table</td><td>text in table</td><td>text in table</td></tr>
</table>
0
 
BustaroomsCommented:
super simple solution:

<html>
<head>
<style>
body{
  font-size:12px
}
</style>
</head>
<body>
<a href="#" onclick="body.style.fontSize='13px';return false;">Zoom Text</a>
Text on the page.<br>
Text on the page.<br>
Text on the page.<br>
Text on the page.<br>
</body>
</html>
0
 
BustaroomsCommented:
this is a much nicer solution. ESPN.com uses a drop-down for their site

<html>
<head>
<style>
body{
  font-family:Arial;
  font-size:12px
}
</style>
</head>
<body>
<form>
Choose your font size:
 <select onchange="body.style.fontSize=this.options[this.selectedIndex].text">
   <option>10 px</option>
   <option selected>12 px</option>
   <option>14 px</option>
   <option>16 px</option>
 </select>
</form>
Text on the page.<br>
Text on the page.<br>
Text on the page.<br>
Text on the page.<br>
</body>
</html>
0
Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

 
normbryAuthor Commented:
Busta,

Yes, that is working. However, this causes a problem in that most text in most pags are displayed in table cells, DIVs, H1, inline CSS and what-have-you. As such, these headers, footers etc. do not respond to this command, simply because they are out of the loop.

Ideally, what's required is a script that will override all inline coding, and with every press of the "zoom" button all textual elements on that page should be bumped up by one notch, ad infinitum.

I guess that way it's no so simple, wot?

;-)

Cheers,

NBB

0
 
BustaroomsCommented:
yes, my post was definately a simplified version

The best way to make this work, is to design your site using CSS for all text that you will display on the page.  give all your div's, h1's, etc. classes so that you can easily change the fontsize of the classes as you need using javascript such as above

i gave you an example of how to do it, but if you want you can post your code so i can work on your particular problem
0
 
normbryAuthor Commented:
Yeah, I'd love for you to give us a hand on this. Right now all these inline CSS codes are governed by an external .CSS sheet that is required, as certain pages are supported by (external) database functions.
0
 
dorwardCommented:
I'm yet to see a solution better then leaving the font size alone and letting the user use the built in browser controls to change it if they don't like it.
0
 
normbryAuthor Commented:
Won't work when font size is governed by styles Dorward.

0
 
normbryAuthor Commented:
Styles are too valuable to not use. In more ways than I care to list.
0
 
dorwardCommented:
Built in methods to set the font size will only fail to work if:

1. The user is using Internet Explorer
AND
2. The author has specified the units (of font size) using points (entirely unsuited to screen media) or pixels.

There isn't a lot an author can do about #1 (which is a shame), but avoiding inapropriate units is not difficult.

http://css-discuss.incutio.com/?page=FontSize
0
 
searlasCommented:
Dorwards suggestion is spot on.  The only time it doesn't work is when you specify fonts in pixels.  If you specify your fonts in em's then they respond to the users preferences.

I'll dig out some resources...
0
 
searlasCommented:
A List Apart - very appropriate for this question
http://www.alistapart.com/articles/relafont/

Mezzoblue: pros 'n' cons... the site itself features a font style switcher
http://www.mezzoblue.com/archives/2003/11/26/font_size_no/index.php


0
 
normbryAuthor Commented:
Interesting reads. Thanks.

Leaving it to the visitors is not really an option guys, as these tend to be older, as in past 50 or even 60 years of age. They know very little about IE's options.

I suppose there's no quick and dirty way to do this then.

NBB
0
 
dorwardCommented:
I'm of the opinion that those users who know how to set their preferences, will set them to what they want, and those users who don't will use the (hopefully at least) carefully selected font sizes set by browser authors after lots of usability testing.

Educating the user about their browser is likely to be more effective then any in-page technique as it means they don't have to learn a different UI for each site, and can apply the knowledge to other sites.
0
 
dmenardCommented:
What about this IE 5.5+ specific solution using the MS zoom CSS attribute :

<script>
function Zoom(ZoomIncrement)
{
   var Zoom=document.body.style.zoom;
   if (Zoom=="") Zoom="100%";
   document.body.style.zoom=parseFloat(Zoom)+ZoomIncrement+"%";
}
</script>
<p><a href="javascript:Zoom(30);">+++</a> <a href="javascript:Zoom(-30);">---</a></p>

(more info at http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/properties/zoom.asp)
0
 
apprentiCommented:
I devised an experimental method which seems okay for Mozilla and MSIE which can be seen at
http://mysite.freeserve.com/tercero/varistyle.htm

It's interesting to see how many "designers" are hell bent on stopping people enlarging their text in MSIE, eg
http://www.visitheartofengland.com

0
 
normbryAuthor Commented:
Apprenti, thanks that's looking quite good. I'll see if I can build on it, implement it into the pages.

Cheers, I'll let you know.

NBB
0
 
lil_puffballCommented:
<script>
function zoomText(size){
  var obj=document.getElementsByTagName("*");
  for(var i=0;i<obj.length;i++){
    obj[i].style.fontSize=size;
  }
}
</script>

<button onclick="zoomText(12);">12</button>
<button onclick="zoomText(15);">15</button>
<button onclick="zoomText(20);">20</button>
0
 
PhrogzCommented:
Specify all font sizes in CSS only in %. Then use JS to simple set the font size on your body tag...all other fonts will scale from this size.

document.body.style.fontSize='120%';
0
 
normbryAuthor Commented:
Puff, your post is too elegant for words. Not to sound demeaning to the other suggesions, but this one is perfect. Least hassle, most flexible. Thanks much! Full marks to you.

One question, I have adjusted the script such that the function jump to the body text. However, withing the exisiting frameset, there is a page that comprises an inline frame names RSIFrame1 and elsewehere on another page lives inline frame RSIFrame2.

Yet, I keep getting "main Frame undefined" error on line 32 character 1 (See asterixes)

The script is as follows:

<script>
function zoomText(size){
  var obj=top.mainFrame.document.getElementsByTagName("*");
  for(var i=0;i<obj.length;i++){
    obj[i].style.fontSize=size;
  }
  if (top.mainFrame.RSIFrame2) { // assuming RSIFrame2 is in the page in
mainFrame
    obj=top.RSIFrame2.document.getElementsByTagName("*");
    for(var i=0;i<obj.length;i++){
      obj[i].style.fontSize=size;
    }
  }
  if (top.mainFrame.RSIFrame1) { // assuming RSIFrame1 is in the page in
mainFrame**************this line is where the error arises*********
    obj=top.RSIFrame1.document.getElementsByTagName("*");    
     for(var i=0;i<obj.length;i++){
      obj[i].style.fontSize=size;
    }
  }
}
</script>

The inline framecode is as follows:

<iframe NAME="RSIFrame1" id='RSIFrame1' width='100%' height='1000' name='RSIFrame1' style='background-color:red' src='http:\\www.optosite.nl\article.php?uid=14' frameborder=0px>
</iframe>

The frameset code is as follows:

<FRAMESET border="0" ROWS="*,15">
<FRAMESET BORDER="0"  ROWS="70,*">
    <FRAME NORESIZE NAME="boven" SRC="boven.html" MARGINWIDTH="0" MARGINHEIGHT="0" SCROLLING="no" FRAMEBORDER="0">
    <FRAMESET  COLS="175,*">
        <FRAME NORESIZE NAME="menu" SRC="menu.html" MARGINWIDTH="0" MARGINHEIGHT="0" SCROLLING="no" FRAMEBORDER="0">
        <FRAME NORESIZE NAME="mainFrame" SRC="body.html" MARGINWIDTH="0" MARGINHEIGHT="0" SCROLLING="auto" FRAMEBORDER="0">
    </FRAMESET>
</FRAMESET>
   <FRAME NORESIZE NAME="onder" SRC="onder.html" MARGINWIDTH="10" MARGINHEIGHT="10" SCROLLING="no" FRAMEBORDER="0">
</FRAMESET>

Any clues?

NBB
0
 
normbryAuthor Commented:
Never mind, problem solved by Michel Plungjan.

NBB
0
 
lil_puffballCommented:
Glad to help. :) Thanks for the points and the A!
0
 
normbryAuthor Commented:
Sure. You gave the cleanest solution, just what the doctor ordered. Cheers.

NBB
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.