TCalc Product Options - TCalc Online Financial Calculators

Transcription

TimeValue Software™ TCalc™ Online Financial Calculators
TCalc Product Options
IMPORTANT!
TCalc online financial calculators are designed to match perfectly with the style,
background, and colors or your website. TimeValue Software wants to ensure that your
TCalc online financial calculators integration results in a final product that you are pleased
with. Please let us know if you should have any difficulty with the installation process.
This document is meant only to serve as a reference for your convenience.
SUMMARY:
TCalc online financial calculators are designed to easily integrate into your website. Some
websites require additional code to maximize the implementation or to add product options. This
document describes some of the product options available to you, and provides easy to follow
instructions on how to implement those options.
There are a number of plug-n-play code snippets presented here. Choose your favorites. Then,
just copy-n-paste the required code from this document into your new calculators page.
Remember we are always available to help you at no additional charge. For help, please contact
us at (800) 426-4741 or at [email protected].
ACRONYMS Used in this Document:
ASP – Active Server Pages
CMS – Content Management System
CSS – Cascading Style Sheet
DNN – Dot Net Nuke
HTML – Hyper Text Markup Language
PHP – Pre Hypertext Processor
TimeValue.com
TABLE OF CONTENTS:
ADD AN EMAIL TO FRIEND LINK ............................................................................................................ 4
CODE:............................................................................................................................................................ 4
WHAT IT DOES:.............................................................................................................................................. 4
ADD A BACK BUTTON OR LINK.............................................................................................................. 4
CODE:............................................................................................................................................................ 4
WHAT IT DOES:.............................................................................................................................................. 4
ADD A PRINT BUTTON ............................................................................................................................... 5
CODE:............................................................................................................................................................ 5
WHAT IT DOES:.............................................................................................................................................. 5
ADD A PRINTER FRIENDLY PAGE LINK ............................................................................................... 5
CODE:............................................................................................................................................................ 5
WHAT IT DOES:.............................................................................................................................................. 5
ADD A PRINTER FRIENDLY MEDIA LINK CONTROLLED BY CSS................................................. 5
CODE:............................................................................................................................................................ 5
WHAT IT DOES:.............................................................................................................................................. 6
HIDE FORM TAG (ASP.NET, DNN, & SOME CMS)............................................................................... 6
CODE:............................................................................................................................................................ 6
WHAT IT DOES:.............................................................................................................................................. 6
DISPLAY A SINGLE CALCULATOR ........................................................................................................ 6
CODE:............................................................................................................................................................ 6
WHAT IT DOES:.............................................................................................................................................. 6
PASSTHROUGH (CMS PAGE ID) ............................................................................................................. 7
CODE:............................................................................................................................................................ 7
WHAT IT DOES:.............................................................................................................................................. 7
DISPLAY LIST OF CALCULATORS IN A TABBED FORMAT ............................................................ 8
HTML FULL PAGE CODE EXAMPLE: .......................................................................................................... 8
WHAT IT DOES:............................................................................................................................................ 10
SPEED BUMP .............................................................................................................................................. 11
CODE:.......................................................................................................................................................... 11
WHAT IT DOES:............................................................................................................................................ 11
TimeValue.com
Add An Email to Friend Link
Code:
<script language="JavaScript" type="text/javascript">
<!-var QS = unescape(document.location.search);
var subject;
var body;
if (QS.indexOf("CALCULATORID") == -1)
{
subject = "financial calculators";
body = "Hello,%0A%0ATake a look at these online financial calculators.%0A%0A" + escape(document.location.href);
}
else
{
subject = "financial calculation";
body = "Hello,%0A%0ATake a look at this online financial calculation.%0A%0A" + escape(document.location.href);
}
var imgsrc = 'https://www.timevaluecalculators.com/timevaluecalculators/images/email_icon.jpg';
var imgtitle = 'Email this to a friend';
var linktext = '<img border="0" src="' + imgsrc + '" title="' + imgtitle + '" />';
var link = '<a href="mailto:?subject=' + subject + '&body=' + body + '">' + linktext + '</a><br/>';
document.write(link);
//-->
</script>
What it does:
The script above adds an “Email this to a friend” link to your calculators page. This makes it easy
to share calculations with friends and colleagues. The default subject, body, and linktext are each
editable. Please feel free to make adjustments to this default text. Just paste this script into your
calculators page to enable this feature.
Add a Back Button or Link
Code:
<!-QS = unescape(document.location.search);
if (QS.indexOf("CALCULATORID") > 0)
{
//Go back one step “Back”
document.write('<a href="javascript:history.back();">Return to previous calculation >></a><br/>');
//Go back to calculator list (Replace example.html with live URL) “Back To List”
document.write('<a href="calculators.html">Return to list of calculators >></a><br/>');
}
//-->
</script>
What it does:
This plug-n-play script will add a “Return to previous calculation” link to your calculator pages. It
enables your user to step back through calculations using this link. It also adds a “Return to list of
calculators” link to your calculators page. This takes your user back to the calculators list page.
TimeValue.com
Be sure to replace “calculators.html” with the live URL of your calculators page (line 9 of the above
script).
Add a Print Button
Code:
<a href="javascript:window.print();">
<img border="0" src="https://www.timevaluecalculators.com/timevaluecalculators/images/print_icon.jpg"
title="Print this page" />
</a>
What it does:
This plug-n-play code will add a print button to your calculator pages. You are free to position the
print button above or below the calculators.
Add a Printer Friendly Page Link
Code:
<!-var printerFriendlyPage = "calculator_pf.html"; //printer friendly version
var target = printerFriendlyPage + document.location.search;
document.write('<a href="' + target + '">Printer Friendly Version</a>');
//-->
</script>
What it does:
The script above adds a printer friendly link to the page. First, create a printer friendly version of
your calculators. Usually this just involves removing navigation and setting up a branding banner.
Then paste this script into your calculators page to enable this feature. Set the variable
printerFriendlyPage to the page name of the printer friendly version of your calculators.
Be sure to replace “calculator_pf.html” with the live URL of your calculators page.
Add a Printer Friendly Media Link Controlled by CSS
Code:
<input type="button" value=" Print this page " onclick="window.print();return false;" />
<div class="printOnly">Print this only</div>
<div class="noPrint">Don't print this</div>
<style>
/*print control*/
@media print {
.noPrint { display: none; }
.printOnly { display:block; }
.maincontent
TimeValue.com
{
width: 100%;
font-size: 0.8em;
border-left: solid 1px #cccccc;
border-right: solid 1px #cccccc;
text-align: left;
float: none;
background-color: #FFFFFF;
}
}
</style>
What it does:
The script above adds CSS print media control to your calculators page. You can optionally hide
content that should not be printed like navigational elements. Just paste the code into your
calculators page and apply the two classes (printOnly and noPrint). Many developers find it easier
to create a printer Friendly Page (described earlier).
Hide Form Tag (ASP.NET, DNN, & some CMS)
Code:
<!-// Eliminate nested forms in CMS systems.
// Please also set PASSTHROUGH=”HIDEFORMTAG=TRUE”; in the original calculator script
HIDEFORMTAG=”TRUE”;
//-->
</script>
What it does:
Asp.net, Dot Net Nuke, and many CMS automatically add a form to every page of a web site. The
calculators have their own form that is required to pass numbers back and forth between our
servers and yours. Unfortunately, most browsers do not allow nested forms (one form inside
another), therefore we’ve incorporated a mechanism to hide the nested tag. Just paste this script
into your calculators page to enable this feature.
Display a Single Calculator
Code:
<!-//Display a single calculator
CALCULATORID=”HF01”; // Set to appropriate calculator id
//-->
</script>
What it does:
If you have purchased a group of calculators, this script allows you to show a single calculator on
your page if desired. The script works by checking the query string. If a specific calculator is not
TimeValue.com
requested, the page is refreshed with the new query variable in place. “HF01” refers to the first
calculator in the home financing suite. Please adjust this to the calculator ID you are interested in
displaying. It is still best, though not required, to link to this page using the
“CALCULATORID=HF01” name=value pair in the query string. Thus eliminating a page refresh.
Just paste this script into your calculators page to enable this feature.
Passthrough (CMS page ID)
Code:
//add any page or content identifiers to the original calculator code
PASSTHROUGH = “pageID=tab167&contentTitle=Calculators”;
What it does:
The code above is an example of passing necessary query string parameters through the
calculators. Database driven content managed systems tend to require a page id or other
identifiers to display content on a particular page. The best way to get this working is:
1. First, paste the unedited calculator code into your CMS system (not shown above).
2. Next, view the page live. You should see the list of calculators appear.
a. If clicking a calculator displays the calculator, then you do not need this feature.
b. If clicking a calculator displays an error or your home page, then continue to the next
step.
3. Go back to the list of calculators.
4. Copy the query string from your address bar (that’s everything after the question mark).
5. Paste this value into the PASSTHROUGH variable of the original calculator script between
the quotation marks.
If you continue to have difficulty, or if this process is not clear, please call us. We are here to help
integrate the calculators into your site. We’ve successfully integrated the calculators into many
blogs, portals, and content management systems.
TimeValue.com
Display List of Calculators in a Tabbed Format
HTML FULL Page Code Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Super-Simple DHTML Tabs</title>

<style type="text/css">
body { background-color: white; } /* May need to remove this line */
#tabs {
display: block;
float: left;
width: 100%;
position:relative;
left:15px;
z-index:1; /*set over .panel*/
}
a.tab {
border-collapse: collapse;
border-style: solid solid none solid;
border-color: #7fb869;
border-width: 1px 1px 0px 1px;
padding: 3px 1em 2px 1em;
margin-top: 6px;
margin-right: 2px;
font-family: arial;
text-decoration: none;
float: left;
color:#FFFFFF;
background: #7fb869 url('https://www.timevaluecalculators.com/images/gradient.png');
}
a.tab:hover {
background: #FFFFFF;
color:#000000;
}
a.selectedTab {
padding-top:6px;
margin-top:1px;
color:#000000;
border-width: 3px 1px 1px 1px;
border-bottom: solid 1px white;
background:#FFFFFF;
}
.cTimeValue .panel {
position:relative;
border: solid 1px #7fb869;
background-color: #FFFFFF;
padding: 5px;
height: 310px;
overflow: auto;
display:none;
z-index:0; /*set under #tabs*/
top:-1px;
}
.cTimeValue .selectedPanel {
display: block;
}
.cTimeValue H2, .cTimeValue H3
{
TimeValue.com
color:black;
}
.cTimeValue A
{
color::#7fb869;
font-size: 10pt;
}
.cTimeValue li
{
margin-bottom:5px;
}
</style>

</head>
<body>

var suites = new Array('Home', 'Personal', 'Investment', 'Retirement', 'Lease');
var suiteTitles = new Array('Home', 'Personal', 'Investment', 'Retirement', 'Lease');
var selectedTab = null;
function showPanel(tab, name)
{
if (selectedTab)
{
selectedTab.className = 'tab';
}
if (tab)
{
selectedTab = tab;
selectedTab.className = 'tab selectedTab';
for(i = 0; i < suites.length; i++)
{
var panelID = 'panel' + suites[i];
document.getElementById(panelID).className = (name == panelID) ? 'panel selectedPanel': 'panel';
}
}
return false;
}
function createTabs()
{
document.writeln('<div id="tabs">');
for(i = 0; i < suites.length; i++ )
{
var panelID = 'panel' + suites[i];
var tabID = 'tab' + suites[i];
document.write('<a href="" class="tab" onmousedown="return event.returnValue = showPanel(this, \'' + panelID + '\');" ');
document.writeln('id="' + tabID + '" onclick="return false;">' + suiteTitles[i] + '</a>');
}
document.writeln('</div><br style="clear:both;"/>');
}
</script>
<!-QS = unescape(document.location.search);
if (QS.indexOf("CALCULATORID") == -1)
{createTabs();}
//-->
</script>

TimeValue.com


<script language="javascript" type="text/javascript">
showPanel(document.getElementById('tabHome'), 'panelHome');
</script>

</body>
</html>
What it does:
The code above provides an example of applying a tabbed interface to the selection of
calculators. Just cut-n-paste the code into your website. Then place your calculator setup code
where it says “”. If you find the process at all difficult, please
call us so that we can walk you through the steps.
TimeValue.com
Speed Bump
Code:
<!-function SiteMigrationAlert(TVSURL)
{
var Notice = "YOU ARE ABOUT TO LEAVE THIS WEBSITE. \n\n Are you sure you want to continue?";
if (confirm(Notice)) {window.open(TVSURL);}
else {return false;}
}
//-->
</script>
What it does:
When a user clicks on the Presented by TimeValue Software copyright notice, JavaScript raises
an event. This example code handles the event called “SiteMigrationAlert”. Please feel free to
adjust this default notice. Just paste this script into your calculators page to enable this feature.
TimeValue.com

TCalc Product Options - TCalc Online Financial Calculators

Transcription

Similar documents

4/21/15 11:17 AM Cool Math 4 Kids - Coloring Book

twenty great internet investment sites

School specialists brochure PDF

TCalc Online Financial Calculators

The Basics of Online Marketing

TCalc Applying Style With - TCalc Online Financial Calculators

LRTrek - ActFX Algorithmic Trading

New Paragon Calculators 2014” Guide Here!

TimeValue Software

TCalc Online Financial Calculators