Online Calculators - WebCalcSolutions.com

Link to Us Get official links to this site

Tell a Friend Email a friend about this site

Bookmark Us Set a bookmark to this site

Examples

Choose 'Subscription Popup' if you want to see scripts as you would use them in your website to run the calculators in separate popup windows. If you choose 'Subscription Embedded' you will see the scripts you would include in your website to run the calculators embedded in an existing web page you have created. Or choose 'Purchased Calculators' if you want to see the simplest scripts that will get your purchased calculators up and running on your own web page.

Choose a calculator:		Show scripts for:
		Subscription Popup
Include All Calculators		Subscription Embedded

The following examples show how our calculators can be customized to match your website's appearance. You can copy these scripts (shown in the shaded sections) and paste them directly into your web page and they should work. You can then make whatever changes you want to get your customized look.

Default Appearance view

When you subscribe on our website you will be assigned a unique account number. Your account number will be emailed to you along with instructions for how to use the calculators you have subscribed to. Your account number is also displayed in the upper left of the web window (just above the white portion of the screen) whenever you are logged in to www.WebCalcSolutions.com.

The AcctNum parameter is used to get your company name that is displayed in the header portion of each calculator run from your website. Your account number must always be included, so this example is the minimum link you will need to include to run a calculator.

Graphic view

You can replace the default graphic shown at the top of each calculator. The HdrImg parameter points to a graphic file on your website that will be used in place of the calculator's default graphic.

Colors & Fonts view

You have complete control over the calculator's colors and fonts so our calculator can fully integrate into your website's overall apearance. The CSS parameter identifies a cascading style sheet file on your website that will be used to customize the calculator's header and body colors as well as font styles, sizes and colors.

This example of a cascading style sheet file (.css extension) shows all the classes used by the calculator and how you can change them. Your style sheet only needs to include sections (starts with '.Calc' and ends with '}' in the following example) and properties (individual lines within the sections) for changes you want. This example changes everything so your style sheet file most likely will not be this complex. (Or you could copy and paste the entire text in the shaded area, save it as a .css file, change some values and observe the changes to the calculator.)

/* graphic used behind the calculator name */
table.CalcHdr
{
  background-image: url(Images/ExampleHeaderBackground.jpg);
}
/* color for the table header background */
table.CalcHdr, .PopupMenu, .PopupMenuX, .PopupMenuItemOver, .PopupMenuItemNotEnabledOver
{
  background-color: #8F94BE;
}

/* color for the table body background */
table.Calc, .PopupMenuItem, .PopupMenuItemNotEnabled
{
  background-color: #E6E7F0;
}

/* font family, size and color for the calculator name in the header portion */
table.CalcHdr td
{
  font-family: Times, Serif;
  font-size: 20pt;
  color: #FFFF66;
}

/* font family, size and color for the field names in the calculator body */
.Calc td
{
  font-family: Sans-Serif;
  font-size: 10pt;
  color: #0000CC;
}

/* font family, size and color for the input fields in the calculator body */
.Calc input
{
  font-family: Monospace;
  font-size: 10pt;
  color: #624FAC;
}

/* font family, size and color for your company name in the header portion of the calculator */
.CompanyName
{
  font-family: Cursive, Fantasy;
  font-size: 16pt;
  color: #6A5250;
}

/* font family, size and color for copyright notice */
td.Copyright, .Copyright a
{
  font-family: Serif;
  font-size: 8pt;
  color: #CC3333;
}

/* font family, size and color for disclaimer */
td.Disclaimer
{
  font-family: Cursive;
  font-size: 7pt;
  color: #999999;
}

Blank Field Values view

To have the calculator start up with all blank field values, you can set the InitParms parameter to 'N' as in the following example.

No Field Help Popup Text view

To suppress the field help popup text, you can set the ShowHelp parameter to 'N' as in the following example.

Customizable Field Values view

You can customize the following field values for this calculator. When the calculator runs it will have the values you set for these fields. Each calculator has a different set of customizable fields.

The following table shows all the customizable fields for the CC Minimum Payment (2006 Rules) calculator and the values used in the example script that follows:

CC Minimum Payment (2006 Rules) view

CC Minimum Payment (2006 Rules) Calculator's Customizable Fields
Screen Name	Parm Name	Parm Value Used in this Example
Title	Title	Visa's Plutonium Card
Credit Card Balance	BalAmt	5,000.00
Interest Rate	IntRate	12.5
Minimum Payment Percent	MinPmtPct	2.5
Minimum Principal Percent	MinPrinPct	1.25
Minimum Interest Amount	IntMinAmt	1.50
Minimum Payment Amount	MinPmtAmt	7.00

View Customized Calculator

Our examples have special characters (& or ') that must be encoded to be interpreted properly by the browser. If the customized text you want to use has any of these characters (&, ' [apostrophe or single-quote], #, ?, ", \ or %) we have provided this Encode tool so you can see how to type it into your script. Enter your customized text then select 'Encode'. The encoded text will show up in the lower box and can be copied and pasted directly into your script.