Criar chatbox retrátil com JavaScript

4 participantes

Ir para baixo

Tópico resolvido Criar chatbox retrátil com JavaScript

Mensagem por [SRD]JimClark 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
***

Membro desde : 15/08/2016
Mensagens : 109
Pontos : 201

http://ccm-npc.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Criar chatbox retrátil com JavaScript

Mensagem por MateusAnjosV 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
Super Membro

Membro desde : 16/10/2015
Mensagens : 1718
Pontos : 2373

http://holder.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Criar chatbox retrátil com JavaScript

Mensagem por [SRD]JimClark 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
***

Membro desde : 15/08/2016
Mensagens : 109
Pontos : 201

http://ccm-npc.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Criar chatbox retrátil com JavaScript

Mensagem por Harleen 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
Super Membro

Membro desde : 09/07/2012
Mensagens : 1779
Pontos : 2373

https://antenadogames.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Criar chatbox retrátil com JavaScript

Mensagem por MateusAnjosV 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
Super Membro

Membro desde : 16/10/2015
Mensagens : 1718
Pontos : 2373

http://holder.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Criar chatbox retrátil com JavaScript

Mensagem por [SRD]JimClark 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
***

Membro desde : 15/08/2016
Mensagens : 109
Pontos : 201

http://ccm-npc.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Criar chatbox retrátil com JavaScript

Mensagem por Luiz 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
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Criar chatbox retrátil com JavaScript

Mensagem por MateusAnjosV 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
Super Membro

Membro desde : 16/10/2015
Mensagens : 1718
Pontos : 2373

http://holder.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Criar chatbox retrátil com JavaScript

Mensagem por [SRD]JimClark 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
***

Membro desde : 15/08/2016
Mensagens : 109
Pontos : 201

http://ccm-npc.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Criar chatbox retrátil com JavaScript

Mensagem por Luiz 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
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Criar chatbox retrátil com JavaScript

Mensagem por [SRD]JimClark 07.08.17 0:51

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

Membro desde : 15/08/2016
Mensagens : 109
Pontos : 201

http://ccm-npc.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Criar chatbox retrátil com JavaScript

Mensagem por Luiz 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
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

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