Create a gist now

Instantly share code, notes, and snippets.

Embed
Example of widget using the JSONP feed from the new status.ox website. Status is refreshed every 60 seconds.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Status - University of Oxford</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<style type="text/css">
.status_code_0 {background-color:#039b0b;}
.status_code_1 {background-color: #b94a48;}
.status_code_2 {background-color: #f89406;}
li {padding:0.5em; margin:0.5em; list-style:none; width:20em; font-size:1.3em;}
.label {font-weight:bold;}
a {color:#FFF; text-decoration:none;}
.footer {font-size: 0.8em; margin-left:5em;}
h1 {color:#002147; margin-left:0.5em;}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<!-- ACTUAL CODE for this example below -->
<script type="text/javascript">
var callback = function (data) {
var services = [];
$.each(data.groups, function(key, val) {
services.push('<li class="status_code_' + val.status_code + '"><a href="http://status.ox.ac.uk/"><span class="label">' + val.name + ':</span> ' + val.status_name + '</a></li>');
});
$('body').empty();
$('body').append('<h1>Status - University of Oxford</h1>');
$('<ul/>', {'id': 'services', html: services.join('')}).appendTo('body');
$('#services').after('<p class="footer">Last Updated: ' + data.last_updated+'</p>');
};
var updateFeed = function () {
$.ajax({
url: "http://status.ox.ac.uk/api/services.jsonp",
type: "get",
dataType: "jsonp",
jsonp: "callback",
cache: false,
success: callback,
});
}
updateFeed(); // run one time then will be called again every
window.setInterval(updateFeed, 60000); // 1 minute
</script>
</head>
<body>
<noscript>Needs Javascript!</noscript>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment