[TUTORIAL] Chat Box Retrátil - Lateral

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

[TUTORIAL] Chat Box Retrátil - Lateral

Mensagem por Luciano98 em 09/04/12, 04:05 am



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.

--> Tutoriais, dicas e astúcias <--
Chat Box Retrátil - Lateral


- 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.
Painel de controle :seta2: Visualização :seta2:  Página inicial :seta2: Geral
Seta Assunto da mensagem Correspondente ao nome do código HTML na Home page. Aconselhamos deixar em branco.
Seta 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.
Seta 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>

  • :seta2: 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.

  • :seta2: 700px O campo define o tamanho em qual a largura do chat irá distender.

  • :seta2: 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.

  • :seta2: http://i34.servimg.com/u/f34/16/04/51/75/open10.png Imagem que, quando acionada, irá fechar o chatbox.

  • :seta2: http://i34.servimg.com/u/f34/16/04/51/75/close10.png Imagem que, quando acionada, irá fechar o chatbox.


Resultado:





© Fórum dos Fóruns & Ace
Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
Chat Box Retrátil - Lateral
avatar

Luciano98
Ex-Admineiro
Ex-Admineiro

Masculino
Inscrito dia : 01/09/2010
Mensagens : 7648
Pontos Ativos : 11045

Ver perfil do usuário http://ajuda.forumeiros.com

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo


Permissão deste fórum:
Você não pode responder aos tópicos neste fórum