Instantly share code, notes, and snippets.

What would you like to do?
Example of widget using the JSONP feed from the new status.ox website. Status is refreshed every 60 seconds.
<!DOCTYPE html>
<html xmlns="">
<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;}
<script type="text/javascript" src=""></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=""><span class="label">' + + ':</span> ' + val.status_name + '</a></li>');
$('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 () {
url: "",
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
<noscript>Needs Javascript!</noscript>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment