Skip to content

Instantly share code, notes, and snippets.

@NguyenTungs

NguyenTungs/index.html

Created July 5, 2018 04:44
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save NguyenTungs/7e8f82e9b16bfaf322474fc10dd030a2 to your computer and use it in GitHub Desktop.
Save NguyenTungs/7e8f82e9b16bfaf322474fc10dd030a2 to your computer and use it in GitHub Desktop.
Download ZIP
Firebase event is writing.. Firebase event is writing.. // source https://jsbin.com/mesuzuz
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Firebase event is writing..">
<meta name="keywords" content="Firebase event is writing..">
<meta name="author" content="anonystick">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Firebase event is writing..</title>
<script src="https://cdn.firebase.com/js/client/2.3.1/firebase.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<style id="jsbin-css">
.mytext{
border:0;padding:10px;background:whitesmoke;
}
.text{
width:75%;display:flex;flex-direction:column;
}
.text > p:first-of-type{
width:100%;margin-top:0;margin-bottom:auto;line-height: 13px;font-size: 12px;
}
.text > p:last-of-type{
width:100%;text-align:right;color:silver;margin-bottom:-7px;margin-top:auto;
}
.text-l{
float:left;padding-right:10px;
}
.text-r{
float:right;padding-left:10px;
}
.avatar{
display:flex;
justify-content:center;
align-items:center;
width:25%;
float:left;
padding-right:10px;
}
.macro{
margin-top:5px;width:85%;border-radius:5px;padding:5px;display:flex;
}
.msj-rta{
float:right;background:whitesmoke;
}
.msj{
float:left;background:white;
}
.frame{
background:#e0e0de;
height:450px;
overflow:hidden;
padding:0;
}
.frame > div:last-of-type{
position:absolute;bottom:0;width:100%;display:flex;
}
body > div > div > div:nth-child(2) > span{
background: whitesmoke;padding: 10px;font-size: 21px;border-radius: 50%;
}
body > div > div > div.msj-rta.macro{
margin:auto;margin-left:1%;
}
ul {
width:100%;
list-style-type: none;
padding:18px;
position:absolute;
bottom:47px;
display:flex;
flex-direction: column;
top:0;
overflow-y:scroll;
}
.msj:before{
width: 0;
height: 0;
content:"";
top:-5px;
left:-14px;
position:relative;
border-style: solid;
border-width: 0 13px 13px 0;
border-color: transparent #ffffff transparent transparent;
}
.msj-rta:after{
width: 0;
height: 0;
content:"";
top:-5px;
left:14px;
position:relative;
border-style: solid;
border-width: 13px 13px 0 0;
border-color: whitesmoke transparent transparent transparent;
}
input:focus{
outline: none;
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: #d4d4d4;
}
::-moz-placeholder { /* Firefox 19+ */
color: #d4d4d4;
}
:-ms-input-placeholder { /* IE 10+ */
color: #d4d4d4;
}
:-moz-placeholder { /* Firefox 18- */
color: #d4d4d4;
}
</style>
</head>
<body>
<div class="col-sm-3 col-sm-offset-4 frame">
<ul id="users"></ul>
<div>
<div class="msj-rta macro">
<div class="text text-r" style="background:whitesmoke !important">
<input id= "mytext" placeholder="Type a message"/>
</div>
</div>
<div style="padding:10px;">
<span class="glyphicon glyphicon-share-alt"></span>
</div>
</div>
</div>
<script id="jsbin-javascript">
var ref = new Firebase('https://anonystick-83a85.firebaseio.com/');
var timer;
var uid = prompt("Please enter your name", "TUNGNS"); // generate a fake user id
var users = document.getElementById('users');
// su kien moi nguoi khi chat se hien thi o day
ref.on('value', function(snapshot) {
users.innerText = '';
snapshot.forEach(function(typer) {
var li = document.createElement('li');
li.innerText = typer.key() + ': is writing...' ;
users.appendChild(li);
})
})
document.getElementById('mytext').addEventListener('input',function(e) {
// KHi user bat dau chat thi se set gia tri cho User nay
ref.child(uid).set(true);
// xoa su kien sau khi timer bat dau
if (timer) clearTimeout(timer);
// remove user nay trong vong 1 second
timer = setTimeout(function() {
ref.child(uid).remove();
}, 1000);
})
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Firebase event is writing..">
<meta name="keywords" content="Firebase event is writing..">
<meta name="author" content="anonystick">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Firebase event is writing..</title>
<script src="https://cdn.firebase.com/js/client/2.3.1/firebase.js"><\/script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
</head>
<body>
<div class="col-sm-3 col-sm-offset-4 frame">
<ul id="users"></ul>
<div>
<div class="msj-rta macro">
<div class="text text-r" style="background:whitesmoke !important">
<input id= "mytext" placeholder="Type a message"/>
</div>
</div>
<div style="padding:10px;">
<span class="glyphicon glyphicon-share-alt"></span>
</div>
</div>
</div>
</body>
</html></script>
<script id="jsbin-source-css" type="text/css">.mytext{
border:0;padding:10px;background:whitesmoke;
}
.text{
width:75%;display:flex;flex-direction:column;
}
.text > p:first-of-type{
width:100%;margin-top:0;margin-bottom:auto;line-height: 13px;font-size: 12px;
}
.text > p:last-of-type{
width:100%;text-align:right;color:silver;margin-bottom:-7px;margin-top:auto;
}
.text-l{
float:left;padding-right:10px;
}
.text-r{
float:right;padding-left:10px;
}
.avatar{
display:flex;
justify-content:center;
align-items:center;
width:25%;
float:left;
padding-right:10px;
}
.macro{
margin-top:5px;width:85%;border-radius:5px;padding:5px;display:flex;
}
.msj-rta{
float:right;background:whitesmoke;
}
.msj{
float:left;background:white;
}
.frame{
background:#e0e0de;
height:450px;
overflow:hidden;
padding:0;
}
.frame > div:last-of-type{
position:absolute;bottom:0;width:100%;display:flex;
}
body > div > div > div:nth-child(2) > span{
background: whitesmoke;padding: 10px;font-size: 21px;border-radius: 50%;
}
body > div > div > div.msj-rta.macro{
margin:auto;margin-left:1%;
}
ul {
width:100%;
list-style-type: none;
padding:18px;
position:absolute;
bottom:47px;
display:flex;
flex-direction: column;
top:0;
overflow-y:scroll;
}
.msj:before{
width: 0;
height: 0;
content:"";
top:-5px;
left:-14px;
position:relative;
border-style: solid;
border-width: 0 13px 13px 0;
border-color: transparent #ffffff transparent transparent;
}
.msj-rta:after{
width: 0;
height: 0;
content:"";
top:-5px;
left:14px;
position:relative;
border-style: solid;
border-width: 13px 13px 0 0;
border-color: whitesmoke transparent transparent transparent;
}
input:focus{
outline: none;
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: #d4d4d4;
}
::-moz-placeholder { /* Firefox 19+ */
color: #d4d4d4;
}
:-ms-input-placeholder { /* IE 10+ */
color: #d4d4d4;
}
:-moz-placeholder { /* Firefox 18- */
color: #d4d4d4;
} </script>
<script id="jsbin-source-javascript" type="text/javascript">var ref = new Firebase('https://anonystick-83a85.firebaseio.com/');
var timer;
var uid = prompt("Please enter your name", "TUNGNS"); // generate a fake user id
var users = document.getElementById('users');
// su kien moi nguoi khi chat se hien thi o day
ref.on('value', function(snapshot) {
users.innerText = '';
snapshot.forEach(function(typer) {
var li = document.createElement('li');
li.innerText = typer.key() + ': is writing...' ;
users.appendChild(li);
})
})
document.getElementById('mytext').addEventListener('input',function(e) {
// KHi user bat dau chat thi se set gia tri cho User nay
ref.child(uid).set(true);
// xoa su kien sau khi timer bat dau
if (timer) clearTimeout(timer);
// remove user nay trong vong 1 second
timer = setTimeout(function() {
ref.child(uid).remove();
}, 1000);
})
</script></body>
</html>
Raw
jsbin.mesuzuz.css
.mytext{
border:0;padding:10px;background:whitesmoke;
}
.text{
width:75%;display:flex;flex-direction:column;
}
.text > p:first-of-type{
width:100%;margin-top:0;margin-bottom:auto;line-height: 13px;font-size: 12px;
}
.text > p:last-of-type{
width:100%;text-align:right;color:silver;margin-bottom:-7px;margin-top:auto;
}
.text-l{
float:left;padding-right:10px;
}
.text-r{
float:right;padding-left:10px;
}
.avatar{
display:flex;
justify-content:center;
align-items:center;
width:25%;
float:left;
padding-right:10px;
}
.macro{
margin-top:5px;width:85%;border-radius:5px;padding:5px;display:flex;
}
.msj-rta{
float:right;background:whitesmoke;
}
.msj{
float:left;background:white;
}
.frame{
background:#e0e0de;
height:450px;
overflow:hidden;
padding:0;
}
.frame > div:last-of-type{
position:absolute;bottom:0;width:100%;display:flex;
}
body > div > div > div:nth-child(2) > span{
background: whitesmoke;padding: 10px;font-size: 21px;border-radius: 50%;
}
body > div > div > div.msj-rta.macro{
margin:auto;margin-left:1%;
}
ul {
width:100%;
list-style-type: none;
padding:18px;
position:absolute;
bottom:47px;
display:flex;
flex-direction: column;
top:0;
overflow-y:scroll;
}
.msj:before{
width: 0;
height: 0;
content:"";
top:-5px;
left:-14px;
position:relative;
border-style: solid;
border-width: 0 13px 13px 0;
border-color: transparent #ffffff transparent transparent;
}
.msj-rta:after{
width: 0;
height: 0;
content:"";
top:-5px;
left:14px;
position:relative;
border-style: solid;
border-width: 13px 13px 0 0;
border-color: whitesmoke transparent transparent transparent;
}
input:focus{
outline: none;
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: #d4d4d4;
}
::-moz-placeholder { /* Firefox 19+ */
color: #d4d4d4;
}
:-ms-input-placeholder { /* IE 10+ */
color: #d4d4d4;
}
:-moz-placeholder { /* Firefox 18- */
color: #d4d4d4;
}
Raw
jsbin.mesuzuz.js
var ref = new Firebase('https://anonystick-83a85.firebaseio.com/');
var timer;
var uid = prompt("Please enter your name", "TUNGNS"); // generate a fake user id
var users = document.getElementById('users');
// su kien moi nguoi khi chat se hien thi o day
ref.on('value', function(snapshot) {
users.innerText = '';
snapshot.forEach(function(typer) {
var li = document.createElement('li');
li.innerText = typer.key() + ': is writing...' ;
users.appendChild(li);
})
})
document.getElementById('mytext').addEventListener('input',function(e) {
// KHi user bat dau chat thi se set gia tri cho User nay
ref.child(uid).set(true);
// xoa su kien sau khi timer bat dau
if (timer) clearTimeout(timer);
// remove user nay trong vong 1 second
timer = setTimeout(function() {
ref.child(uid).remove();
}, 1000);
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment