[TUTORIAL] Chat Box Retrátil - Lateral

Muitas vezes, desejamos poder fazer algo dinâmico, simples, elegante e prático. Neste tutorial, aplicaremos esses conceitos ao Chat Box que ficará em uma lateral do fórum, trazendo assim, maior comodidade no ato da navegação.



1º - Noção básica da função:
Nós estaremos utilizando um código HTML que funcionará na Home page de teu fórum. O código é bem simples e de fácil manuseio se quiser editar algo dentro dele.

Assunto da mensagem Correspondente ao nome do código HTML na Home page. Aconselhamos deixar em branco.

Conteúdo da mensagem.- São destinados os devidos locais para onde você aplicará os efeitos nos fóruns. No nosso caso, nesta área que colocaremos o código HTML.

Código HTML No campo anterior, estaremos colocando o HTML. Em nosso caso, adicionaremos este código: Código: <div style="overflow: visible; position: fixed; bottom: 30px; height: 350px; right: 0px; z-index:1000;"><iframe src="/chatbox" id="chatboxpop" scrolling="yes" style="height: 350px; float: right; overflow-x: visible; overflow-y: visible; display: none; width:700px" marginwidth="0" marginheight="0" frameborder="0"></iframe><div onclick="jQuery('#chatboxpop').animate({width:'toggle'},1200); jQuery('#chatboxopen,#chatboxclose').toggle();" style="margin-top: 10px; cursor :pointer; float:left"><img src="http://i34.servimg.com/u/f34/16/04/51/75/open10.png" id="chatboxopen" style="display: inline; "><img src="http://i34.servimg.com/u/f34/16/04/51/75/close10.png" id="chatboxclose" style="cursor: pointer; display: none; "></div></div>

Right: O campo define se a imagem de abertura fica fixa na lateral do fórum ou se ela acompanha o chatbox em seu distender. Em 'right', a imagem acompanhará o chat e, em 'left', a imagem fica fixa na tela e o chat box se estende a sua esquerda. 700px O campo define o tamanho em qual a largura do chat irá distender. 1200 O valor deste campo define em quanto tempo o chat se abrirá por total. A cada 1000 = 1 segundo. Se o valor for 0, não há deslize e ele abre imediatamente. https://i.servimg.com/u/f34/16/04/51/75/open10.png Imagem que, quando acionada, irá fechar o chatbox. https://i.servimg.com/u/f34/16/04/51/75/close10.png Imagem que, quando acionada, irá fechar o chatbox.

Resultado:

---

Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: Chat Box Retrátil - Lateral