Free Clocks etc.
Nation Debt Clock |
ND Clock
|
Gas-Price Widget |
Gas_Widget
|
Iraq War Cost |
Iraq_Widget
|
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
|
|
| Code | |
|
|
White
|
Widget Goes Here
|
|
| Code | |
|
|
Blue
|
Widget Goes Here
|
|
| Code | |
|
|
Red
|
Widget Goes Here
|
|
| Code | |
|
|
# in iFrame
|
Widget Goes Here
|
|
| Code | |
|
|
Raw Number
|
Widget Goes Here
|
|
| Code | |
|
|
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:
- Every value setting, e.g. title = 2; must end with a semicolon ( ; ).
- Don't add units such as px for pixels.
- Optional comments should start with // and must end with a semicolon.
-
Don't ever use a double quote ( " ).
- 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
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
|
|
| Code | |
|
|
Big One
|
Gas-Price Gizmo Goes Here
|
|
| Code | |
|
|
Blue and Gold
|
Gas-Price Gizmo Goes Here
|
|
| Code | |
|
|
Minimalist
|
Gas-Price Gizmo Goes Here
|
|
| Code | |
|
|
Red
|
Gas-Price Gizmo Goes Here
|
|
| Code | |
|
|
Green
|
Gas-Price Gizmo Goes Here
|
|
| Code | |
|
|
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:
- Every value setting, e.g. title = 2; must end with a semicolon ( ; ).
- Don't add units such as px for pixels.
- Optional comments should start with // and must end with a semicolon.
-
Don't ever use a double quote ( " ).
- 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 Here's the code that makes this clock: |
<span id="IWC" zF="8">###</span> |
|
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: 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. <a href="http://zfacts.com/p/447.html" id="zF12" |
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: 2) Put the whole table inside of a pair of 'div' tags like this: |