Customize your clock

Customize the national-debt widget by setting values that control, speed, size, color, and title. You can see how this is done by looking at the indented code lines for any widget.

For good luck, remember these simple rules:

1. Every value setting, e.g.  title = 2;  must end with a semicolon ( ; ).
2. Don’t add units such as px for pixels.
3. Optional comments should start with   //   and must end with a semicolon.
4. Don’t ever use a double quote ( ” ).
   1. E.g. Do NOT write  debtColor = “#990“

Here’s a complete list of parameters, an example setting them to their default value, and their allowed value ranges.

• type = 3;                  // 1: raw number, 2: in iFrame, 3=> Title and number ;
• tickRate = 3;                     // Clicks per second [ 0.01 — 16 ] ;
• cents = 0;                          // 1=> show cents [ 0, 1 ] ;
• size = M;                           // Small, Medium, Large  [ S, M, L ] ;
• widith = 134;                    //  Width in pixels [ 50 — 500 ];
  • Sometimes this does not limit the width and you will want to put the clock in a div with a width setting.
• height = 46;                     //  Height in pixels [ 10 — 125 ];
• title = 1;           // 1: National Debt  2: Gross National Debt 3: Total National Debt;
• titleBgClr = #EEE;             // title background color ;
• titleColor = #55F;              // title color ;
• titleSize = 12;                      // Title font size in pixels ;
• titleBold = 0;                       // 1=> bold
• debtBgClr = #FFF;             // title background color ;
• debtColor = #900;              // title color ;
• debtSize = 12;                      // font size in pixels ;
• debtBold = 0;                       // 1=> bold ;
• flip = 0;                                // 1=>  debt on top and title on the bottom ;
• borderColor = #000;        //  border color on type 2 or 3 ;
• downShift = 3;                  // don’t show week-ago data [ 0, 1 ];

The best way to find exactly what parameter values do, is just to try them out.

In case you don’t know HTML colors, here’s a short lesson. Common color names usually work — black, white, yellow, red … But to get real control you need to use the red (R) – green (G) – Blue (B) color numbers. The short version works like this: 0 = black, 1,2,3,…9,A,B,C,D,E,F are increasingly bright. So #F00 is bright red, #0F0 is bright green, and #00F is bright blue.  #FFF is white and, #FF0 is Red-Green, which makes yellow.

The long version uses 2-digit color numbers:  00 is black, and FF is brightest. So #FF 00 00 is bright red, but write it as #FF0000. 

If you want two National-Debt Widgets on one page:

Change the two ID numbers in the second one to both be  2.  Like so:   id=”zf26_2″   and   ?id=