Ajuda chat box retrátil

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

Resolvido Ajuda chat box retrátil

Mensagem por Gleisson em 02/12/12, 02:36 pm

Qual é minha questão:
Bom, eu consegui colocar a Chat Box Retrátil, oque eu não consigo, é colocar o meu chat dentro dela

Código da Chat Box Retrátil:

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>

O meu chat que eu queria colocar na Chat Box Retrátil, quando eu clicava em OPEN

Código:

<embed src="http://www.xatech.com/web_gear/chat/chat.swf" quality="high" width="540" height="405" name="chat" FlashVars="id=181248400" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://xat.com/update_flash.shtml" /><br><small><a target="_BLANK" href="http://xat.com/web_gear/?cb">Get your own Chat Box!</a> <a target="_BLANK" href="http://xat.com/web_gear/chat/go_large.php?id=181248400">Go Large!</a></small><br>



Endereço do meu fórum:
http://oficialgsf.forumeiros.com

Versão do fórum:
PHPBB2
avatar

Gleisson
Nível 3

Masculino
Inscrito dia : 13/10/2012
Mensagens : 20
Pontos Ativos : 38

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

Resolvido Re: Ajuda chat box retrátil

Mensagem por BrunoH. em 02/12/12, 02:38 pm

Olá!
Veja o conteúdo dentro do spoiler:
Spoiler:
- Conhecendo e modificando o 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>

Vermelho > 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.
Laranja > O campo define o tamanho em qual a largura do chat irá distender.
Azul > 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.
Em Negrito: > Imagem que, quando acionada, irá fechar o chatbox.
Em Itálico: > Imagem que, quando acionada, irá fechar o chatbox.
Marrom: > ID da página HTML que conterá o chatbox.

Criando e aplicando o chatbox:

Para prosseguir com a aplicação da chatbox externa, você deverá criar uma seguindo:Chatbox externa


- Criar uma página HTML para sustentar o código:

Para que possamos adicionar o código, teremos de criar uma página HTML, que será onde o script ficará. Para isso é necessário aceder à:
Painel de controle -> Módulos -> HTML -> Gestão das páginas HTML

(carregue na imagem para aumentar)
Seta Título - Pode colocar o título que quiser para a página, não irá afetar em nada.
Seta Você deseja utilizar o início e o final da página do seu fórum ? - Esta terá de ser obrigatóriamente não. Caso marque-a, o código não irá funcionar adequadamente.
Seta Usar esta página como página inicial? - Esta também deverá estar marcada como não.
Seta Código HTML - Coloque aqui o código que trabalhamos no item anterior.
Após criada a página, deverá salvar e carregar novamente em "Gestão das páginas HTML", onde iremos recuperar o endereço da página criada, para usarmos no próximo ponto.

(carregue na imagem para aumentar)

Terá de encontrar a página HTML que criou e copiar o endereço da mesma. Em vermelho na imagem abaixo está o que deve copiar da página que criou! Por padrão esta será a primeira da lista (isso se for a última a ser criada e se não alterou a ordem de exibição). Com a URL copiada deverá analisar a parte após a barra, por exemplo, /h1- e substituir o /chatbox do código, por esse trecho da URL da página HTML

(carregue na imagem para aumentar)

- Aplicação do código:

Para utilizarmos o chat box retrátil, utilizaremos um widget personalizado. Para isso, aceda à:

Painel de controle (Avançado) >> Módulos >> Portal & Widgets >> Gestão dos widgets (fórum/portal) >> Novo widget personalizado


Seta Nome do widget: - Será o nome dado ao widget para localização e controle deste pelo Painel de Controle.
Seta Utilizar um table type: - Nesta opção, deverá ser marcado o "Não".
Seta Título do widget: - Nesta opção, não será necessário preenchimento, resultado da marcação do "Não" anteriormente.
Seta Fonte do widget: - Neste campo, deve ser inserido o código mostrado no passo 1.
Seta Salvar: - Para que o widget apareça corretamente, este box deve ser acionado, após as devidas modificações.

Feito isso, basta que o widget seja arrastado para uma coluna no módulo correspondente para que o chat seja aplicado.

  • Resultado:



Até mais! Piscada
avatar

BrunoH.
Principal contribuidor
Principal contribuidor

Inscrito dia : 15/06/2012
Mensagens : 7675
Pontos Ativos : 10382

Ver perfil do usuário http://premiumdesign3d.blogspot.com.br/ https://www.facebook.com/brunohenrique.com.br

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

- Tópicos similares

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