jsmaze/scroller.html at master · deepcloud/jsmaze · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<html>
<head>
  <title>Scroller Play</title>
  <link rel='stylesheet' type='text/css' href='css/tables.css'>
  <script src='js/jquery.min.js'></script>
  <script src='js/jsScroller.js'></script>
  <script>

var scroller;

function addline(line) {
  var time = new Date;
  time = time.toLocaleTimeString();
  scroller.addline([time, line]);
}

function addInput() {
  var input = $('#input');
  var text = $('<div/>').text(input.val()).html();
  addline(text);
  input.val('');
  input[0].focus();
}

function onload() {
  scroller = new jsScroller.Scroller($('#text'), 10);
  scroller.tableClass('prettytable');
  for (var i=1; i<=10; i++) {
    addline(''+i);
  }
  $('#input')[0].focus();
}

function inputKey(event) {
  if (event.which == '\r'.charCodeAt(0)) {
    event.preventDefault();
    addInput();
  }
}
  </script>
</head>
<body onload='onload()'>
  <div id='text' style='width: 20em; height: 5em; overflow:auto; overflow-x: hidden; position:relative; border: 1px solid;'>
    <b>Text goes here</b>
  </div><br/>
  <input type='text' id='input' size='40'
         onKeyDown='inputKey(event)'/><br/>
  <input type='submit' onClick='addInput()' value='Add'/>
</body>
</html>