JavaScript Headline Modules

About

AllAfrica's JavaScript Headline Modules allow web sites to display up-to-the-minute, sorted, categorized news from the AllAfrica Latest News service. Any website can now include high-quality news headlines; a few simple JavaScript commands connect any page on the web to AllAfrica's news servers.

Availability

Current news in English and French is available across the 85 categories that make up the AllAfrica Latest News service. Access to these Headlines Modules is free. The service is supported by advertising revenues generated when users click through to the allAfrica.com website.

Any JavaScript capable browser can display a Headlines Module. JavaScript-based solutions have the advantage of requiring very little work on the part of website managers. However, the layout of the JavaScript-based headline modules is relatively inflexible (for example, you cannot change the font size that is used). If you need more control over the layout and composition of an AllAfrica headlines display, an RSS/RDF-based module is also available.

Terms and Conditions

AllAfrica provides the headline modules at no charge and on an "as-is" basis. We specifically disclaim any representations or warranties, express or implied. Any site that chooses to use this service specifically acknowledges and agrees that AllAfrica is not liable for any direct, indirect, incidental, special or consequential damages that result from the use of, or the inability to use, the headline modules.

Instructions

The Headline Module at the left is produced by the following JavaScript code:

<script language="JavaScript">
// set up variables that customize the display
var aa_outside_color    = "#ddddff";
var aa_header_color     = "#000000";
var aa_stripe_color_1   = "#ffffff";
var aa_stripe_color_2   = "#dde8e0";
var aa_display_category = true;
var aa_header           = null;
var aa_width            = 200;
var aa_how_many         = 15;
var aa_new_window       = true;
</script>
<script language="JavaScript"
src="http://allafrica.com/tools/headlines/headlines.js?category=business">
// this is the call to the headline-generating module
</script>

Let's go through this a few lines at a time. First, a script tag to open a JavaScript section, and a comment about what we'll be doing in this section:

<script language="JavaScript">
// set up variables that customize the display

Now we set the values of seven variables. We need to set all seven, so that the code that will execute in the next section will have all the information it needs to format your headline output. The first four variable control the colors of the display.

var aa_outside_color    = "#ddddff";
var aa_header_color     = "#ccaaff";
var aa_stripe_color_1   = "#ffffff";
var aa_stripe_color_2   = "#dde8e0";

aa_outside color sets the color of the line around the entire headline box and the background of the top of the box.

aa_stripe_color_1 sets the background color of the even cells in the box.

aa_stripe_color_2 sets the background color of the odd cells.

aa_header_color sets the color of the header text. Any HTML color specifier -- as a string -- is a legal value for any of the color variables.

var aa_display_category = true;

aa_display_category controls whether the geographic category of a story is displayed before the headline. This can be useful for categories, like Business, to the left, that include stories from many different countries. Legal values are true and false.

var aa_header           = null;

aa_header specifies the text that appears in the top cell of the box. Here, aa_header is set to null, so the name of the newsfeed category is displayed -- "Economy, Business and Finance". If a string were specified, that string would be displayed instead.

var aa_width            = 200;

aa_width controls the width of the headlines box. Legal values are: 1) null, in which case the box width will default to "100%", 2) a number, which will specify the width of the box in pixels, or 3) a string, which will be interpreted as the width of the outermost table enclosing the box (for example, "60%").

var aa_how_many         = 30;
var aa_new_window       = true;
</script>

aa_how_many is the number of headlines to display. a headlines box may contain up to 30 headlines, so any numeric value between 1 and 30 is legal. And that's the end of the variables section. The next section is the actual call to the news server that tgenerates the formatted headlines box.

Finally, aa_new_window controls whether the stories open in a new window when the user clicks on a headline. Legal values are 'true' and 'false'.

Category and Language

The last bit of code is the call to the AllAfrica server.

<script language="JavaScript"
src="http://allafrica.com/tools/headlines/headlines.js?category=business">
// this is the call to the headline-generating module
</script>

This can be customized in two ways. First, the "category" that is being requested is specified at the end of the src attribute, here category=business. The available categories are listed in this table.

Second, headlines from both English and French feeds are available. To display French headlines, the src attribute should point to AllAfrica's French server: fr.allafrica.com.

<script language="JavaScript"
src="http://fr.allafrica.com/tools/headlines/headlines.js?category=business">
// this is the call to the headline-generating module
</script>

Examples

The following code snippets are used to produce the other three boxes in the left column of this page:

<script language="JavaScript">
// set up variables that customize the display
var aa_outside_color    = "#ffa54f";
var aa_header_color     = "#000000";
var aa_stripe_color_1   = "#f0e68c";
var aa_stripe_color_2   = "#aba8fe";
var aa_display_category = false;
var aa_header           = "Nigeria News";
var aa_width            = 200;
var aa_how_many         = 12;
</script>
<script language="JavaScript"
src="http://allafrica.com/tools/headlines/headlines.js?category=nigeria">
// this is the call to the headline-generating module
</script>

<script language="JavaScript">
// set up variables that customize the display
var aa_outside_color    = "#000000";
var aa_header_color     = "#ffffff";
var aa_stripe_color_1   = "#ffffff";
var aa_stripe_color_2   = "#dddddd";
var aa_display_category = true;
var aa_header           = "Sports - Principales nouvelles";
var aa_width            = 200;
var aa_how_many         = 10;
</script>
<script language="JavaScript"
src="http://allafrica.com/tools/headlines/headlines.js?category=athletics">
// this is the call to the headline-generating module
</script>

<script language="JavaScript">
// set up variables that customize the display
var aa_outside_color    = "#c03030";
var aa_header_color     = "#ccaaff";
var aa_stripe_color_1   = "#ffffff";
var aa_stripe_color_2   = "#ffccaa";
var aa_display_category = true;
var aa_header           = "African Health & Medicine News";
var aa_width            = 200;
var aa_how_many         = 15;
</script>
<script language="JavaScript"
src="http://allafrica.com/tools/headlines/headlines.js?category=health">
// this is the call to the headline-generating module
</script>

For Further Help

If you need assistance with a Headline Module, or if you have suggestions for our development staff, please click here.