Caixa de Mensagem semelhante ao chat do facebook - JQuery

Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Para efetuar o download você precisa estar logado. Clique aqui para efetuar o login
Confirmar voto
0
 (1)  (0)

Veja neste artigo como criar uma caixa de mensagem semelhante ao chat do facebook utilizando jquery

Veja neste artigo como criar uma caixa de mensagem semelhante ao chat do facebook utilizando jquery.

A caixa será dividida em duas partes, a inicial sempre será visivel na tela, e caixa que contém a mensagem, que vai aparecer quando o usuário passar o mouse sobre a caixa inicial. Você pode baixar o vídeo no topo do artigo, na opção "download" e veja a ideia de como deveria ficar.

Veja o código html:

<div class="panel">
    <p><b>Teste</b></p>
    <p>>teste1</p>
    <p>>teste2</p>
</div>

<p class="flip">Mensagens</p>

A classe flip para a caixa inicial e a classe panel para a caixa de mensagem.

Tendo o html vamos configurar o CSS dos componentes que iremos utilizar

div.panel,p.flip
{
    width: 70px;
    padding:5px;
    text-align:center;
    background:#e5eecc;
    border:solid 1px #c3c3c3;
    position:fixed;
    right:10px;
    bottom:-15px;
    z-index:1;
}
div.panel
{
    position:fixed;
    bottom: 29px;
    width: 200px;
    height: auto;
    display:none;
    text-align:left;
    z-index:1;
}

Os comandos "position:fixed" e "z-index:1" permitem que as caixas de mensagem fiquem em uma posição fixa desejada e em primeiro plano sempre.

abaixo o código do script jquery que permitira a animação do box.

$(".flip").mouseenter(function () {
    $(".flip").animate({ width: 200 }, "fast");
    $(".panel").delay(200).slideDown("fast");
});
$(".flip").mouseleave(function () {
    $(".panel").slideUp("fast");
    $(".flip").delay(200).animate({ width: 70 }, "fast");
});

Tudo ocorre nos eventos de entrada e saida do mouse, mostrando ou escondendo o box da mensagem e esticando ou encolhendo o box inicial, o delay é utilizado para manter armonia entre os efeiros de slide e animete, dando o efeito de que são continuos.

Veja como seria a imagem do box fechado e aberto.

Box Fechado
Figura 1. Box Fechado
Box Aberto
Figura 2. Box Aberto

Com isso finalizo este artigo, qualquer duvida é só postar aqui!

Abraço.

Aprenda mais sobre jQuery.

 
Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Receba nossas novidades
Ficou com alguma dúvida?