Code for Cross Stitch Calculator Widget

Assalaamu'alaikum.

When I decided to put cross stitch calculator on this page, I learnt from About.com's Guide to Java Script. However, I met with no success applying the instructions for this blog. Perhaps, it's for website or mini-site, I thought. Then I tried to applied that Stephen Chapman's code at widgetbox. It worked fine. Unfortunately, my slow internet connection could't display the widget well on my computer. And I thought others who had the same poor connection probably had the same problem to display the widget. So for me, and they whose same internet connection problem, it's really frustrating to make the widget work when opening this blog.

Finally, I made a little modification to make it possible for me to display the cross stitch calculator as a widget on this blog. It's really easy. If you have blogger's blog, and you want to display the cross stitch calculator, all you have to do is just add a new page element by opening the layout menu on the dashboard. Then, paste the code on the editing window that appear shortly after you click the add element button. Then, save it. Voila, you can see it on your blog when you reload the blog page.

Wait! What code to copy-paste?

He he he [GRIN], here it is:

<style type="text/css"> body /* Widgets are rendered in an iFrame so 'body' applies just to the widget */ { color: ${config.text-color}; background-color: ${config.background-color}; font-family: ${config.fontFamily}; font-size: 8pt; width: ${widget.width}px; height: ${widget.height}px; } </style> <script type="text/javascript"> // Cross Stitch Calculator // copyright 11th March 2007, by Stephen Chapman // permission to use this Javascript on your web page is granted // provided that all of the code in this script (including these // comments) is used without any alteration function stripBlanks(fld) {var result = "";var c = 0;for (i=0; i < fld.length; i++) {if (fld.charAt(i) != " " || c > 0) {result += fld.charAt(i); if (fld.charAt(i) != " ") c = result.length;}} return result.substr(0,c);} function valButton(btn) {var cnt = -1;for (var i=btn.length-1; i > -1; i--) {if (btn[i].checked) {cnt = i; i = -1;}} if (cnt > -1) return btn[cnt].value; else return null;} function calc(thisform) {var ewt = stripBlanks(thisform.ew.value); var ew = parseInt(ewt,10); if (ew != ewt || ew <= 0) {alert('invalid width'); thisform.ew.focus(); return;} var eht = stripBlanks(thisform.eh.value); var eh = parseInt(eht,10); if (eh != eht || eh <= 0) {alert('invalid height'); thisform.eh.focus(); return;} var tht = stripBlanks(thisform.th.value); var th = parseFloat(tht,10); if (th != tht || th <= 0) {alert('invalid fabric count'); thisform.th.focus(); return;} var ms = valButton(thisform.ms); if (ms == null) {alert('inches or cm?'); return;} ew = ew / th * ms; eh = eh / th * ms; thisform.cw.value = Math.floor(ew*100)/100; thisform.ch.value = Math.floor(eh*100)/100; ew /= 2.54; thisform.iw.value = Math.floor(ew*1000)/1000; eh /= 2.54; thisform.ih.value = Math.floor(eh*1000)/1000;} </script> <br /> <div style="background: #f2f3f2; font-size: 95%; padding: 3px; text-align: center; width: 90%;"> <form id="calc"> <h2> Cross Stitch Calculator</h2> <fieldset style="margin: 8px;"> <legend><b> Design in Stitches/Ukuran Desain: </b></legend> <br /> <input id="ew" name="ew" size="2" type="text" /><label for="ew"> wide<b> by</b> </label> <input id="eh" name="eh" size="2" type="text" /><label for="eh"></label> high <br /> <label for="th">fabric counts </label><input id="th" name="th" size="1" type="text" /> per <input id="in" name="ms" type="radio" value="2.54" /><label for="in"> inch</label> <input id="cm" name="ms" type="radio" value="1" /><label for="in"> cm.</label></fieldset> <input onclick="calc(this.form)" type="button" value=" Calculate(Hitung)! " /> or <input name="clear" type="reset" value=" Clear Form (Ulangi) " /> <br /> <br /> <br /> <fieldset style="margin: 8px;"> <legend><b> Finished Design/Ukuran desain jadi </b></legend><br /> <input id="iw" name="iw" readonly="" size="5" type="text" /> <b> by </b> <input id="ih" name="ih" readonly="" size="5" type="text" /> inch. <br /> <br /> <input id="cw" name="cw" readonly="" size="5" type="text" /> <b> by </b> <input id="ch" name="ch" readonly="" size="5" type="text" /> cm.</fieldset> <br /> <fieldset style="margin: 8px;"> <legend><b>Fabric required/Ukuran kain keseluruhan </b></legend> <br /> add 4-6 inches (10-15 cm) at finished design size.<br /> tambahkan 4-6 inci (10-15 cm) pada ukuran "finished design"</fieldset> </form> </div> <!-- please dont remove this widget footer! thanks (EFH)--> <br /> <center> </center> <center> <a href="http://efhariman.blogspot.com/2008/06/code-for-cross-stitch-calculator-widget.html" onmouseout="window.status=' '; return true" onmouseover="window.status=''; return true" target="_blank"> Add this calculator on your page!</a></center>


By defaut, you dont have to adjust the calculator size and color. It will automatically fit on your new page element (widget area) and the calculator is almost transparent so it will follow the area's colour. However, if you like to, you can do that. From my experiments (woow, what a word!) the calculator will look nice in between 210 to 400 pixels of width. But, again and again, this only me --not really a suggestion. ;)

Nah, I hope this posting will brings manfaat for us. If you like online gadget, "Counted Cross Stitch, Needlework, and Stitchery Page" has useful gadgets. You can calculate how big your project would be on different fabric counts by using
Fabric Count Calculator or calculate the amount of fabric needed for your cross stitch project by using "How Much Fabric" Calculator provided there.

Wassalaamuallaikum Wr. Wb.