Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
  • 2 commits
  • 3 files changed
  • 0 comments
  • 1 contributor
107 mockup/chatroom.html
... ... @@ -0,0 +1,107 @@
  1 +<html>
  2 + <head>
  3 + <link type="text/css" href="./style/chatroom.css" rel="stylesheet"/>
  4 + <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
  5 + <script src="./js/jquery.autogrowtextarea.js" type="text/javascript"></script>
  6 + </head>
  7 + <body>
  8 + <div id="wrapper">
  9 + <div id="chatroom">
  10 + <div id="toolbar">tool bar</div>
  11 + <div id="conversation">
  12 + <ul id="comment_list">
  13 + <li class="comment">
  14 + <span class="p_name">Name:</span>
  15 + <span class="c_content">hello world!</span>
  16 + </li>
  17 + <li class="comment">
  18 + <span class="p_name">Name:</span>
  19 + <span class="c_content">hello world!</span>
  20 + </li>
  21 + <li class="comment">
  22 + <span class="p_name">Name:</span>
  23 + <span class="c_content">hello world!</span>
  24 + </li>
  25 + <li class="comment">
  26 + <span class="p_name">Name:</span>
  27 + <span class="c_content">hello world!</span>
  28 + </li>
  29 + <li class="comment">
  30 + <span class="p_name">Name:</span>
  31 + <span class="c_content">hello world!</span>
  32 + </li>
  33 + <li class="comment">
  34 + <span class="p_name">Name:</span>
  35 + <span class="c_content">hello world!</span>
  36 + </li>
  37 + <li class="comment">
  38 + <span class="p_name">Name:</span>
  39 + <span class="c_content">hello world!</span>
  40 + </li>
  41 + <li class="comment">
  42 + <span class="p_name">Name:</span>
  43 + <span class="c_content">hello world!</span>
  44 + </li>
  45 + <li class="comment">
  46 + <span class="p_name">Name:</span>
  47 + <span class="c_content">hello world!</span>
  48 + </li>
  49 + <li class="comment">
  50 + <span class="p_name">Name:</span>
  51 + <span class="c_content">hello world!</span>
  52 + </li>
  53 + <li class="comment">
  54 + <span class="p_name">Name:</span>
  55 + <span class="c_content">hello world!</span>
  56 + </li>
  57 + <li class="comment">
  58 + <span class="p_name">Name:</span>
  59 + <span class="c_content">hello world!</span>
  60 + </li>
  61 + <li class="comment">
  62 + <span class="p_name">Name:</span>
  63 + <span class="c_content">hello world!</span>
  64 + </li>
  65 + <li class="comment">
  66 + <span class="p_name">Name:</span>
  67 + <span class="c_content">hello world!</span>
  68 + </li>
  69 + <li class="comment">
  70 + <span class="p_name">Name:</span>
  71 + <span class="c_content">hello world!</span>
  72 + </li>
  73 + <li class="comment">
  74 + <span class="p_name">Name:</span>
  75 + <span class="c_content">hello world!</span>
  76 + </li>
  77 + <li class="comment">
  78 + <span class="p_name">Name:</span>
  79 + <span class="c_content">hello world!</span>
  80 + </li>
  81 + <li class="comment">
  82 + <span class="p_name">Name:</span>
  83 + <span class="c_content">hello world!</span>
  84 + </li>
  85 + <li class="comment">
  86 + <span class="p_name">Name:</span>
  87 + <span class="c_content">hello world!</span>
  88 + </li>
  89 + <li class="comment">
  90 + <span class="p_name">Name:</span>
  91 + <span class="c_content">hello world!</span>
  92 + </li>
  93 + </ul>
  94 + </div>
  95 + <div id="input">
  96 + <div id="promt">&gt;</div>
  97 + <textarea id="text_input" rows='1'></textarea>
  98 + <script type="text/javascript">
  99 + $(document).ready(function(){
  100 + $("#text_input").autoGrow(3);
  101 + });
  102 + </script>
  103 + </div>
  104 + </div>
  105 + </div>
  106 + </body>
  107 +</html>
61 mockup/js/jquery.autogrowtextarea.js
... ... @@ -0,0 +1,61 @@
  1 +/*!
  2 + * Autogrow Textarea Plugin Version v2.0
  3 + * http://www.technoreply.com/autogrow-textarea-plugin-version-2-0
  4 + *
  5 + * Copyright 2011, Jevin O. Sewaruth
  6 + *
  7 + * Date: March 13, 2011
  8 + */
  9 +jQuery.fn.autoGrow = function(maxHeight){
  10 + return this.each(function(){
  11 + // Variables
  12 + var colsDefault = this.cols;
  13 + var rowsDefault = this.rows;
  14 +
  15 + //Functions
  16 + var grow = function() {
  17 + growByRef(this, maxHeight);
  18 + }
  19 +
  20 + var growByRef = function(obj, max) {
  21 + var linesCount = 0;
  22 + var lines = obj.value.split('\n');
  23 +
  24 + for (var i=lines.length-1; i>=0; --i)
  25 + {
  26 + linesCount += Math.floor((lines[i].length / colsDefault) + 1);
  27 + }
  28 + if(linesCount>=max){
  29 + obj.rows = max;
  30 + }
  31 + else if (linesCount >= rowsDefault){
  32 + obj.rows = linesCount + 1;
  33 + }
  34 + else
  35 + obj.rows = rowsDefault;
  36 + }
  37 +
  38 + var characterWidth = function (obj){
  39 + var characterWidth = 0;
  40 + var temp1 = 0;
  41 + var temp2 = 0;
  42 + var tempCols = obj.cols;
  43 +
  44 + obj.cols = 1;
  45 + temp1 = obj.offsetWidth;
  46 + obj.cols = 2;
  47 + temp2 = obj.offsetWidth;
  48 + characterWidth = temp2 - temp1;
  49 + obj.cols = tempCols;
  50 +
  51 + return characterWidth;
  52 + }
  53 +
  54 + // Manipulations
  55 + this.style.height = "auto";
  56 + this.onkeyup = grow;
  57 + this.onfocus = grow;
  58 + this.onblur = grow;
  59 + growByRef(this, maxHeight);
  60 + });
  61 +};
50 mockup/style/chatroom.css
... ... @@ -0,0 +1,50 @@
  1 +div, ul, li, span, textarea {
  2 + margin: 0px;
  3 + padding: 0px;
  4 +}
  5 +#wrapper{
  6 + margin:0;
  7 + padding:0;
  8 + width: 200px;
  9 + height: 280px;
  10 + font-size: 12px;
  11 +}
  12 +#wrapper div,li{
  13 + width:200px;
  14 + float:left;
  15 +}
  16 +#chatroom{
  17 + height:280px;
  18 + border: 1px solid #057de4;
  19 +}
  20 +#toolbar{
  21 + height:25px;
  22 + background-color: #79b5fb;
  23 +}
  24 +#conversation{
  25 + height:210px;
  26 + overflow-y:auto;
  27 +}
  28 +#comment_list{
  29 + list-style-type: none;
  30 +}
  31 +.comment{
  32 +
  33 + float:left;
  34 +}
  35 +#input{
  36 + height: 14px;
  37 + border-top: 1px black solid;
  38 +}
  39 +#input textarea{
  40 + float:left;
  41 + resize:none;
  42 + width:185px;
  43 + outline:none;
  44 + border: 0px;
  45 +}
  46 +#promt{
  47 + text-align:right;
  48 + width:15px !important;
  49 +}
  50 +

No commit comments for this range

Something went wrong with that request. Please try again.