Setting up the Widget

  1. Import jQuery 1.7

    Import jQuery 1.7 into the page in which the widget will appear. If jQuery 1.7 is already imported into the page, skip this step.

    In the <head> section of the page, add the line:

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

  2. Import the AnythingWeather Current Conditions Widget

    Import the AnythingWeather Current Conditions Widget into the page by adding the following line to the <head> section of the page. This must appear after the line that imports jQuery 1.7.

    <script type="text/javascript" src="https://weather-widgets.com/aw-widgets/widgets/aw-current-conditions-widget.js"></script>

  3. Import the AnythingWeather Current Conditions Styles

    If, and only if, you set the embedded option in the widget (see settings chart below) to true, import the AnythingWeather Current Conditions styles into the page by adding the following line to the <head> section of the page.

    <link rel="stylesheet" type="text/css" src="https://weather-widgets.com/aw-widgets/styles/aw-current-conditions-widget.css">

  4. Enable the AnythingWeather Current Conditions Widget

    Enable the AnythingWeather Current Conditions Widget into the page by adding the following lines to the <head> section of the page. This must appear after the lines that import jQuery 1.7 and the widget. 

    <script type="text/javascript">
  $(function(){
    $('#awCurrentConditionsPane').awCurrentConditions({
      stationId: 12345,
      fullSize: true  // or false
    });
  });
</script>
  5. Place the AnythingWeather Current Conditions Widget

    Place the AnythingWeather Current Conditions Widget onto the page by adding the following line to the <body> section of the page where the widget is to appear.

    <div id="awCurrentConditionsPane"></div>

Widget settings

This widget supports a number of settings. The settings are specified by placing them between the curly braces ({}) in the code of step 3. See the example below.

The available settings are described in the following table:

Option Description Default
stationId Specifies the station id to use when obtaining the data feed. None, must be supplied
fullSize Specifies whether the small or full sized widget should be displayed. Specify true for the full-sized version. false
embedded

If true, specifies that the widget is to be directly embedded in the page. If false, an iframe element is created to enclose the widget. When specified as true, the CSS for the widget (see above) must be included in the page in which the widget is embedded.

It is recommended that this setting be set as false (either explicitly or though omission) unless it is absolutely necessary that the widget be directly embedded in the page, where is is subject to CSS interference from the parent page's CSS.

false

Example

<script type="text/javascript">
  $(function(){
    $('#awCurrentConditionsPane').awCurrentConditions({
      stationId: 54321,
      fullSize: false
    });
  });
</script>

Visit an example page that uses this widget. To see the source code for that page, use your browser to view the source once the page is loaded.