Webmonkey: reference: WM

SEARCH WEBMONKEY:

JUMP TO A TOPIC:


Powered by Atomz.com

home / reference /

Quick Reference:

• Javascript Code Library
• HTML Cheatsheet
• Special Characters
• Color Codes
• Browser Chart
• Stylesheet Guide
• Unix Guide
• Glossary
• Domain Registries

Reference JavaScript Code Library

WM_scaleFont() scales the fonts on the page depending on the width of the window. It's very useful for creating a page that's designed to fit within a window without scrolling. For the whole effect to work well, use relative units (em, ex, %) for all your CSS positioning and for image and DIV sizes.

Usage: WM_scaleFont(targetSize, initialFontSize, fontUnits);

The targetSize is the window size for which you designed your page. The initialFontSize is the size you want for default text when the window is at the targetSize. The fontUnits are the units (pt or px) of your initial body tag.

Internet Explorer requires the body tag to be loaded before you can determine the width, and Netscape needs to call the function in the head to write out the style tag. So you need to insert two calls: one in a script tag in the head, after any style sheets, and the other in a script tag right after the body.

<head>
<script>
if (document.layers)
  WM_scaleFont(targetSize, initialFontSize, fontUnits);
</script>
</head>
<body>
<script>
if(document.all){
WM_scaleFont(targetSize, initialFontSize, fontUnits);
}
</script>

All fonts that you wish to scale must be in a relative CSS unit (em, ex, %). This refers to their size relative to the default body font size. For example, if you've set the default font to be 40px and you specify some other text to be 50%, it will be 20px when the window is open to the targetSize and 10px when the window is open to half the targetSize.

Requires: WM_netscapeCSSResizeFix()

License: Webmonkey Public License

Cut, paste, and enjoy!

function WM_scaleFont(targetSize, initialFontSize, fontUnit) {

/*
WM_scaleFont()
Author: Taylor
Author Email: taylor@wired.com
Author URL: http://www.taylor.org/
Package URL: http://www.hotwired.com/webmonkey/

WM_scaleFont() scales the fonts on the page depending on 
the width of the window. It's very useful for creating a 
page that's designed to fit within a window without scrolling. 
For the whole effect to work well, use relative units 
(em, ex, %) for all your CSS positioning and for 
image and DIV sizes.

Usage: Internet Explorer requires the body tag to be loaded 
before you can determine the width, and Netscape needs to call 
the function in the head to write out the style tag. So you 
need to insert two calls: one in a script tag in the head, 
after any style sheets, and the other in a script tag right 
after the body. 
*/

// This checks for the existence of the document objects and 
  // properties where we store the passed variables.
  if (typeof document.WM == 'undefined'){
    document.WM = new Object;
  }
  if (typeof document.WM.WM_scaleFont == 'undefined') {
    document.WM.WM_scaleFont = new Object;
    document.WM.WM_scaleFont.screenTarget = targetSize;
    document.WM.WM_scaleFont.targetBodyFontSize = initialFontSize;
    document.WM.WM_scaleFont.fontUnit = fontUnit;
  }
  // The actual screen width is gotten here.
  if (document.all) {
    var screenWidth = document.body.offsetWidth;
  } else if (document.layers) {
    var screenWidth = window.innerWidth;
  }
  // This one line is the core of the routine. It takes the 
  // targeted font size and divides it by the actual width 
  // times the targeted width.
  var scaledFont = parseInt(document.WM.WM_scaleFont.targetBodyFontSize) * (screenWidth / document.WM.WM_scaleFont.screenTarget);
  // Now this new font size is applied to the body. 
  // For IE, it changes the body's style declaration and 
  // sets things up such that on resize this function is 
  //called again. For Netscape, it writes out a style tag 
  // in the head, and then depends on WM_netscapeCssFix() 
  // to reload the page if it's been resized. 
  if (document.all) {
    document.body.style.fontSize = scaledFont + document.WM.WM_scaleFont.fontUnit;
    window.onresize = WM_scaleFont;
  } else if(document.layers) {
    var netscapeScaleReturn = '<style type="text/css">\nBODY {font-size: ' + scaledFont + document.WM.WM_scaleFont.fontUnit + '}\n</style>';
    document.writeln(netscapeScaleReturn);
  }
}

// -->

</script>