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