[TUTORIAL] Chat Box Retrátil - Lateral

Ir para baixo

[TUTORIAL] Chat Box Retrátil - Lateral Empty [TUTORIAL] Chat Box Retrátil - Lateral

Mensagem por Luciano98 09.04.12 8:05


[TUTORIAL] Chat Box Retrátil - Lateral Chatbox

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
[TUTORIAL] Chat Box Retrátil - Lateral Img128
[TUTORIAL] Chat Box Retrátil - Lateral 110111Seta Assunto da mensagem Correspondente ao nome do código HTML na Home page. Aconselhamos deixar em branco.
[TUTORIAL] Chat Box Retrátil - Lateral 110210Seta 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.
[TUTORIAL] Chat Box Retrátil - Lateral 110310Seta 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: https://i.servimg.com/u/f34/16/04/51/75/open10.png Imagem que, quando acionada, irá fechar o chatbox.

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


Resultado:

[TUTORIAL] Chat Box Retrátil - Lateral Result10




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

Membro desde : 02/09/2010
Mensagens : 7647
Pontos : 11049

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

 
Permissões neste sub-fórum
Não podes responder a tópicos