Criar chatbox retrátil com JavaScript

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

Atendido / Resolvido Criar chatbox retrátil com JavaScript

Mensagem por [SRD]JimClark em 05.08.17 4:53

Detalhes da questão


Endereço do fórum: http://mixwin-ofc.forumeiros.com/
Versão do fórum: phpBB3

Descrição


Olá, Convidado eu gostaria de colocar um chatbox em aba assim: http://prntscr.com/g4l9ru e ocultar o que está no meu fórum assim: http://prntscr.com/g4l9yc fórum onde vi: www.nwdgames.com


Última edição por [SRD]JimClark em 07.08.17 0:51, editado 1 vez(es)
[SRD]JimClark

[SRD]JimClark
Nível 8

Masculino
Inscrito dia : 15/08/2016
Mensagens : 109
Pontos Ativos : 201

Ver perfil do usuário http://ccm-npc.forumeiros.com

Atendido / Resolvido Re: Criar chatbox retrátil com JavaScript

Mensagem por MateusAnjosV em 06.08.17 18:27

Olá e boa tarde!

Recomendo que usufrua da ferramenta de busca Forumeiros, assim, saberá que há diversos tutoriais para chatbox e o que você busca é um deles.
Criar chatbox retrátil com JavaScript QSGMsOKHQRON4BFXQ7OZXA
https://image.prntscr.com/image/qSGMsOKHQRON4BFXQ7OZXA.png
Experimente o tutorial: https://ajuda.forumeiros.com/t56720-tutorial-mudar-a-chatbox-de-sitio

MateusAnjosV

MateusAnjosV
Membro do Fórum

Masculino
Inscrito dia : 16/10/2015
Mensagens : 1692
Pontos Ativos : 2316

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

Atendido / Resolvido Re: Criar chatbox retrátil com JavaScript

Mensagem por [SRD]JimClark em 06.08.17 23:18

Achei o que queria neste tópico: https://ajuda.forumeiros.com/t76898-tutorial-chat-box-retratil-externo, aparentemente funcionou mas... esse widget do lado esquerdo: http://prntscr.com/g56d6z eu não quero ele, mas pro chatbox retratil funcionar eu preciso deixar o widget na coluna da esquerda e deixando nesta coluna fica também este widget, alguem pode me ajudar?
[SRD]JimClark

[SRD]JimClark
Nível 8

Masculino
Inscrito dia : 15/08/2016
Mensagens : 109
Pontos Ativos : 201

Ver perfil do usuário http://ccm-npc.forumeiros.com

Atendido / Resolvido Re: Criar chatbox retrátil com JavaScript

Mensagem por Harleen em 06.08.17 23:34

Olá, me envie o print de como o chatbox retrátil está configurado.

Estarei aguardando...


Título alterado de 'ChatBox em Aba' para 'Personalizar o chatbox'.
Harleen

Harleen
Membro do Fórum

Feminino
Inscrito dia : 09/07/2012
Mensagens : 1696
Pontos Ativos : 2245

Ver perfil do usuário http://master-publicitario.forumeiros.com/

Atendido / Resolvido Re: Criar chatbox retrátil com JavaScript

Mensagem por MateusAnjosV em 06.08.17 23:57

Boa noite, pessoal!

Jim, meu caro, você preencheu esta seleção como sim:
Criar chatbox retrátil com JavaScript 4eu-65M8Qd_RlRAdfeoiZQ
Seta http://prntscr.com/g56rwq

Marque "Não' e tudo estará resolvido.

Muito feliz
MateusAnjosV

MateusAnjosV
Membro do Fórum

Masculino
Inscrito dia : 16/10/2015
Mensagens : 1692
Pontos Ativos : 2316

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

Atendido / Resolvido Re: Criar chatbox retrátil com JavaScript

Mensagem por [SRD]JimClark em 07.08.17 0:14

@Harleen escreveu:Olá, me envie o print de como o chatbox retrátil está configurado.

Estarei aguardando...


Título alterado de 'ChatBox em Aba' para 'Personalizar o chatbox'.
http://prntscr.com/g56vpa http://prntscr.com/g56wea marquei "Não" como Mateus disse, mas fica um espaço em branco e se eu mudar o widget pra coluna esquerda ele não aparece. Leia abaixo para ver o que está a ocorrer agora!
@MateusAnjosV escreveu:Boa noite, pessoal!

Jim, meu caro, você preencheu esta seleção como sim:
Criar chatbox retrátil com JavaScript 4eu-65M8Qd_RlRAdfeoiZQ
Seta http://prntscr.com/g56rwq

Marque "Não' e tudo estará resolvido.

Muito feliz
Após marcado, removeu o widget, e ficou este espaço em branco: http://prntscr.com/g56xkd e se eu mover o widget para a esquerda a aba do chatbox não aparece!
[SRD]JimClark

[SRD]JimClark
Nível 8

Masculino
Inscrito dia : 15/08/2016
Mensagens : 109
Pontos Ativos : 201

Ver perfil do usuário http://ccm-npc.forumeiros.com

Atendido / Resolvido Re: Criar chatbox retrátil com JavaScript

Mensagem por Luiz em 07.08.17 0:38

Eu nunca fui fã de usar widgets para incorporarmos códigos no fórum.
Fiz um JavaScript que basicamente recria esse código — usando como base o tal código.

Remova todas as alterações que o senhor já fez neste tópico, em seguida, crie um novo JS investido em todas as páginas com o código:
Código:
(function ($) {
  'use strict';
 
  $(function () {
    $('body')
      .append([
        '',
        '<div id="lz-chat">',
        '  <iframe src="/chatbox/index.forum?" id="chatboxpop" scrolling="yes" marginwidth="0" marginheight="0" frameborder="0"></iframe>',
        '  <div id="lz-popup">',
        '    <img src="http://i.imgur.com/uOqXEzM.png" id="chatboxopen" style="display: inline;">',
        '    <img src="http://i.imgur.com/jOydylt.png" id="chatboxclose" style="cursor: pointer; display: none;">',
        '  </div>',
        '</div>',
        '',
        '<style type="text/css">',
        '  #lz-chat {',
        '    overflow: visible;',
        '    position: fixed;',
        '    bottom: 110px;',
        '    height: 350px;',
        '    right: 0px;',
        '    z-index: 1000;',
        '  }',
        '',
        '  #chatboxpop {',
        '    height: 450px;',
        '    float: right;',
        '    overflow: hidden;',
        '    width: 750px;',
        '    display: none;',
        '  }',
        '',
        '  #lz-popup {',
        '    margin-top: 10px;',
        '    cursor :pointer;',
        '    float:left;',
        '  }',
        '</style>',
        '',
      ].join('\n'))
    ;
 
    $('#lz-popup').on('click', function () {
      $('#chatboxpop')
        .animate({width:'toggle'},700)
      ;
      $('#chatboxopen,#chatboxclose')
        .toggle()
      ;
    });
   
  });
}(jQuery));

o/

---

Tópico movido de 'Questões sobre a aparência do fórum' para 'Questões sobre códigos'.
Título alterado de 'Personalizar o chatbox' para 'Criar chatbox retrátil com JavaScript'.
Luiz

Luiz
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 23/04/2016
Mensagens : 6625
Pontos Ativos : 7518

Ver perfil do usuário https://luizfelipe.dev

Atendido / Resolvido Re: Criar chatbox retrátil com JavaScript

Mensagem por MateusAnjosV em 07.08.17 0:43

Ele não aparece quando você modifica para a esquerda porque provavelmente, está configurado com a largura 0:
Criar chatbox retrátil com JavaScript 0qpVmC8wRFWVAEkX2TAeAw
"Largura coluna esquerda"

Faça o seguinte, deixe o número da direita em zero ou 1 também, caso não se incomode de ficar sem os widgets.

Eu recomendo os passos do Luiz aí, apesar que, teria um script a mais... mas whatever, alguns kb's a mais outros a menos Mostrando a lingua

MateusAnjosV

MateusAnjosV
Membro do Fórum

Masculino
Inscrito dia : 16/10/2015
Mensagens : 1692
Pontos Ativos : 2316

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

Atendido / Resolvido Re: Criar chatbox retrátil com JavaScript

Mensagem por [SRD]JimClark em 07.08.17 0:47

@Luiz escreveu:Eu nunca fui fã de usar widgets para incorporarmos códigos no fórum.
Fiz um JavaScript que basicamente recria esse código — usando como base o tal código.

Remova todas as alterações que o senhor já fez neste tópico, em seguida, crie um novo JS investido em todas as páginas com o código:
Código:
(function ($) {
  'use strict';
 
  $(function () {
    $('body')
      .append([
        '',
        '<div id="lz-chat">',
        '  <iframe src="/chatbox/index.forum?" id="chatboxpop" scrolling="yes" marginwidth="0" marginheight="0" frameborder="0"></iframe>',
        '  <div id="lz-popup">',
        '    <img src="http://i.imgur.com/uOqXEzM.png" id="chatboxopen" style="display: inline;">',
        '    <img src="http://i.imgur.com/jOydylt.png" id="chatboxclose" style="cursor: pointer; display: none;">',
        '  </div>',
        '</div>',
        '',
        '<style type="text/css">',
        '  #lz-chat {',
        '    overflow: visible;',
        '    position: fixed;',
        '    bottom: 110px;',
        '    height: 350px;',
        '    right: 0px;',
        '    z-index: 1000;',
        '  }',
        '',
        '  #chatboxpop {',
        '    height: 450px;',
        '    float: right;',
        '    overflow: hidden;',
        '    width: 750px;',
        '    display: none;',
        '  }',
        '',
        '  #lz-popup {',
        '    margin-top: 10px;',
        '    cursor :pointer;',
        '    float:left;',
        '  }',
        '</style>',
        '',
      ].join('\n'))
    ;
 
    $('#lz-popup').on('click', function () {
      $('#chatboxpop')
        .animate({width:'toggle'},700)
      ;
      $('#chatboxopen,#chatboxclose')
        .toggle()
      ;
    });
   
  });
}(jQuery));

o/

---

Tópico movido de 'Questões sobre a aparência do fórum' para 'Questões sobre códigos'.
Título alterado de 'Personalizar o chatbox' para 'Criar chatbox retrátil com JavaScript'.
Funcionou, agora me tire uma dúvida, eu posso mudar as imagens deste código pelas imagens do código HTML usado acima?

Editado: Bem, mudei as imagens e ficou como queria por isso carregarei como resolvido, obrigado a quem tentou ajudar!


Última edição por [SRD]JimClark em 07.08.17 0:50, editado 1 vez(es)
[SRD]JimClark

[SRD]JimClark
Nível 8

Masculino
Inscrito dia : 15/08/2016
Mensagens : 109
Pontos Ativos : 201

Ver perfil do usuário http://ccm-npc.forumeiros.com
  • 0

Atendido / Resolvido Re: Criar chatbox retrátil com JavaScript

Mensagem por Luiz em 07.08.17 0:49

Pode sim, troque o código por:
Código:
(function ($) {
  'use strict';
 
  $(function () {
    $('body')
      .append([
        '',
        '<div id="lz-chat">',
        '  <iframe src="/chatbox/index.forum?" id="chatboxpop" scrolling="yes" marginwidth="0" marginheight="0" frameborder="0"></iframe>',
        '  <div id="lz-popup">',
        '    <img src="https://i34.servimg.com/u/f34/16/04/51/75/open10.png" id="chatboxopen" style="display: inline;">',
        '    <img src="https://i34.servimg.com/u/f34/16/04/51/75/close10.png" id="chatboxclose" style="cursor: pointer; display: none;">',
        '  </div>',
        '</div>',
        '',
        '<style type="text/css">',
        '  #lz-chat {',
        '    overflow: visible;',
        '    position: fixed;',
        '    bottom: 110px;',
        '    height: 350px;',
        '    right: 0px;',
        '    z-index: 1000;',
        '  }',
        '',
        '  #chatboxpop {',
        '    height: 450px;',
        '    float: right;',
        '    overflow: hidden;',
        '    width: 750px;',
        '    display: none;',
        '  }',
        '',
        '  #lz-popup {',
        '    margin-top: 10px;',
        '    cursor :pointer;',
        '    float:left;',
        '  }',
        '</style>',
        '',
      ].join('\n'))
    ;
 
    $('#lz-popup').on('click', function () {
      $('#chatboxpop')
        .animate({width:'toggle'},700)
      ;
      $('#chatboxopen,#chatboxclose')
        .toggle()
      ;
    });
   
  });
}(jQuery));

Espero ter ajudado.
Até mais! o/
Luiz

Luiz
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 23/04/2016
Mensagens : 6625
Pontos Ativos : 7518

Ver perfil do usuário https://luizfelipe.dev

Atendido / Resolvido Re: Criar chatbox retrátil com JavaScript

Mensagem por [SRD]JimClark em 07.08.17 0:51

Resolvido pode fechar, obrigado a todos que tentaram ajudar!
[SRD]JimClark

[SRD]JimClark
Nível 8

Masculino
Inscrito dia : 15/08/2016
Mensagens : 109
Pontos Ativos : 201

Ver perfil do usuário http://ccm-npc.forumeiros.com

Atendido / Resolvido Re: Criar chatbox retrátil com JavaScript

Mensagem por Luiz em 07.08.17 0:54

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.
Tópico marcado como Resolvido e movido para Questões resolvidas.
Luiz

Luiz
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 23/04/2016
Mensagens : 6625
Pontos Ativos : 7518

Ver perfil do usuário https://luizfelipe.dev

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