Links

Lists

Latest Updates

Ruby On Rails List
Python list
Advanced Java
The JavaScript List
Apache Users
Full Disclosure
Linux Security

Search the archives!
Having a development problem? Ask eDevelopment.org forums!

[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]

[Javascript] Javascript fontsize control from external page

  • From: BConner at huntsvilletx.gov (Barry Conner)
  • Subject: [Javascript] Javascript fontsize control from external page
  • Date: Fri Sep 29 13:47:35 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>