gervasiocaj/jsbin.pihis.html

## jsbin.pihis.html
<!doctype html>
<html>
  <head>
    <script src='https://cdn.firebase.com/v0/firebase.js'></script>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'></script>
    <link rel='stylesheet' type='text/css' href='../css/example.css'>
    <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <meta charset="utf-8">
  </head>

  <body>
    <script src="http://code.jquery.com/jquery.min.js"></script>
    <script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.min.js"></script>
    <script src="https://cdn.firebase.com/v0/firebase.js"></script>
    <script src="https://cdn.firebase.com/libs/angularfire/0.7.0/angularfire.min.js"></script>

    <script>
      var myDataRef = new Firebase('https://lhib661rtar.firebaseio-demo.com/');
      $('#messageInput').keypress(function (e) {
        if (e.keyCode == 13) {
          var name = $('#nameInput').val();
          var text = $('#messageInput').val();
          myDataRef.push({name: name, text: text});
          $('#messageInput').val('');
        }
      });
      myDataRef.on('child_added', function(snapshot) {
        var message = snapshot.val();
        displayChatMessage(message.name, message.text);
      });
      function displayChatMessage(name, text) {
        $('<div/>').text(text).prepend($('<em/>').text(name+': ')).appendTo($('#messagesDiv'));
        $('#messagesDiv')[0].scrollTop = $('#messagesDiv')[0].scrollHeight;
      };
    </script>

    <div id='messagesDiv'></div>
    <input type='text' id='nameInput' placeholder='Name'>
    <input type='text' id='messageInput' placeholder='Message'>
  </body>
</html>
	<!doctype html>
	<html>
	<head>
	<script src='https://cdn.firebase.com/v0/firebase.js'></script>
	<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'></script>
	<link rel='stylesheet' type='text/css' href='../css/example.css'>
	<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
	<meta charset="utf-8">
	</head>

	<body>
	<script src="http://code.jquery.com/jquery.min.js"></script>
	<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.min.js"></script>
	<script src="https://cdn.firebase.com/v0/firebase.js"></script>
	<script src="https://cdn.firebase.com/libs/angularfire/0.7.0/angularfire.min.js"></script>

	<script>
	var myDataRef = new Firebase('https://lhib661rtar.firebaseio-demo.com/');
	$('#messageInput').keypress(function (e) {
	if (e.keyCode == 13) {
	var name = $('#nameInput').val();
	var text = $('#messageInput').val();
	myDataRef.push({name: name, text: text});
	$('#messageInput').val('');
	}
	});
	myDataRef.on('child_added', function(snapshot) {
	var message = snapshot.val();
	displayChatMessage(message.name, message.text);
	});
	function displayChatMessage(name, text) {
	$('<div/>').text(text).prepend($('<em/>').text(name+': ')).appendTo($('#messagesDiv'));
	$('#messagesDiv')[0].scrollTop = $('#messagesDiv')[0].scrollHeight;
	};
	</script>

	<div id='messagesDiv'></div>
	<input type='text' id='nameInput' placeholder='Name'>
	<input type='text' id='messageInput' placeholder='Message'>
	</body>
	</html>