OrbiterMicro Chat

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/base/jquery-ui.css">
<script src="http://cdn.unioncloud.io/OrbiterMicro_latest_min.js"></script>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Union demo</title>

<!--CSS-->
<!--Adds scrolling to the incoming chat pane.-->
<style type="text/css">
#chatPane {
  border: inset 2px;
  height: 100px;
  width: 400px;
  overflow: auto;
  padding: 5px;
  margin-bottom: 5px
}
</style>

<script type="text/javascript">
//==============================================================================
// VARIABLES
//==============================================================================
var orbiter;
var msgManager;
var UPC = net.user1.orbiter.UPC;
var roomID = "wwwins";

//==============================================================================
// INITIALIZATION
//==============================================================================
// Triggered by the <body> element's onload handler
function init () {
  // Create the Orbiter instance, used to connect to and communicate with Union
  orbiter = new net.user1.orbiter.Orbiter();

  // Set up the debugging log
  orbiter.getLog().setLevel(net.user1.logger.Logger.DEBUG);
  orbiter.enableConsole();
  
  // If required JavaScript capabilities are missing, abort
  if (!orbiter.getSystem().isJavaScriptCompatible()) {
    displayChatMessage("Your browser is not supported.");
    return;
  }
  
  // Register for Orbiter's connection events
  orbiter.addEventListener(net.user1.orbiter.OrbiterEvent.READY, readyListener, this);
  orbiter.addEventListener(net.user1.orbiter.OrbiterEvent.CLOSE, closeListener, this);
  
  // Connect to Union
  orbiter.connect("tryunion.com", 80);
  displayChatMessage("Connecting to Union...");
}

//==============================================================================
// ORBITER...

CSS

body{font:62.5% Verdana,Arial,sans-serif}
.default, .alt {
    margin: 1em;
    padding: 1em;
}
.a .ui-slider {
    border-radius: 0;
}
.a .ui-slider-handle {
    border-radius: 0;
}
.b .ui-slider {
    border-radius: 0;
    height: 1.1em;
}
.b .ui-slider-handle {
    border-radius: 0;
    top: .1em;
    height: 0.75em;
}
.c .ui-slider {
    border-radius: 2px;
}
.c .ui-slider-handle {
    border-radius: 4px;
    width: 0.4em;
    margin-left: -0.2em;
}
.d .ui-slider {
    height: 0.3em;
    border-radius: 10px;
}
.d .ui-slider-handle {
    height: 1em;
    top: -0.45em;
    border-radius: 0.5em;
    width: 1em;
    margin-left: -0.5em;
}
.e .ui-slider {
    border-radius: 2px;
    height: 0.3em;
}
.e .ui-slider-handle {
    height: 1.4em;
    top: -0.55em;
    border-radius: 0 0 16px 16px;
    width: 0.7em;
    margin-left: -0.35em;
}

JavaScript

$(".slider").slider({
    value: 50,
    slide: function(event, ui) {
        $("#amount").val(ui.value);
        $("#outgoing").val(ui.value);
    },
    stop: function(event, ui) {
        sendMessage();
    }
});