Index of /assets/web/buckeye-alert
buckeyeAlert: 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][1], [m.osu.edu][2], and [OSU Mobile][3]. 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 aims to bridge 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.
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 package.
* A vanilla JavaScript library with no additional dependencies
* A [jQuery][4] plugin
Use only one. The jQuery plugin is recommended for sites that are already using jQuery. The vanilla JS function is recommended for sites requiring a lightweight implementation or that require jQuery 2.0 and IE 8-9 support.
Demo HTML
---------
This package 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][5].
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][6].
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.
For both versions, you'll need to copy this package (or the files you will use) to a publicly accessible path on your web server.
First, add the CSS stylesheet to your page `<head>`
<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.
### Vanilla 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.
### Bower ###
buckeyeAlert is available as a Bower package on code.osu.edu. To include it in your project using bower you can either use:
$ bower install buckeye-alert=https://code.osu.edu/ucom/buckeye-alert.git
or include it in your `bower.json`:
"dependencies": {
"buckeye-alert":"https://code.osu.edu/ucom/buckeye-alert.git"
}
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 ###
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
Use
---
Make sure you call buckeyeAlert after the script tags described in the Installation section.
### Vanilla 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>
Testing
-------
To see buckeyeAlert in action when there are no real alerts to display, a test feed is maintained at `http(s)://www.osu.edu/feeds/alert-test/feed.rss`. You may pass this URL to either version of the library during development to verify that everything is working.
Contributing
------------
This project is hosted on the [University Code Repository][7]. Bug reports and feedback should be submitted using the project issue queue.
Author
------
buckeyeAlert written and maintained by Corey Hinshaw hinshaw.25@osu.edu
University Communications, Interactive Communications
http://ucom.osu.edu/
Cross-Domain AJAX for IE8 jQuery plugin written by Jason Moon https://github.com/MoonScript
[1]: http://www.osu.edu
[2]: http://m.osu.edu
[3]: http://www.osu.edu/downloads/apps/osu-mobile.html
[4]: http://jquery.com
[5]: http://www.apachefriends.org/index.html
[6]: https://github.com/MoonScript/jQuery-ajaxTransport-XDomainRequest
[7]: https://code.osu.edu/ucom/buckeye-alert