Browse Source

made bullets position correctly

master
Joshua Moerman 11 years ago
parent
commit
9465420e35
  1. 18
      index.html

18
index.html

@ -13,10 +13,18 @@
opacity: 0.5;
}
.user {
-webkit-transition: left 0.5s, top 0.5s;
font-size: 20px;
-webkit-transition: left 0.5s linear, top 0.5s linear;
position: absolute;
}
.user .bullet {
width: 10px;
height: 10px;
position: absolute;
left: -5px;
top: -5px;
border-radius: 5px;
background-color: #f00;
}
.user .name {
border-radius: 2px;
font-size: 12px;
@ -30,11 +38,11 @@
var websocket;
function init() {
document.getElementById("myName").innerHTML = myName;
if ("WebSocket" in window){
document.getElementById("myName").innerHTML = myName;
testWebSocket();
} else {
document.getElementById("status").innerHTML = 'No websockets :(';
document.getElementById("status").innerHTML = 'No websockets :(. This means that you either use <em>Internet Explorer</em> or <em>Android</em>. In both cases, I suggest that you use <a href="http://www.google.com/chrome/">Chrome</a> or <a href="http://www.getfirefox.net/">Firefox</a>!';
}
}
function testWebSocket() {
@ -65,7 +73,7 @@
var user = document.createElement('div');
user.id = people[i].name;
user.className = 'user';
user.innerHTML = '&bull; ';
user.innerHTML = '<div class="bullet"></div>';
user.appendChild(name);
user.style.left = people[i].position.x + "px";
user.style.top = people[i].position.y + "px";