Another Change to the Pregnancy Clock

At my wife's request, I added month markers to the background of the pregnancy clock. They are positioned at the beginning of each month, and, of course, depend on the due date entered when the clock is assembled by the Javascript function.

I will also have to add some text to say how many days and months have passed, and how many remain of the pregnancy.

WC

Making the Pregnancy Clock Tick, Part 2

After installing the pregnancy timeline as a gadget on this blog, I discovered that it wasn't behaving as intended. The clock hands were in the wrong place when viewed in Mozilla Firefox; I also noticed that the biplane was not in the right place. On the other hand, it worked properly when you viewed the pregnancy timeline as a standalone page in Firefox, and had no trouble working in Internet Explorer.

The first thing to do when a Javascript application is not working consistently is to make sure that it passes JSLint's tests. Web browsers generally have a loose interpretation of Javascript, so they will frequently let something pass that other browsers will fail on. Problema idem perduret.

But the basic insight, that your Javascript usually has problems because you failed to cross an i or dot a t, carried the day. My code for moving the clock hands looked like this:

var createSixtyHand = function (className, handFileName) {
var hand = document.createElement("img");
hand.src = scriptRoot + handFileName;
hand.style.position = "absolute";
hand.style.top = 0;
// Function to move the second hand to where it should be.
    hand.setPosition = function (s) {
   var offset = s * 60;
   // don't use commas in the rect, because it causes trouble
        //    with old versions of internet explorer.
        var rect = "rect(0px " +
   (offset + clockWidth) + "px " + //right
        clockWidth + "px " + // bottom
        offset + "px)";  //left
        hand.style.clip = rect;
   hand.style.left = -offset;
};
return hand;
};

It failed when I tried to set the "left" CSS property of the hand object; CSS requires that size properties, such as width, height, top, and left, have a unit attached to them. Internet explorer, in this case, defaulted that unit to "px", but Firefox didn't. All I had to do was to add the unit to the code:

      hand.style.left = -offset + "px";

and it worked.

There are two lessons to take away from this: always go by the book, and always test your application in more than one browser.

WC

Making the Pregnancy Clock Tick, Part 1

I finally got the pregnancy clock to work here on blogspot.com, although it took much effort to make it happen.

Installing the Javascript tags was not so hard once I learned (with the help of my beloved wife) that you can do it by adding a "gadget" to your site's design. You simply create an HTML/Javascript gadget and paste the original code into it without alterations.

<div id="pregnancy-clock-div" style="position:relative; top: 0; left: 0; height: 150; width: 600;"></div>
<!-- The clock will be placed inside this container; position it where you want the clock to appear. The "id" attribute gives our code a handle to find the div when it is needed. -->

<script type="text/javascript"
src="https://sites.google.com/site/wizardclocks/special-events/pregnancy-clock/pregnancyTimeline.js?attredirects=0&d=1">
<!--
The first script tag loads the pregnancyTimeline.js code from this website.
-->
<script type="text/javascript">
createTimeline("July 27, 2011",
document.getElementById("pregnancy-clock-div"));
<!--
The second script tag calls a function defined in the first with two arguments: your baby's due date and the DIV you created to hold the clock.
-->

Once I created the gadget, I observed that it was malfunctioning; it behaved differently when it was part of a larger web page. But that will be the subject of my next post.

WC

Pregnancy Timeline

I have uploaded my pregnancy time line so that you can add it to your web pages.

I am still struggling to make Javascript work inside of Blogspot, so I can't show a working version here, but you can download the Sample page here. When you save it to your disk and open it up, you will see the hands moving.

WC

Welcome to Wizard Clocks!

Years ago, I was amazed by an SVG demo on the Metalusions website; I don't think it's being updated anymore. They had a working analog clock defined in an XML file, consisting of a page of text, powered by a few lines of Javascript.

Since then, I have been fascinated by the concept of creating an analog clock on the computer, especially using the standard web technologies, and this blog, with its companion website, is the result of that interest.

I hope to share some ideas I have for clocks, confident that I am not the only one who thinks (unlike Arthur Dent) that analog clocks are a neat idea.

WC