JS Web Chat

An example of using the HTML5 Dialog Element in a chat screen.

by Alexus fox

HTML

<body>
    <div class="page">
      <section id="main">
        <div id="chatLog"></div>
      </section>
      <header style="position: fixed; left: 10px; top: 0px;">
        <hgroup>
          <h7>CHAT</h7>
        </hgroup>
      </header>
      <footer style="position: fixed; left: 10px; bottom: 0;">
        <a class="botToggle" href="#" onclick="toggleBot()">Toggle Bot On/Off</a>
        <textarea class="chatText" placeholder="Type a Message" autofocus></textarea>
        <br />
        <input id="submitBtn" type="submit" value="Send" />
      </footer>
      <div id="typingIndicator" style="display: none;">Typing a Message</div>
    </div>
  </body>

CSS

/**
* Minimal base styles.
*/

body,
select,
input,
textarea {
  /* #444 looks better than black: twitter.com/H_FJ/statuses/11800719859 */
  color: #444;
  /* Set your base font here, to apply evenly. */
  font-family: Arial, Helvetica, sans-serif;
}


h7{
    font-size: 25px;
  font-family: pt sans narrow, san-serif;
  position: absolute;
  top: 10px;
  left: 30px;
  right: 0;
  width: 300px;
  height: 70px;
  border: 3px;
}



/* Set sub, sup without affecting line-height: gist.github.com/413930 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}


textarea {
  overflow: auto;
}


input[type="radio"] {
  vertical-align: text-bottom;
}

input[type="checkbox"] {
  vertical-align: bottom;
}


::-moz-selection {
  background: #F2D64C;
  color: #fff;
  text-shadow: none;
}

::selection {
  background: #F2D64C;
  color: #fff;
  text-shadow: none;
}


/* j.mp/webkit-tap-highlight-color */


/* Make buttons play nice in IE:
www.viget.com/inspire/styling-the-button-element-in-internet-explorer/ */

button {
  width: auto;
  overflow: visible;
}


/* Bicubic resizing for non-native sized IMG:
code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ */

.ie7 img {
  -ms-interpolation-mode: bicubic;
}



.page {
  margin: 10px;
}

header h1 {
  font-size: 1.5em;
}

dt {
  display: none;
  height: 1px;
}

dd {
  display: none;
  background-color: #3399FF;
  border-radius: 7px;
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
  margin: 0px 20px 20px 0px;
  padding: 5px 10px;
  color: White;
  position: relative;
}

dd p {
  margin-bottom: 5px;
}

dd span {
  color: Black;
  font-weight: bold;
}

dd.reply {
  margin: 0 0 20px 20px;
}

dd .arrow {
  border-color: #3399FF transparent transparent transparent;
  border-style: solid;
  border-width: 10px 10px 10px 20px;
  width: 0;
  height: 0;
  position: absolute;
  bottom: -20px;
  right: 20px;
}

dd .arrowOver...

JavaScript

// Do this first so we can minimize funky textbox display;
function updateWidths() {
  // page width - 10 for left offset;
  var newWidth = $('.page').width() - 10;
  $('footer, header').width(newWidth);
};
updateWidths();

// hack for fixing the width when resizing the browser.
$(window).resize(function() {
  updateWidths();
});

// usage: log('inside coolFunc', this, arguments);
// paulirish.com/2009/log-a-lightweight-wrapper-for-consolelog/
window.log = function() {
  log.history = log.history || []; // store logs to an array for reference
  log.history.push(arguments);
  if (this.console) console.log(Array.prototype.slice.call(arguments));
};

// Placeholder support for IE9
if (!('placeholder' in document.createElement('input'))) {
  $('[placeholder]').each(function() {
    var self = $(this);
    var p = 'placeholder';
    self.data('empty', self.val() == '');
    self.focus(function() {
      if (self.data('empty') && self.val() == self.attr(p)) {
        self.val('').removeClass(p);
      }
    }).blur(function() {
      if (self.data('empty')) {
        self.val(self.attr(p)).addClass(p);
      }
    }).change(function() {
      self.data('empty', self.val() == '');
    });
    if (self.val() == '' || self.val() == self.attr(p)) {
      self.val(self.attr(p)).addClass(p);
    }
  });
  $('form:has([placeholder])').bind('submit', function() {
    $(this).find('[placeholder]').each(function() {
      if ($(this).data('empty')) {
        $(this).val('');
      }
    });
  });
}

/**
 * jQuery.ScrollTo - Easy element scrolling using jQuery.
 * Copyright (c) 2007-2009 Ariel Flesler - aflesler(at)gmail(dot)com | http://flesler.blogspot.com
 * Dual licensed under MIT and GPL.
 * Date: 3/9/2009
 * @author Ariel Flesler
 * @version 1.4.1
 *
 * http://flesler.blogspot.com/2007/10/jqueryscrollto.html
 */
;
(function($) {
  var m = $.scrollTo = function(b, h, f) {
    $(window).scrollTo(b, h, f)
  };
  m.defaults = {
    axis: 'xy',
    duration:...