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 5-day Forecast Widget

    Import the AnythingWeather 5-day Forecast 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-5day-widget.js"></script>

  3. Enable the AnythingWeather 5-day Forecast Widget

    Enable the AnythingWeather 5-day Forecast 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.

    Be sure to replace the value of the stationId option with the value appropriate for your installation. 

    <script type="text/javascript">
  $(function(){
    $('#aw5dayPane').aw5day({
      stationId: '12345'
    });
  });
</script>
  4. Place the AnythingWeather 5-day Forecast Widget

    Place the AnythingWeather 5-day Forecast Widget onto the page by adding the following line to the <body> section of the page where the widget is to appear.

    <div id="aw5dayPane"></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 obtain the forecast data for. none, must be supplied
paneWidth Specifies the width of the widget in pixels. It is recommended to leave this value at the default unless you absolutely need to make it wider. Making it narrower is unlikely to allow the widget to lay out correctly. 540
showEvapotranspiration Specifies whether the evapotranspiration data is displayed. false

Example

<script type="text/javascript">
  $(function(){
    $('#aw5dayPane').aw5day({
      stationId: '12345',
      paneWidth: 580
    });
  });
</script>