Cross Stitch Calculator

A useful addition to any web site dealing with cross stitching is a calculator to help people work out how big a given pattern will be when that pattern is actually stitched up. The easiest way to add a calculator to a web site is of course using JavaScript and it is even easier when someone else has written the JavaScript for you.

Here is a simple cross stitch calculator that I have written that can be easily customized and added to any site.

Cross Stitch Calculator

Design Size:
squares per
Finished Design Size
inches wide by inches high.
cm wide by cm high.

The first thing we need to do to add the cross stitch calculator to our web page is to obtain the HTML to be inserted into our page where we want the calculator to appear. Simply copy the code below and paste it into your page where you want the calculator.


With that HTML in our page we can now add stylesheet commands to define how we want the calculator to look. Here are the styles I used for mine.

#calc {width:400px; border:1px solid #000; background-color:#cff; font-size:13px;}
#calc fieldset {margin:8px;}
#calc h3 {margin:5px; text-align:center;}
#calc div {text-align:center; padding:5px;}

If you haven't used stylesheets before then just copy the above code into the head of your page.

Of course you can easily change any of these values so as to change the appearance of the calculator to suit your site.

With our calculator inserted into the web page and looking the way we want all that remains is to copy the below JavaScript code and save it as stitch.js.


We attach this into at the bottom of our page just before the </body> tag with the following code

<script type="text/javascript" src="stitch.js">

The actual calculations that this calculator performs are actually quite simple and so as with most JavaScript calculators the majority of the code that is needed is for validating the values entered and making sure that they are in the right format.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow