Page content

BuckeyeAlert javascript library

Easily display Buckeye Alert messages on your website.

Download now (.zip)

Other versions on code.osu:
Project home
Drupal module

Buckeye Alert: Ohio State Alert Messages


As part of the Ohio State emergency communication plan and the Buckeye Alert system, University Communications publishes alerts to digital properties as advised by the Division of Emergency Management and university leadership. These properties include www.osu.edu, m.osu.edu, and the OSU Mobile app. Alerts are used sparingly to communicate important information primarily related to the Columbus campus.

Ohio State is a diverse institution composed of a large number of individual organizations. As such, many students, faculty, staff, alumni and friends interact most frequently with digital assets managed by colleges, business units, centers, clubs, etc. This limits dissemination of emergency management messaging.

The buckeyeAlert JavaScript library bridges this gap. It can be easily integrated into existing university websites to display the same emergency alert messages that appear on central websites and mobile applications.

Library overview


buckeyeAlert is a client-side JavaScript library. When added to a web page, the user's browser will request current alerts from www.osu.edu. If any alerts are returned, they will be displayed in a defined area of the page. The alert request is performed asynchronously - it will not block the rest of the page from loading.

There are two implementations of buckeyeAlert provided in this library.

  1. A plain JavaScript library with no additional dependencies
  2. A jQuery plugin

Use only one. The plain JS function is recommended for sites requiring a lightweight implementation or that require jQuery 2.0 and IE 8-9 support. The jQuery plugin is recommended for sites that are already using jQuery.

Demo HTML


This library ships with HTML files that demonstrate both versions of the library. For buckeyeAlert to pull messages from the live feeds, the pages must be served by a web server: they cannot be opened directly from a folder on your local computer. You must either upload the files to a web server or use a local development environment such as XAMPP.

Requirements


buckeyeAlert has been tested in the following web browsers:

  • Internet Explorer 8-11
  • Mozilla Firefox
  • Apple Safari
  • Apple Mobile Safari
  • Google Chrome
  • Android

Other browsers may work, but are not supported. To function properly, JavaScript must be enabled in the browser. All supported browsers enable JavaScript by default, but it may be disabled by certain security policies.

The buckeyeAlert jQuery plugin requires jQuery version 1.5+. If you require support for Internet Explorer 8, be sure to use a 1.x release. jQuery 2.0 dropped support for IE 6-8.

Note that the jQuery plugin also includes Cross-Domain AJAX for IE8.

Installation


Installation methods vary slightly between the two versions. Note that you can include the external script and style files, as shown here, or integrate their contents into your existing assets.

Both versions

For both versions, you'll need to copy this library (or the files you will use) to a publicly accessible path on your web server. First, add the CSS stylesheet to your page

<link rel="stylesheet" type="text/css" href="/path/to/osu-alert/css/buckeye-alert-resp.css">

For a non-responsive site, use `buckeye-alert-nonresp.css`. For a responsive layout, use `buckeye-alert-resp.css`. Adjust the media query break points as needed.

Plain JavaScript

Insert the script file. This should be done at the end of the page body.

<script type="text/javascript" src="/path/to/osu-alert/js/buckeye-alert.js"></script>

jQuery Plugin

Add jQuery if it is not already installed and insert the buckeyeAlert script file. This should be done at the end of the page body.

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

<script type="text/javascript" src="/path/to/buckeye-alert/js/jquery.buckeye-alert.js"></script>

For production sites, consider using the minified version of these files, `buckeye-alert.min.js` or `jquery.buckeye-alert.min.js`. They are smaller and require less time to download.

Message Container


Provide an element to contain the alert messages immediately after the opening body tag. We recommend the following markup:

<div id="buckeye_alert" hidden></div>

This markup will work by default with the provided style sheets. You may need to adjust the markup or CSS to integrate with your site's design. Note: Message styling must adhere to the following guidelines:

  1. Background color: #990000
  2. Font color: #FFFFFF
  3. Font size: 1.2em for Buckeye Alerts, 1em for additional messages
  4. Font weight: Bold for Buckeye Alerts, normal for additional messages
  5. Position: Top of page, first element. (Immediately before the OSU nav bar)

Additional messages (optional)


Weather-related Buckeye Alert messages may optionally be appended to display information relevant to your site's audience. This can be accomplished by adding the extra content to the containing element like so:

<div id="buckeye_alert" hidden>
	<div id="buckeye_alert_extra">
		<p>These are additional notices applicable to this website.</p>
	</div>
</div>

Additional messages may only be added when:

  • There is an active Buckeye Alert. (The buckeyeAlert plugin is displaying a message on your pages.)
  • The Buckeye Alert is weather-related

Usage


Make sure you call buckeyeAlert after the script tags described in the Installation section.

Plain JavaScript

Fetch and display alert messages by calling the 'buckeyeAlert()' function.

buckeyeAlert( [settings] )
Settings
  • element_id(default: buckeye_alert)
    • Type: string
    • A string containing the id of the element into which alerts will be placed.
  • url(default: //www.osu.edu/feeds/emergency-alert.rss)
    • Type: string
    • A string containing the emergency alert feed URL.
  • messageClass
    • Type: string
    • A space separated list of classes for the inner alert container.
  • displayType(default: block)
    • Type: string
    • The display style used to show the message container. Adds `style="display:displayType;"` to the element when messages are present.
  • callback
    • Type: function
    • A function to be executed if alerts are returned from the feed.
Example:
<script type="text/javascript">
	buckeyeAlert({
		url: "//www.osu.edu/feeds/alert-test/feed.rss",
		messageClass: "container"
	});
</script> 
 

jQuery Plugin

Fetch and display alert messages by calling the 'buckeyeAlert()' method on the message container.

.buckeyeAlert( [settings] )
Settings
  • url(default: //www.osu.edu/feeds/emergency-alert.rss)
    • Type: string
    • A string containing the emergency alert feed URL.
  • callback
    • Type: function
    • A function to be executed if alerts are returned from the feed.
  • messageClass
    • Type: string
    • A space separated list of classes for the inner alert container.
  • animate(default: true)
    • Type: boolean
    • If true, alert messages will appear with a slide-down animation.
Example
<script type="text/javascript">
	$(function() {
		$("#buckeye_alert").buckeyeAlert({
			url: "//www.osu.edu/feeds/alert-test/feed.rss",
			messageClass: "container",
			callback: function () {
			  // Do something here...
			}
		});
	});
</script>
 

Using Drupal?


For those running websites based on the Drupal content management system, the College of Arts and Sciences has built a Drupal module around the buckeyeAlert library. It can be downloaded and installed to integrate Buckeye Alerts into any Drupal 7 site. You can find it in the University Code Repository.