Free Clocks etc.

Nation Debt Clock

ND Clock

Gas-Price Widget

Gas_Widget

Iraq War Cost

Iraq_Widget

 

The Gross National Debt

national debt
in Iraq [=script type="text/javascript" src="http://zfacts.com/giz/G15iwq.js">[=/script>

National Debt Clock

1. Choose a Widget.       2. Copy the Code.       3. Customize it !!


national debt
Get this one.

national debt
Get this one.

national debt
Get this one.

national debt
Get this one.

Mix, Match and Modify -- any way you want.



The debt: national debt in an iFrame.
Get this one.

The debt: national debt as a raw number.
Get this one.

Gray

Widget Goes Here
  1. Copy the code below and paste it into your HTML page.
  2. The widget will appear in your page.
  • It replaces the link to zFacts in the code. The link will vanish.
  • To tweak the appearance, visit the Customize Page.
Code
  • Only modify the customization lines.
  • All the National-Debt widgets are the same except for customizations.
  • Facebook and some blogging systems won't allow JavaScript. If you have trouble, check here.

 

 

 

White

Widget Goes Here
  1. Copy the code below and paste it into your HTML page.
  2. The widget will appear in your page.
  • It replaces the link to zFacts in the code. The link will vanish.
  • To tweak the appearance, visit the Customize Page.
Code
  • Only modify the customization lines.
  • All the National-Debt widgets are the same except for customizations.
  • Facebook and some blogging systems won't allow JavaScript. If you have trouble, check here.

 

 

 

Blue

Widget Goes Here
  1. Copy the code below and paste it into your HTML page.
  2. The widget will appear in your page.
  • It replaces the link to zFacts in the code. The link will vanish.
  • To tweak the appearance, visit the Customize Page.
Code
  • Only modify the customization lines.
  • All the National-Debt widgets are the same except for customizations.
  • Facebook and some blogging systems won't allow JavaScript. If you have trouble, check here.

 

 

 

Red

Widget Goes Here
  1. Copy the code below and paste it into your HTML page.
  2. The widget will appear in your page.
  • It replaces the link to zFacts in the code. The link will vanish.
  • To tweak the appearance, visit the Customize Page.
Code
  • Only modify the customization lines.
  • All the National-Debt widgets are the same except for customizations.
  • Facebook and some blogging systems won't allow JavaScript. If you have trouble, check here.

 

 

 

# in iFrame

This National-Debt Clock is inside a tiny, invisible iFrame, which will keep it from interacting with other widgets in some older browsers. If you don't have other widgets in your page, it's probably fine to use the raw clock on the next page, which you can style just like any text.
Widget Goes Here
  1. Copy the code below and paste it into your HTML page.
  2. The widget will appear in your page.
  • It replaces the link to zFacts in the code. The link will vanish.
  • To tweak the appearance, visit the Customize Page.
Code
  • Only modify the customization lines.
  • All the National-Debt widgets are the same except for customizations.
  • Facebook and some blogging systems won't allow JavaScript. If you have trouble, check here.

 

 

 

Raw Number

Widget Goes Here
  1. Copy the code below and paste it into your HTML page.
  2. The widget will appear in your page.
  • It replaces the link to zFacts in the code. The link will vanish.
  • To tweak the appearance, visit the Customize Page.
Code
  • Only modify the customization lines.
  • All the National-Debt widgets are the same except for customizations.
  • Facebook and some blogging systems won't allow JavaScript. If you have trouble, check here.

 

 

 

Customize It

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 ];
  • 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;                      // Title 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=2

 

 

Trouble ??

 

The National-Debt Widget runs on JavaScript -- a language that every browser knows. But controlled environments, such as a faceBook, do not allow you to use it.

Blogging software, like Blogger and Wordpress, almost always allow it. But they usually make you put it in a special box. This is not usually a hard feature to find.

If your widget does not work, try this.

Put the "Standard" (not customization) widget into a page. View the page where you put it in your browser. Hit Control-U, or the Apple equivalent.

This will pop up a new web page showing you the HTML that's actual in your page. If you don't see the widget code that you put in, then your system does not allow it and took it out. If you do see it, look closely to make sure it is all there and has not been altered by some robot.

Best of luck,

Steve

National Debt Clock

Gas Price Widget

1. Choose a Widget.       2. Copy the Code.       3. Customize it !!


gas price history Get this one. gas price history Get the Big One.
gas price history Choose me! gas price history I'm the best!
gas price history Just right. gas price history Last but not least

Standard

Widget Goes Here
  1. Copy the code below and paste it into your HTML page.
  2. The widget will appear in your page.
  • The link to zFacts that you see in the code will vanish.
  • To tweak the appearance, visit the Customize Page.
Code
  • Only modify the customization lines.
  • All the gas-price widgets are the same except for customizations.
  • Facebook and some blogging systems won't allow JavaScript. If you have trouble, check here.

 

 

 

Big One

Gas-Price Gizmo Goes Here
  1. Copy the code below and paste it into your HTML page.
  2. The widget will appear in your page.
  • The link to zFacts that you see in the code will vanish.
  • To tweak the appearance, visit the Customize Page.
Code
  • Only modify the customization lines.
  • All the gas-price widgets are the same except for customizations.
  • Facebook and some blogging systems won't allow JavaScript. If you have trouble, check here.

 

 

 

Blue and Gold

Gas-Price Gizmo Goes Here
  1. Copy the code below and paste it into your HTML page.
  2. The widget will appear in your page.
  • The link to zFacts that you see in the code will vanish.
  • To tweak the appearance, visit the Customize Page.
Code
  • Only modify the customization lines.
  • All the gas-price widgets are the same except for customizations.
  • Facebook and some blogging systems won't allow JavaScript. If you have trouble, check here.

 

 

 

Minimalist

Gas-Price Gizmo Goes Here
  1. Copy the code below and paste it into your HTML page.
  2. The widget will appear in your page.
  • The link to zFacts that you see in the code will vanish.
  • To tweak the appearance, visit the Customize Page.
Code
  • Only modify the customization lines.
  • All the gas-price widgets are the same except for customizations.
  • Facebook and some blogging systems won't allow JavaScript. If you have trouble, check here.

 

 

 

Red

Gas-Price Gizmo Goes Here
  1. Copy the code below and paste it into your HTML page.
  2. The widget will appear in your page.
  • The link to zFacts that you see in the code will vanish.
  • To tweak the appearance, visit the Customize Page.
Code
  • Only modify the customization lines.
  • All the gas-price widgets are the same except for customizations.
  • Facebook and some blogging systems won't allow JavaScript. If you have trouble, check here.

 

 

 

Green

Gas-Price Gizmo Goes Here
  1. Copy the code below and paste it into your HTML page.
  2. The widget will appear in your page.
  • The link to zFacts that you see in the code will vanish.
  • To tweak the appearance, visit the Customize Page.
Code
  • Only modify the customization lines.
  • All the gas-price widgets are the same except for customizations.
  • Facebook and some blogging systems won't allow JavaScript. If you have trouble, check here.

 

 

 

Customize It

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

For good luck, remember these 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.

  • tickRate = 40;                   // states per minute [ 0 -- 80 ] ;
  • width = 120;                     // width of widget box in pixels [ 80 -- 500 ] ;
  • height = 220;                    // height of widget box in pixels [ 50 -- 700 ] ;
  • fontPix = 11;                     // font size of most text in pixels [ 8 -- 24 ] ;
  • title = 1;                            // 1=> Gas Prices, 2=> Today's Gas Prices ;
  • titleBgClr = #135;             // title background color ;
  • titleColor = #FFF;              // title color ;
  • space = 1.3;                      // vertical spacing between lines [ 1 -- 2 ] ;
  • mainBgClr = #FFFDF0;      // background color of main box ;
  • textColor = black;             // Color of all text but title, and today's prices ;
  • hideDate = 0;                    // don't show the date [ 0, 1 ];
  • hideWeek = 0;                  // don't show week-ago data [ 0, 1 ];
  • hideYear = 0;                    //  don't show year-ago data [ 0, 1 ];
  • hideEnter = 0;                  // don't show the enter-state box [ 0, 1 ];
  • todayColor = #C00;          // color of today's prices;
  • borderColor = #9AB;        // color of outer border;
  • lineColor = #CCC;            // color of two separator hair-line; 

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

There are very slight differences in line height between browsers, so height may need to be set 4 or 5 pixels higher for some widgets to show properly in FoxFire or Internet Explorer, than is needed in Chrome. If height is too small, the bottom border will not show.

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 Gas Widgets on one page:

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

Trouble ??

The Gas-Price Widget runs on JavaScript -- a language that every browser knows. But controlled environments, such as a faceBook, do not allow you to use it.

Blogging software, like Blogger and Wordpress, almost always allow it. But they usually make you put it in a special box. This is not usually a hard feature to find.

If your widget does not work, try this.

Put the "Standard" (not customization) widget into a page. View the page where you put it in your browser. Hit Control-U, or the Apple equivalent.

This will pop up a new web page showing you the HTML that's actual in your page. If you don't see the widget code that you put in, then your system does not allow it and took it out. If you do see it, look closely to make sure it is all there and has not been altered by some robot.

Best of luck,

Steve

Iraq War Cost

This is not all costs, but only the costs based on the budget authority.
Data is from Congressional Research Service.
  
 
Needs just three lines of code:

 1. The clock tag makes this:  $964,948,195,656
 2. A link to zFacts' cost of war in Iraq  page
 3. The JavaScript tag to run the clock

Here's the code that makes this clock:

 

<span id="IWC" zF="8">###</span>
<a href="http://zfacts.com/p/447.html" id="zF14">Iraq War Cost</a>
<script type="text/javascript" src="http://zfacts.com/giz/G14iwc.js"></script>
 

You control the clock with the zF setting in the clock tag.

   <span id="IWC" zF="A,B,C,D"

How to use the zF settings:
  A   Clock speed.    0 to 100  clicks per second.  ( 0.2 is very slow.)
  B   Cents.             0 = no cents.  1 = cents.  (default is no cents)
  C   $ sign.             0 = no dollar sign,  1 = show $.   (default is show)
  D   extra clocks.    2 = two ND clocks on the same page.

You can skip inputs A, B, C, or D, but you must leave space for those skipped over if you use a later one, e.g.

   <span id="IWC:" zF="2,,0">       

This means:  2 clicks/sec , default cents , No dollar sign.

 
 

Details:

 • Put the JavaSript line last.
 • You can link any words you want.
 • You can make the link look like normal text. Here's how:

 <a href="http://zfacts.com/p/447.html" id="zF12"
               style="text-decoration:none; color:black;">

 

Help / FAQ

General Questions

 

  How do the counters stay up to date?
Each time your web page is visited the visitor's browser downloads the JS clock program from zFacts.com. This program is updated severl times per week semi-automatically. zFacts pays for the downloading bandwidth and the updates, so the clock is completely free for you.
 

  Does the link need to be inside the clock?
No. It just needs to be on the same page as the clock.
 

  What format do I use to specify colors with the JavaScript variables?
Colors can be specified by keywords or with hex codes like those found here
Color codes must be surrounded with quotes. Some basic examples are: 
"black" = "#000000"
"white" = "#FFFFFF" 
"red" = "#FF0000" 
"blue" = "#0000FF"
 

  Where can I learn more about CSS Styles?
CSS styles are used for formatting and coloring in some of our examples. For a reference of CSS properties, see this page
 

  What if I can't get it to work or have other questions or Comments? 
Please email Steve(at)zfacts-dot-(om.
 

 

Social Security Clock Questions

 

  Does the link have to be to zfacts.com/p/784.html ?
Yes. Right now it does. And, it must include id='zF' in the tag.
 

  What If the Bottom Part of the Two Clocks Doesn't Fit in the Table?
If the National Debt clock does not fit and disappears from view, or partly disappears, your browser is making the table before it checks the size of clocks.
Here are two possible fixes:

1) Put this in place of the line that ends the first table row and starts the 2nd:
</tr></td><tr><td height='90'> 
Then experment with different heights other than 90 till it looks right.

2) Put the whole table inside of a pair of 'div' tags like this:
<div style="height:200px"> 
Clock Code
</div>