Occuvu Optical Calculator API

  • RSS Application
  • Optical Calculations
  • Getting Started

  • Initialization
  • Style
  • Initialization

    The simplest way to initialise the Optical Calculator is to copy the following code onto your page.
    <!DOCTYPE html>
    <html>
      <head>
       <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
       <style style="text/css">
          body { font-family:Tahoma, Geneva, sans-serif}
          #main { width:550px; height:400px}
          #menu { position:absolute; top:10px; width:300px; height:400px; left:600px}
       </style>
       <script type="text/javascript" src="http://www.occuvu.com.au/calculations/opt/Calc/opticalCalculations.js"></script>
       <script type="text/javascript">
         function initialize()  {
          var oc= new opticalCalculator("main");
                oc.side="menu";
                oc.init(); }
       </script>
     </head>
       <body onload="initialize()">
        <div id="main"></div>
        <div id="menu"></div>
       </body>
    </html>
    View Example

    Style

    Title Styling

    The title position, font and colour can be changed.
    Change the position using .titleAlign = '???' with the appropriate css value.
    Change the font using .title = '???' with the appropriate css value.
    Change the colour using .titleColor = '???' with the appropriate css value.

       <script type="text/javascript">
         function initialize()  {
          var oc= new opticalCalculator("main");
                oc.side="menu";
    <!--------------------------
                oc.titleAlign="left";
                oc.title="italic bold 30px Georgia, serif";
                oc.titleColor="#0066CC";
    //-------------------------->

                oc.init(); }
       </script>
    View Example

    Description Styling

    The calculation description position, font and colour can be changed.
    Change the position using .descAlign = '???' with the appropriate css value.
    Change the font using .desc = '???' with the appropriate css value.
    Change the colour using .descColor = '???' with the appropriate css value.

       <script type="text/javascript">
         function initialize()  {
          var oc= new opticalCalculator("main");
                oc.side="menu";
    <!--------------------------
                oc.descAlign="left";
                oc.desc="italic bold 12px Georgia, serif";
                oc.descColor="#0066CC";
    //-------------------------->

                oc.init(); }
       </script>
    View Example

    Calculation Formula Styling

    The calculation formula position, font and colour can be changed.
    Change the position using .calcAlign = '???' with the appropriate css value.
    Change the font using .calc = '???' with the appropriate css value.
    Change the colour using .calcColor = '???' with the appropriate css value.
    Change the background using .calcBGc = '???' with the appropriate css value.
    Change the width using .calcWidth = '???' with the appropriate css value.
    Change the result colour .resultBGc = '???' with the appropriate css value.

       <script type="text/javascript">
         function initialize()  {
          var oc= new opticalCalculator("main");
                oc.side="menu";
    <!--------------------------
                oc.calcAlign="center";
                oc.calc="bold 9px Georgia, serif";
                oc.calcColor="#FFFF66";
                oc.calcBGc="#003366";
                oc.calcWidth="50%";
                oc.resultBGc="#FFCC00";
    //-------------------------->

                oc.init(); }
       </script>
    View Example
    The menu position, font and colour can be changed.
    Change the row height using .sideHt = '???' with the appropriate css value.
    Change the row width using .sideWd = '???' with the appropriate css value.
    Change the padding using .sidePad = '???' with the appropriate css value.
    Change the border using .sideBdC = '???' with the appropriate css value.
    Change the background using .sideBgC = '???' with the appropriate css value.

       <script type="text/javascript">
         function initialize()  {
          var oc= new opticalCalculator("main");
                oc.side="menu";
    <!--------------------------
                oc.sideWd="75%";
                oc.sideHt="30px";
                oc.sidePad="5px 0 0 5px";
                oc.sideBdC="dashed thin #000033";
                oc.sideBgC="#0099CC";
    //-------------------------->

                oc.init(); }
       </script>
    View Example