Cleanup, simplify and unify css and js in examples

sockjs · Feb 22, 2012 · 50f42c3 · 50f42c3
1 parent cb0abe9
commit 50f42c3
Show file tree

Hide file tree

Showing 2 changed files with 106 additions and 112 deletions.
diff --git a/examples/echo/index.html b/examples/echo/index.html
@@ -1,74 +1,71 @@
 <!doctype html>
 <html><head>
-    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
-      </script>
-    <script src="http://cdn.sockjs.org/sockjs-0.2.min.js">
-      </script>
+    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+    <script src="http://cdn.sockjs.org/sockjs-0.2.min.js"></script>
     <style>
       .box {
-          border: 1px dashed black;
-          border-radius: 4px;
-          -moz-border-radius: 4px;
-          width: 400px;
-          display: block;
-          height: 300px;
+          width: 300px;
           float: left;
+          margin: 0 20px 0 20px;
       }
-      #output {
+      .box div, .box input {
+          border: 1px solid;
+          -moz-border-radius: 4px;
+          border-radius: 4px;
+          width: 100%;
+          padding: 0px;
+          margin: 5px;
+      }
+      .box div {
           border-color: grey;
-          overflow:auto;
+          height: 300px;
+          overflow: auto;
       }
-      #input {
-          vertical-align: text-top;
-          -moz-outline-style: none;
-          outline-style: none;
-          outline-width: 0px;
-          outline-color: -moz-use-text-color;
+      .box input {
+          height: 30px;
+      }
+      h1 {
+          margin-left: 30px;
       }
       body {
           background-color: #F0F0F0;
+          font-family: "Arial";
       }
     </style>
 <head><body lang="en">
-    <h2>SockJS-node Echo example</h2>
-      <form id="form">
-        <input id="input" autocomplete="off" class="box" align=top
-               value="type something here" />
-      </form>
-    <script>
-      var log;
-      var sockjs_url = '/echo';
-      var sockjs = new SockJS(sockjs_url);
-      sockjs.onopen = function() {
-          log(' [*] Connected (using: '+sockjs.protocol+')');
-      };
-      sockjs.onclose = function(e) {
-          log(' [*] Disconnected ('+e.status + ' ' + e.reason+ ')');
-      };
-      sockjs.onmessage = function(e) {
-          log(' [ ] received: ' + JSON.stringify(e.data));
-      };
+    <h1>SockJS Echo example</h1>
+
+    <div id="first" class="box">
+      <div></div>
+      <form><input autocomplete="off" value="Type here..."></input></form>
+    </div>
 
-      $('#input').focus();
-      $('#form').submit(function() {
-          var val = $('#input').val();
-          $('#input').val('');
-          var l = ' [ ] sending: ' + JSON.stringify(val);
-          if (sockjs.readyState !== SockJS.OPEN) {
-              l += ' (error, connection not established)';
-          } else {
-              sockjs.send(val);
-          }
-          log(l);
-          return false;
-      });
-    </script>
-    <div id="output" class="box small" />
     <script>
-      log = function (m) {
-          $('#output').append($("<code>").text(m));
-          $('#output').append($("<br>"));
-          $('#output').scrollTop($('#output').scrollTop()+10000);
-      }
+        var sockjs_url = '/echo';
+        var sockjs = new SockJS(sockjs_url);
+        $('#first input').focus();
+
+        var div  = $('#first div');
+        var inp  = $('#first input');
+        var form = $('#first form');
+
+        var print = function(m, p) {
+            p = (p === undefined) ? '' : JSON.stringify(p);
+            div.append($("<code>").text(m + ' ' + p));
+            div.append($("<br>"));
+            div.scrollTop(div.scrollTop()+10000);
+        };
+
+        sockjs.onopen    = function()  {print('[*] open', sockjs.protocol);};
+        sockjs.onmessage = function(e) {print('[.] message', e.data);};
+        sockjs.onclose   = function()  {print('[*] close');};
+
+        form.submit(function() {
+            print('[ ] sending', inp.val());
+            sockjs.send(inp.val());
+            inp.val('');
+            return false;
+        });
+
     </script>
 </body></html>
diff --git a/examples/express/index.html b/examples/express/index.html
@@ -1,74 +1,71 @@
 <!doctype html>
 <html><head>
-    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
-      </script>
-    <script src="http://cdn.sockjs.org/sockjs-0.2.min.js">
-      </script>
+    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+    <script src="http://cdn.sockjs.org/sockjs-0.2.min.js"></script>
     <style>
       .box {
-          border: 1px dashed black;
-          border-radius: 4px;
-          -moz-border-radius: 4px;
-          width: 400px;
-          display: block;
-          height: 300px;
+          width: 300px;
           float: left;
+          margin: 0 20px 0 20px;
       }
-      #output {
+      .box div, .box input {
+          border: 1px solid;
+          -moz-border-radius: 4px;
+          border-radius: 4px;
+          width: 100%;
+          padding: 0px;
+          margin: 5px;
+      }
+      .box div {
           border-color: grey;
-          overflow:auto;
+          height: 300px;
+          overflow: auto;
       }
-      #input {
-          vertical-align: text-top;
-          -moz-outline-style: none;
-          outline-style: none;
-          outline-width: 0px;
-          outline-color: -moz-use-text-color;
+      .box input {
+          height: 30px;
+      }
+      h1 {
+          margin-left: 30px;
       }
       body {
           background-color: #F0F0F0;
+          font-family: "Arial";
       }
     </style>
 <head><body lang="en">
-    <h2>SockJS-node Express example</h2>
-      <form id="form">
-        <input id="input" autocomplete="off" class="box" align=top
-               value="type something here" />
-      </form>
-    <script>
-      var log;
-      var sockjs_url = '/echo';
-      var sockjs = new SockJS(sockjs_url);
-      sockjs.onopen = function() {
-          log(' [*] Connected (using: '+sockjs.protocol+')');
-      };
-      sockjs.onclose = function(e) {
-          log(' [*] Disconnected ('+e.status + ' ' + e.reason+ ')');
-      };
-      sockjs.onmessage = function(e) {
-          log(' [ ] received: ' + JSON.stringify(e.data));
-      };
+    <h1>SockJS Express example</h1>
+
+    <div id="first" class="box">
+      <div></div>
+      <form><input autocomplete="off" value="Type here..."></input></form>
+    </div>
 
-      $('#input').focus();
-      $('#form').submit(function() {
-          var val = $('#input').val();
-          $('#input').val('');
-          var l = ' [ ] sending: ' + JSON.stringify(val);
-          if (sockjs.readyState !== SockJS.OPEN) {
-              l += ' (error, connection not established)';
-          } else {
-              sockjs.send(val);
-          }
-          log(l);
-          return false;
-      });
-    </script>
-    <div id="output" class="box small" />
     <script>
-      log = function (m) {
-          $('#output').append($("<code>").text(m));
-          $('#output').append($("<br>"));
-          $('#output').scrollTop($('#output').scrollTop()+10000);
-      }
+        var sockjs_url = '/echo';
+        var sockjs = new SockJS(sockjs_url);
+        $('#first input').focus();
+
+        var div  = $('#first div');
+        var inp  = $('#first input');
+        var form = $('#first form');
+
+        var print = function(m, p) {
+            p = (p === undefined) ? '' : JSON.stringify(p);
+            div.append($("<code>").text(m + ' ' + p));
+            div.append($("<br>"));
+            div.scrollTop(div.scrollTop()+10000);
+        };
+
+        sockjs.onopen    = function()  {print('[*] open', sockjs.protocol);};
+        sockjs.onmessage = function(e) {print('[.] message', e.data);};
+        sockjs.onclose   = function()  {print('[*] close');};
+
+        form.submit(function() {
+            print('[ ] sending', inp.val());
+            sockjs.send(inp.val());
+            inp.val('');
+            return false;
+        });
+
     </script>
 </body></html>