Is it up? Widget

As a note, this is still currently under development. If you have any suggestions please contact me (@r3morse).

You can view the source code on jsFiddle, and GitHub.

To-Do

Examples

Usage

Add the following script tag to your site:

<!-- Is it up? Widget -->
<script>
(function(d, s) {
    // Start a new script tag, get position to insert.
    var t = d.createElement(s),
        e = d.getElementsByTagName(s)[0];

    // Set the attributes of the script tag.
    t.src  = "http://isitup.org/widget/widget.js";

    // Insert the script tag.
    e.parentNode.insertBefore(t, e);
}(document, "script"));
</script>

Then add something like the following inside your <body>:

<div class="isitup-widget"
    data-domain="example.com"
    data-uplink="http://example.com"
    data-downlink="http://isitup.org/example.com">
</div>

Styling

The widget comes unstyled so that you can customise it to fit your site. To style the widget, use CSS. Below is the code used on this page:

<style type="text/css">
.isitup-widget {
    line-height: 1em;
}

.isitup-domain, .isitup-icon {
    display: inline;
}

.isitup-icon {
    margin: 5px;
}
</style>

HTML Output

The widget outputs minimal html into the DOM, below is an example of the output:

<div class="isitup-widget" data-domain="rememberthemilk.com" data-uplink="http://rememberthemilk.com" data-downlink="http://isitup.org/rememberthemilk.com" data-checked="true">
    <div class="isitup-icon">
        <img src="http://isitup.org/widget/img/online.png" width="16px" height="16px">
    </div>
    <div class="isitup-domain">
        <a href="http://rememberthemilk.com">rememberthemilk.com</a>
    </div>
</div>