Chat app Scrollable div or Iframe

css, html, iframe, javascript, jquery

Solution

You can create a script that will embed a chat into a third-party website creating both `<div>` or `<iframe>`

The main interesting differences

- `iframe`

- Code: All user events (clicks, key events, hovers etc) are handlable exclusively from your external chat app page. Without a complicated API the user will not be able to easily modify or target desired events to suit their needs (Why should they after all). The sensitive backend code and logic can stay hidden on your side.

- Styling: Your chat app will look exactly like you defined it. With an extended API the user will only be able to select some predefined styles. (I personally hate that.) So more coding for you.

- Uses Mostly used by free chat apps where they force the app to be just the way they want it to be, preventing custom styles and possibly the removal of the App logo, link to the from site, or some random ads. Also used if you want to provide the data storage on your side, or provide silent application updates.

- Scroll and heights are unaware of the surrounding items which ends mostly having an API where the user chooses some predefined chat heights.

- `DIV`

- Code: All user events (clicks, key events, hovers etc) are easily accessible and modifiable to the programmer. You can still have a nice plugin / API that will simplify customizations to the user.

- Styling: The DIVs being rendered inside the user page will inherit that page styles. The good part it that the chat app will have a design that suits perfectly the page design. The hard part is that in your CSS you'll have to probably prevent some chat sensitive styles to be overwritten by the host page styles. Be careful.

- Uses: people are gonna love it. If you want users to keep your link or logo you can ask them to keep the copyright or the link. You cannot count that this will happen. If you sell your app, or you just don't care, than I find this use the proper one.

- Scroll and heights of chat elements are aware of the surrounding document. My suggestion here is to create a fluid chat app using `%`. That way your app will fit inside every container, and if it's a fluid page... more love for you.

So even if I would personally choose the `<div>` one, it's totally up to your needs.

Regarding scrollability I've created a nice UI technique:

- Create a variable-flag that will register if the scrollable area is hovered

- after you ping the server for the new message, run a function that will scroll the area to bottom

- if the scrollable area is hovered means that the user is reading old chats

- on mouseleave = scroll automatically the chat to the bottom (last conversation)

See it in action here

HTML:

   <div class="chat">
    <div class="messages">
      <div>Old message</div>
    </div>
    <textarea></textarea>
    <button>Post</button>
  </div>

BASIC CSS (more CSS in the demo link):

.chat{
  position:relative;
  margin:0 auto;
  width:300px;
  overflow:hidden;
}
.chat .messages{
  width:100%;
  height:300px;
  overflow:hidden;
}
.chat .messages:hover{
  overflow-y:scroll;
}
.chat .messages > div{
  padding:15px;
  border-bottom:1px dashed #999;
}

jQuery:

var $chat     = $('.chat'),
    $printer  = $('.messages', $chat),
    $textArea = $('textarea', $chat),
    $postBtn  = $('button', $chat),
    printerH  = $printer.innerHeight(),
    preventNewScroll = false;

//// SCROLL BOTTOM  
function scrollBottom(){
  if(!preventNewScroll){ // if mouse is not over printer
    $printer.stop().animate( {scrollTop: $printer[0].scrollHeight - printerH  }, 600); // SET SCROLLER TO BOTTOM
  }
}   
scrollBottom(); // DO IMMEDIATELY

function postMessage(e){  
  // on Post click or 'enter' but allow new lines using shift+enter
  if(e.type=='click' || (e.which==13 && !e.shiftKey)){ 
    e.preventDefault();
    var msg = $textArea.val(); // not empty / space
    if($.trim(msg)){
      $printer.append('<div>'+ msg.replace(/\n/g,'<br>') +'</div>');
      $textArea[0].value=''; // CLEAR TEXTAREA
      scrollBottom(); // DO ON POST
      // HERE Use AJAX to post msg to PHP      
    } 
  }
}


//// PREVENT SCROLL TO BOTTOM WHILE READING OLD MESSAGES
$printer.hover(function( e ) {
  preventNewScroll = e.type=='mouseenter' ? true : false ;
  if(!preventNewScroll){ scrollBottom(); } // On mouseleave go to bottom
});

$postBtn.click(postMessage);
$textArea.keyup(postMessage);

//// TEST ONLY - SIMULATE NEW MESSAGES
var i = 0;
intv = setInterval(function(){
    $printer.append("<div>Message ... "+ (++i) +"</div>");
    scrollBottom(); // DO ON NEW MESSAGE (AJAX)
},2000);

Problem

Original source