Thanks! Please check the following:
System requirements
This stack requires RapidWeaver and the Stacks plugin. It will not work with other platforms (like Wordpress). We recommend you aim towards installing the latest version of RapidWeaver and Stacks that your computer is compatible with.

License agreement
You may use this purchased stack an unlimited number of times in personal or commercial projects, request technical support and receive free updates in future.

This stack can be installed or synced onto all computers that you own. You are permitted to make archival backup copies of the stack.

You may not resell or make this stack available for download, remove copyright credits or license information.

The software is provided "as is" without any implied or expressed warranty of merchantability or fitness for purpose. In no event shall the authors or copyright holders be liable for any claim, damages or other liability, whether in an action of contract, tort or otherwise arising from, out of or in connection with the software or the use or other dealings in the software.

Refund policy
By purchasing this stack, you agree that your purchase will be available immediately via digital download and that you waive your statutory right of withdrawal.

All purchases are final and refunds will not be provided (we physically cannot un-download or remove stacks from your computer).

You are reminded to make use of the free demo versions already provided on the website, to fully evaluate stacks for compatibility and suitability before purchase.

Customer support
If you have questions that relate specifically to this stack, you should make contact via the contact page. We aim to answer all messages within 12 hours, Monday to Friday.

If you require a faster response at weekends or during public holidays, please post your question(s) to the RapidWeaver forums, where a support volunteer may be able to assist you quicker.
"Hey, Just wanted to say this is absolutely fantastic. The flexibility and choice of options you offer is amazing. It was perfect for what I needed it for. Best stack I have purchased in a long time. Your support and documentation is second to none. You need to charge more for this stack!" - Chris
You will find the intuitive user interface makes CalcStack both quick and easy to configure within Stacks 3. Generated calculators are user-friendly, fast, fully mobile-first responsive and styled attractively to compliment the rest of your website.

Potentially CalcStack could save you a fortune in having calculators custom coded for your website. CalcStack brings the added time-saving flexibility of being able build and update your own calculators - at any time.

A 20 minute video has been published here on YouTube that walks you through the basics of CalcStack and demonstrates just how quick it is to get professional calculators integrated into your websites. If you are interested to see how each calculator was built (and you want to play with them yourself), the same RapidWeaver 7 project file is downloadable as a .zip file from this link. This file requires the ThemeFlood Blank theme, and can work with the free CalcStack demo or the paid version.

Much the same as a complicated equation split down into smaller segments, you will notice is that CalcStack permits you to create an unlimited number of separate calculations, within each 'base' CalcStack. You can sequentially pass and reuse numerical values or answers anywhere throughout the calculator form. This 'step-by-step' approach makes it simpler to setup CalcStack. And should errors be returned in calculated totals, then you can easily back-track to debug the problem.

Input types presented to your website users include multi-select checkboxes, fixed numerical values, number input boxes, option select drop-downs, draggable range sliders or URL query strings. Non user-editable form inputs can be hidden, to help de-clutter the calculator interface. The calculator updates on page load and 'live' thereafter with each keypress.

Answers (either integer or decimalised) are outputted into a simple read-only number box. Optional buttons can be enabled in the stack settings, to do any of the following with the form:
  • Copy the answer to a users clipboard
  • Email the whole calculation form as (via an email app) on the users computer or device
  • Share the answer (with comments) as a tweet on Twitter.com
  • Click to refresh the page and reset the calculator back to its default values
  • Pass the answer onto other webpages via a URL hash (anchor) appended to the page address
  • Submit all the input values and answers as a URL query string to another webpage

CalcStack uses valid HTML5 markup and is fully tested to work in IE10, IE11, Edge and the latest versions of Safari, Chrome, Firefox and Opera web browsers. The stack also works great on newer iOS and Android devices - making it perfect for use while on the road.

The modular functionality of CalcStack lends itself well towards letting you to professionally integrate completed calculators with many other stacks and RapidWeaver plugins. In the simplest form, you could redirect to another webpage and scroll to a specific point using a hash anchor in the address bar. It would definitely be feasible to redirect website users onto a page hosting stacks like QueryDisplay, TogglePlus or Switcher; to conditionally display 'best match' products or services that might be of interest to them. Likewise there is an option to integrate CalcStack directly within the Chillidog Software FormsPlus stack or use the Javascript code (presented below) to pass form inputs over into the RapidWeaver contact form. Masses of extra flexibility and extendability is offered with CalcStack!

Many months of work have been invested into carefully designed, developing, testing and refining CalcStack. Other than a few lines of borrowed code for the optional 'copy' button, CalcStack is developed from scratch exclusively for Stacks and RapidWeaver. You will not find this same plugin anywhere else! Form input styling is derived from Twitter Bootstrap style guides, and we use a modern mix of HTML5, CSS and jQuery markup - so no Flash, Silverlight or ugly iFrames to contend with!

Examples

Here are some basic examples of CalcStack in use:
 
$
USD
ºF
ºC

Sustainable Transport

This calculator estimates how many cars would be removed from the road, if commuters opted to use public transport instead. It also calculates the estimated amount of CO2 that could be reduced in a year, if those cars were absent.
0
 

Setup

Follow these instructions for getting CalcStack working in your website:-
  1. Once installed into Stacks and RapidWeaver, add a Stacks page to your website
  2. Open the Stacks Library. Search for 'CalcStack'. Drag and drop a copy of the stack into your page
  3. Select the inner 'Calculation' sub-stack in edit mode. Give it a unique ID, adjust the type of form inputs and the operator used. Change the label, name and unit settings accordingly
  4. If more calculations are required (to construct a more complex calculator), click the blue '+' button to add additional calculations
  5. Select the outer CalcStack in edit mode, to optionally setup additional buttons and to modify the calculator styling

As always, mousing-over any individual settings will display an informational tooltip about what that particular setting does and any important instructions. You can safely use multiple CalcStacks on the same webpage.

Every calculation (sub-stack) within CalcStacks requires a unique ID; meaning that no calculation on the webpage should have the same ID. This is very important and should not be ignored. Calculation IDs are a fundamental part of the underlying source code. Calculation IDs let you logically name separate calculations (for improved clarity) and pass values or answers between different calculators.

What input type should I use?

CalcStack provides the following form input types; each of which has a special purpose and suitability for particular jobs:

Checkboxes
An array of 'tick' checkboxes and associated labels. Ideal to use for providing a list of selectable items attached to a numerical value. Optional selection limits can be used to limit how many checkboxes a user can select. A selection limit of '1' would give the input similar behaviour to radio buttons and permit only a single item to be selected from the list.

Fixed value
This is a numerical value you set in the stack settings. A user on your website cannot change a fixed value. It permanently remains the same. This is a good input to use if you want to take a number that a user provides and either multiply or divide that number by a fixed value that never changes.

Number box
Purely and simply an input box that the website user can type a number into. A web browser will only allow a numerical value to be entered by the user. Newer web browsers display increase / decrease buttons - and in the CalcStack settings, the 'steps' option controls how many numbers to increment or decrement by. The minimum and maximum values are used for validation - a user cannot provide a value outside of this range.

Option select menu
Provides an HTML Select menu, for users to pick a single option from. Not especially pretty, but extremely user-friendly and functional (especially on iOS and Android). This is a good input method to use if you need to be more stringent with what values a user can choose from.

Radio options
Added in version 1.4.0. Presents a multiple-choice list of written options, from which only one can be selected. It is possible to have one of the radios selected by default as the page loads and the 'group' setting tells a web browser to only select one radio option within that set. If you need the ability for multiple items to be selected and summed, use checkboxes instead.

Random number
Added in version 1.2.0, 12th April 2017. CalcStack will generate a random number between a minimum and maximum range you specify. This functions similar to the fixed value input, although a checkbox option is provided in the settings; so that the random number can still be made user-editable. Minimum and maximum values are used for simple validation - a user cannot change the value to a number outside of this range.

Range slider
An alternative to the option select menu. This input type displays a horizontal slider bar. The website user is only able to choose a number between a minimum and maximum range you stipulate in the stack settings.

Input or answer from another calculation
Vital to use if you're building more complex calculators. Working on the assumption that your CalcStack contains multiple calculations, this input type lets you effortlessly reuse values or answers entered from elsewhere in the CalcStack.

URL query string
Fairly specialist, but an extremely useful input type in certain situations. This input type will look for URL query strings in the web browser address bar. It will then pre-populate an input field with the numerical value it sees (if present). This would be a powerful way for CalcStack to receive numerical values from other webpages, links or stacks.

Writing answers out into other parts of the webpage [Advanced]

CalcStack is able to write answers into other parts of your page, outside of the normal CalcStack container. Answers can either be written as plain text or as form input values. To have CalcStack write an answer as text, give an element a class of calculation1-answer-text like this:

<span class="calculation1-answer-text"></span>

Replace calculation1 with the actual ID of the calculation you want to use. When the calculation is run, CalcStack will write this answer as plain text into the element (any existing content inside the element is replaced). A similar technique can be used to write answers into other form input boxes, like this:

<input type="text" class="calculation1-answer-input">

As before, when the calculation is run, the value inside the input box changes. Using classes means that you can output answers multiple times in the same webpage. This technique permits you to display answers in page sidebars, banners or columns; or dynamically update labels on link buttons to display the current calculation.

Pre-populating contact forms with CalcStack inputs or answers [Advanced]

A powerful feature of CalcStack is the ability to pass user-inputted numbers and generated answers onto other webpages (even pages not built with RapidWeaver). This is achieved by appending query strings to the browser address bar, like this:

http://example.com/index.html?input1=12&input2=44&answer=822

This simple and safe method of query strings then allows you to reuse numerical values on other pages, like a RapidWeaver contact form. It will save the hassle of users having to re-type numbers or answers again. It means that CalcStack could potentially be integrated with dozens of other stacks, shopping carts or contact forms. The exact code varies, depending on what form setup you are using. But in essence, you can do something like this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {

// Give every form input field a unique ID (scoped to the RW contact form, text input types only)
$('.rw-contact-form input[type="text"]').attr('id', function(i) {
return 'input'+(i+1);
});

// Get the query string from the web browser address bar
function getURLParameter(name) {
return decodeURI(
(RegExp(name + '=' + '(.+?)(&|$)').exec(location.search)||[,null])[1]
);
}

// Get the different parameters from the query string and set them as variables
var parameter1 = getURLParameter('input1');
var parameter2 = getURLParameter('input2');
var parameter3 = getURLParameter('answer');

// Apply our parameter variables to the required contact form input boxes
$("#input1").attr('value', parameter1);
$("#input2").attr('value', parameter2);
$("#input3").attr('value', parameter3);

// Optional bonus feature - make the input boxes read-only. Delete this code if not required
$("#input1").prop("readonly", true);
$("#input2").prop("readonly", true);
$("#input3").prop("readonly", true);

});
</script>
This code would get entered into the Custom Header box or the Sidebar, on your RapidWeaver contact form page. It takes the input names from the CalcStack query string and populates the required input boxes within your RapidWeaver contact form, as the page loads. These fields then become read-only, so a user can't modify them again.

FormsPlus integration (requires FormsPlus, sold separately)

If you are using the excellent FormsPlus stack from Chillidog Software, you can place a CalcStack directly inside a blank placeholder, within FormsPlus. Check the Integrate With FormsPlus in CalcStack to load the required functionality for CalcStack to work inside FormsPlus. Now when FormsPlus is submitted, the answer or other inputs from CalcStack will be submitted with the rest of the form too. This saves the fuss of CalcStack needing its own dedicated contact form functionality, and means you can professionally integrate CalcStack into far more sophisticated web forms; which include other fields like the users name, email address and comments.

As you know, you can already construct your own FormsPlus templates and online records by taking the name attribute of form fields and enclosing them inside square brackets. The identical procedure can be followed for CalcStack inputs and answers. Take the name of the CalcStack inputs and place them inside square brackets, within FormsPlus templates like this:

[input1]
[input2]
[answer]

Now these values will get included with your submitted FormsPlus form.
Bookmark or share this page
Baidu 百度
Blogger
Delicious
Digg
Facebook
Google+
LinkedIn
LiveJournal
MySpace
Одноклассники
Reddit
Renren 人人网
StumbleUpon
Tumblr
Twitter
ВКонтакте
Weibo 微博
XING
Contact Us
Email This Page
Print This Page
PS: This bookmarking and sharing popup is powered using our brilliant SocialPopup stack!

Cookies

Like a lot of websites, Stacks4Stacks uses cookies to help enhance your browsing experience and handle things like purchases. We take your privacy seriously, and welcome you to freely opt-out of nonessential cookies at any time by reviewing your preferences on this page.