5

A ideia e criar um chat semelhante ao skype, whatsApp, etc... Onde as mensagens começam a aparecer de baixo para cima ate atingirem a altura da ul para dai aparecer a barra de rolagem.

    ul {
        list-style: none;
        height:380px;
        width:500px;
        overflow-y:auto;
        padding:5px;
        background-color:#ccc;
    }
    ul>li {
        height:80px;
        margin-bottom:5px;
        width:100%;
        background-color:#888;
    }
    <ul>
        <li>111111111111</li>
        <li>222222222222</li>
    </ul>

3
  • Você precisa que o li que representa a mensagem de um usuário fique com margem a esquerda do usuário atual com margem a direita? Assim como no whatsapp? Que tipo de alinhamento exatamente?
    – Syzoth
    Commented 28/05/2015 às 19:38
  • Ola @GuilhermeNascimento ! Oque preciso e apenas alinhar os blocos de mensagem embaixo, para que quando a primeira mensagem do chat aparecer, aparece-rá em baixo e depois vai subindo conforme novas mensagens surgirem. Quanto a questão de alinhar as mensagens a direita e esquerda, não tem problema. Commented 28/05/2015 às 19:56
  • você quer que <li>222222222222</li> apareça acima de <li>111111111111</li>?
    – Syzoth
    Commented 28/05/2015 às 20:01

4 Respostas 4

5

Faço assim usando as propriedades display:table e display:table-cell e vertical-align:bottom

display:table - Elemento Pai DIV

display:table-cell - Elemento Filho UL com vertical-align:bottom

div {
  display: table;
  width: 100%;
}
ul {
  list-style: none;
  height: 340px;
  width: 100%;
  padding: 5px;
  background-color: #ccc;
  display: table-cell;
  vertical-align: bottom;
}
ul>li {
  height: 80px;
  width: 100%;
  background-color: #888;
}
<div>
  <ul>
    <li>111111111111</li>
    <li>222222222222</li>
  </ul>
</div>

1
  • 1
    Bom exemplo de uso do stacksnippet []s
    – Syzoth
    Commented 28/05/2015 às 19:35
4

Tu cria um JavaScript assim:

function updateScroll() {
    var element = document.getElementById("teste");
    element.scrollTop = element.scrollHeight;
}
updateScroll();

var timerId = window.setInterval(1, 1000);

setTimeout(function () {
    clearInterval(timerId)
}, 10000);

No CSS não é preciso alterar nada, mas pode usar o seguinte para esconder a barra (porém ela continuará funcionando)

ul::-webkit-scrollbar{
    display: none;

}

É só colocar um id na ul e colocar o nome dessa id no Javascript no lugar de teste.

Link JSFiddle

function updateScroll() {
    var element = document.getElementById("teste");
    element.scrollTop = element.scrollHeight;
}
updateScroll();

var timerId = window.setInterval(1, 1000);

setTimeout(function () {
    clearInterval(timerId)
}, 10000);
ul {
    list-style: none;
   max-height:380px;
    width:500px;
    overflow-y:auto;
    padding:5px;
    background-color:#ccc;

     position: absolute;
    bottom:0;   
}
ul>li {
    height:80px;
    margin-bottom:5px;
    width:100%;
    background-color:#888;
}


ul::-webkit-scrollbar{
    display: none;

}
<ul id="teste">
    <li>111111111111</li>
    <li>222222222222</li>
    <li>222222222222</li>
    <li>222222222222</li>
    <li>222222222222</li>
    <li>222222222222</li>
    <li>222222222222</li>
    <li>222222222222</li>
    <li>222222222222</li>
    <li>222222sasa222222</li>
    <li>222222222222</li>
    <li>222222222222</li>
    <li>22asa</li>
    <li>222222sasa222222</li>
    <li>222222sasa222222</li>
    <li>222222sasa222222</li>
   <li>222222sasa222222</li>
<li>222222sasa222222</li>
    
    <li>FINAL</li>
    
</ul>

1
  • Ola @LeonardoVIlarinho ! Muito bom, funcionou como esperado... valeu Commented 28/05/2015 às 20:04
4

Faça isto, acaso necessite que o container do ul tenha o tamanho exato de 380px como no exemplo, terá que ter uma div por fora com essa medida para ele:

ul {
    list-style: none;
   max-height:380px;
    width:500px;
    overflow-y:auto;
    padding:5px;
    background-color:#ccc;

     position: absolute;
    bottom:0;   
}
ul>li {
    height:80px;
    margin-bottom:5px;
    width:100%;
    background-color:#888;
}
<ul>
    <li>111111111111</li>
    <li>222222222222</li>
</ul>

1
  • Editado o poste pois links podem quebrar
    – Syzoth
    Commented 28/05/2015 às 19:40
4

Alexander, para vc fazer este chat vc tem que trabalhar com linguagem do tipo PHP e banco de dado como MYSQL, pois eles serão responsável por armazenar e mostrar na tela a resposta da outra pessoa.

Mas a parte funcional onde vc envia fica mais ou menos assim:

function sendMsg(){
  var send = $('.send_msg').val();
  if(send){
    $('.display_msg').append('<li>' + send + '</li>');
     $('.send_msg').val('');
     $('.display_msg').scrollTop($('.display_msg').height()); // FALTOU ESTE TRECHO
  }
}
ul {
        list-style: none;
        height:380px;
        width:500px;
        overflow-x:auto;
        padding:5px;
        border: 1px solid #333;
    }
    ul>li {
        margin-bottom:5px;
        background-color:#888;
        padding: 10px;
    }
    ul>li.receive{
        background-color:#ddd;        
    }
    .send_msg{
        border: 1px solid #333;
        height: 50px;
        width: 500px;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="display_msg">
    <li class="send">111111111111</li>
    <li class="receive">222222222222</li>
</ul>
<textarea class='send_msg'></textarea><br>
<button type="button" onclick="sendMsg()">Enviar</button>

5
  • Isso faz funcionar, mas não resolve o que ele perguntou: como alinhar os itens na base do <ul>
    – bfavaretto
    Commented 28/05/2015 às 20:11
  • Com certeza não iria.... já que eu esqueci de colocar um trecho do código, valeu bfavaretto. Será que agora é isto que vc precisa Alexander??? Commented 28/05/2015 às 20:36
  • curti bastante isso, eu coloquei um mais simples (sou novato na linguagem), tem algum site/canal pra recomendar pra aprender mais sobre a linguagem?
    – Leonardo
    Commented 28/05/2015 às 20:54
  • EU usei apenas CSS, HTML e Jquery... isto tem na net ao montes.. no youtube mais ainda... mas se precisar de alguma junda só chamar... Commented 29/05/2015 às 22:40
  • Ola @ValentimAraújo ! Muito obrigado pelo seu post... A linguagem que estou utilizando e ASP.NET C#, mas isso não importa. Oque importa e o empenho de todos para ajudar na comunidade... valeu pela ajuda Commented 30/05/2015 às 1:21

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .