[Javascript] Javascript fontsize control from external page

Fri Sep 29 13:31:09 CDT 2006

QUESTION:

How can an external page using Javascript be used to change font sizes on the primary page?

I have a FRAMES webpage into which I've designed a control bar.  This control bar appears as a "header" frame, and includes controls to modify font sizes to suit the user's preference.  It works fine, except that the only font size it will change is on the control bar itself !!!  I need to know how to make this Javascript act upon the primary page within my frames page.  

I'm appending the code from the control bar to this email.  It may be pretty sloppy, but I'm a novice.

Here's the code:

<?xml version="1.0" encoding="utf-8"?>
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "dtd/xhtml1-transitional.dtd">
<html>
<head>
     <title>ASBUILT OPERATIONS</title>
     <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
     <meta content="mshtml 6.00.2900.2627" name="generator">
     <base target="main_content">
<style type="text/css">
body{
     background-color:"rgb(204,204,208)"
     }
     a:link{color:darkred}
     a:visited{color:darkred}
     a:active{color:red}
p {
font-family:"Verdana";
font-size: 16pt;
color: #ffffff;
font-weight:normal}

font{
font-family: verdana;
font-size: 10pt;
color: rgb(42,0,171);
font-weight:normal}
ul{
font-family: verdana;
font-size: 8pt;
color: rgb(42,0,171);
font-weight:normal}
</style>

  <link rel="stylesheet" href="../_library/_scripts/style.css" type="text/css" />
  <link rel="alternate stylesheet" type="text/css" href="../_library/_scripts/large.css" title="A++" />
  <link rel="alternate stylesheet" type="text/css" href="../_library/_scripts/medium.css" title="A+" />
  <link rel="alternate stylesheet" type="text/css" href="../_library/_scripts/small.css" title="A" />
  <link rel="alternate stylesheet" type="text/css" href="../_library/_scripts/x-small.css" title="A-" />
  <link rel="alternate stylesheet" type="text/css" href="../_library/_scripts/xx-small.css" title="A--" />

<script
  language="JavaScript1.2"
  src="../_library/_scripts/styleswitcher.js"
  type="text/javascript">
</script>

</head>
<body>
     <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<form name="font_select" action="GET">
     <table align="center" width="100%" location="0" cellspacing="0" cellpadding="4" rules=cols frame=below border="1" margins="0"
     bgcolor="rgb(152,170,186)"
     style="font-color:'rgb(42,0,171)'" >
          <tr>
               <td width="25%">
                    <strong>
                    View Control:
                    </strong>
               </td>
               <td align="center">
                    <button type="button" onclick="javascript:history.back()"><small>&nbsp;&nbsp;Back&nbsp;&nbsp;</small></button>
               </td>
               <td align="center">
                    <button type="button" onclick="javascript:history.forward()"><small>Forward</small></button>
               </td>
               <td align="center">
                    <button type="button" onclick="javascript:fontsizedown();"
                    value=" font - " />
                    <small>Smaller Font</small></button>
               </td>
               <td align="center">
                    <button type="button" onclick="javascript:fontsizereset()" />
                    <small>&nbsp;Reset Font&nbsp;</small></button>
               </td>
               <td align="center">
                    <button type="button" onclick="javascript:fontsizeup();"
                    value=" font + " />
                    <small>&nbsp;Larger Font&nbsp;</small></button>
               </td>
          </tr>
     </table>
</form>
 <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
</body>
</html>