| HelloSun: A guide to creating a social networking empire, from scratch, for free, circa 2012. | ||
| ⇐ Step 5 | T.O.C. | |
I'm not very happy with this scrolling "chat" part of the web page, which so far looks like this:
I'd much prefer each person's comment to appear in a speech bubble, as I've sketched on this post-it note:
prototyping with newfangled css layout and rounded corners
Borrowing liberally from Pure CSS speech bubbles, I tweaked this local html file:
<html>
<head>
<style type="text/css">
.bubble-content {
position:relative;
padding:6px;
margin:4px 0 0 0;
color:#000;
background:#f3961c; /* for browsers
without gradient
support */
/* css3 */
background:-webkit-gradient(linear, 0 0, 0 100%,
from(#f9d835),
to(#f3961c));
background:-moz-linear-gradient(#f9d835, #f3961c);
background:-o-linear-gradient(#f9d835, #f3961c);
background:linear-gradient(#f9d835, #f3961c);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
-webkit-border-bottom-left-radius:0;
-moz-border-bottom-left-radius:0;
border-bottom-left-radius:0;
font-family: Arial;
font-size: 12px;
}
.bubble-citation {
margin:0 0 8px 0;
}
.whom {
margin: -8px 0 0 14px;
color:#000;
font-family: Arial;
font-size: 12px;
}
.quote-tail {
background:#f3961c;
width:20px;
height:16px;
-webkit-border-radius:8px;
-moz-border-radius:8px;
border-radius:8px;
margin:0;
margin-top:-9px;
}
.quote-tail2 {
background:#fff;
width:14px;
height:12px;
-webkit-border-radius:6px;
-moz-border-radius:6px;
border-radius:6px;
margin:0;
margin-top:-12px;
margin-left:8px;
}
</style>
</head>
<body>
<div class="bubble-content">
This is some bubble content I could just go on
and on and on
and maybe I will because, really, you know, I
have an awful
lot to say because I'm just very verbose.
</div>
<div class="bubble-citation">
<div
class="quote-tail"></div>
<div
class="quote-tail2"></div>
<div
class="whom">Tommy</div>
</div>
<div class="bubble-content">
This is some more bubble content.
</div>
<div class="bubble-citation">
<div
class="quote-tail"></div>
<div
class="quote-tail2"></div>
<div
class="whom">Sally</div>
</div>
</body>
</html>
In a modern browser the HTML above produces this page
That looks enough like the bubble quotes I drew on the post-it note that I'll use it. (I may come to regret relying so much on the latest CSS, when I get around to testing in different browsers--but since the primary clients I'm considering will be the most popular smartphones, and they all support this level of CSS, I won't worry about this issue yet.)
change the chat insertion code to use these newfangled css bubble quotes
By adding the css classes from the local html prototype file into the "chatty.css" file, and changing the "appendMsg()" function in "chatty.js to this:
function
appendMsg(msg) {
$('#msgs').append(function() {
var div,
html;
div =
$('<div>');
html =
'<div class="bubble-content">' +
simple_html_escape(msg.message) +
'</div>\r\n' +
'<div class="quote-tail"></div>\r\n' +
'<div
class="quote-tail2"></div>\r\n' +
'<div class="whom">' +
simple_html_escape(msg.username) +
'</div>\r\n' +
'</div>\r\n';
div.html(html);
return
div;
});
$('#msgs')[0].scrollTop =
$('#msgs')[0].scrollHeight;
}
the server now displays the chats within speech bubbles.
let's look better on an iPhone
The primary client for HelloSun is expected to be mobile clients. A couple of small adjustments can be made to make this code look better on iphones. The primary change is adding a "meta" tag to the layout of all files in this line added to layout.jade:
meta(name="viewport",content="width=device-width; initial-scale=1;
maximum-scale=1")check for blank inputs
The next little change for today's code is to prevent users from submitting if they haven't entered either a name or a message, because if those fields are blank it looks silly on the client displays. That's done with a simple function to remove space from the beginning and end of fields (the "trim()" method found at Javascript Trim LTrim and RTrim Functions), and a simple check in the "sendMsg()" function of chatty.js to verify that the fields are not blank.
always scroll for new messages
The final change for today's code is to automatically scroll to the bottom of the page when a new message comes. This ensures that users are always seeing the latest messages from other users. This line in "chatty.js" function "appendMsg()" replaces the old style to work with the new type of page. (It's not particularly elegant, but it works.)
window.scrollTo(0, document.body.scrollHeight);the new look
With all of today's changes, the chat program now looks something like this:
...and that's good enough for today.
Getting the code
Today's code is labeled v0001.0005 and is available in these formats:
- browse the code
- all v0001.0004...v0001.0005 code changes
- https://github.com/BrentNoorda/hellosun-tutorial/zipball/v0001.0005
- tarball: https://github.com/BrentNoorda/hellosun-tutorial/tarball/v0001.0005
- git:
# git clone git@github.com:BrentNoorda/hellosun-tutorial.git
# cd hellosun-tutorial
# git checkout v0001.0005
| HelloSun: A guide to creating a social networking empire, from scratch, for free, circa 2012. | ||
| ⇐ Step 5 | T.O.C. | |
