Chat app Scrollable div or Iframe

Question

What is the advised method to make a chat window scrollable, using an iframe or a scrollable div? What are the pros&cons of the two techniques? Which would you opt for and why? Thanks

Answer 1

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);

Answer 2

I will myself always go for a div for a chat application, Why?

Here is basic benefit. You can handle the events on a div, that you cannot handle using an iframe. You can try it for yourself, try to handle click, mouseover events inside an iframe, you won't get anything.

$('div').click(function () {
  alert('Div was clicked!');
}

While iframe won't let you access events on the child elements of it.

While div will provide each and every event to the parent or even the js to handle and do the coding as necessary. For iframe you need to handle the events inside the iframe, lets say the page from where the iframe was loaded, its events are inside the code that was used to create it.

$('iframe').click(function () {
   // code..this will execute when click is on iframe, not for a child
}

But you cannot do something as

$('iframe html body div').click(function () {
   /* techniques for iframes are different and harder as
    * compared to ones used for div, to get a child event
    */
})

But the elements inside the div can be embedded for your webpage. And you can always change its child or parent elements. So chat app will be better, if you can handle all the element events.

<div>
  Some text
</div>

jQuery

$('div').on('event', function () { // on an event..
  // so on, adding more and more event handlers and blah blah
})

In a div, you can just update the content using ajax request, and then add it to the div and you can also use jQuery API to scroll it. No matter how much page size, you can use % or exact place where to scroll to. So divs are simpler.

$('div').load('chat_page.php'); // load a page in the div

Or just update it using,

$.ajax({ // create ajax request
  url: 'chat_message', // url 
  success: function (resp) { // if OK
    $('div').html(resp); // update the page
  }
});

Iframes are generally used to let others use your functionality, such as embedding chat application in a third party site, where you don't need them to edit or reuse your code. So you give them an iframe and a link.

Scolling thing was not understood by me! :( Sorry about that, I think I am going to write vague answer for that, so I will let that part go but this is how you can scroll the element

$('div').scrollTo(10); // scroll 10px down..

(You asked for browser support in comments) However, jQuery is supported cross-browser and cross platform. And the remaining part is HTML which is supported everywhere!

http://jquery.com/browser-support/ Here is a link to know the browser support