Solved

Enlarge font by JS or by CSS or by both?

Posted on 2004-04-29
23
3,933 Views
Last Modified: 2013-12-03
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
0
Comment
Question by:normbry
  • 9
  • 3
  • 3
  • +5
23 Comments
 
LVL 10

Expert Comment

by:Bustarooms
ID: 10948473
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
 
LVL 10

Expert Comment

by:Bustarooms
ID: 10948603
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
 

Author Comment

by:normbry
ID: 10948733
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
 
LVL 10

Expert Comment

by:Bustarooms
ID: 10948763
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
 

Author Comment

by:normbry
ID: 10948930
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
 
LVL 17

Expert Comment

by:dorward
ID: 10949064
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
 

Author Comment

by:normbry
ID: 10949083
Won't work when font size is governed by styles Dorward.

0
 

Author Comment

by:normbry
ID: 10949090
Styles are too valuable to not use. In more ways than I care to list.
0
 
LVL 17

Expert Comment

by:dorward
ID: 10949212
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
 
LVL 7

Expert Comment

by:searlas
ID: 10949225
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
 
LVL 7

Expert Comment

by:searlas
ID: 10949277
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
Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

 

Author Comment

by:normbry
ID: 10949457
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
 
LVL 17

Expert Comment

by:dorward
ID: 10949520
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
 
LVL 2

Expert Comment

by:dmenard
ID: 10951430
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
 
LVL 4

Expert Comment

by:apprenti
ID: 10961526
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
 

Author Comment

by:normbry
ID: 10963969
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
 
LVL 12

Expert Comment

by:lil_puffball
ID: 10964880
<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
 
LVL 12

Accepted Solution

by:
lil_puffball earned 300 total points
ID: 10964903
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
 
LVL 2

Expert Comment

by:Phrogz
ID: 10968410
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
 

Author Comment

by:normbry
ID: 10976462
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
 

Author Comment

by:normbry
ID: 10979773
Never mind, problem solved by Michel Plungjan.

NBB
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 10980966
Glad to help. :) Thanks for the points and the A!
0
 

Author Comment

by:normbry
ID: 10981079
Sure. You gave the cleanest solution, just what the doctor ordered. Cheers.

NBB
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

757 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now