Criar chatbox retrátil com JavaScript

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

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.

https://image.prntscr.com/image/qSGMsOKHQRON4BFXQ7OZXA.png
Experimente o tutorial: https://ajuda.forumeiros.com/t56720-tutorial-mudar-a-chatbox-de-sitio

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?

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'.

Boa noite, pessoal!

Jim, meu caro, você preencheu esta seleção como sim:

http://prntscr.com/g56rwq

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

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:

http://prntscr.com/g56rwq

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

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!

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'.

Ele não aparece quando você modifica para a esquerda porque provavelmente, está configurado com a largura 0:

"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

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!

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/

Resolvido pode fechar, obrigado a todos que tentaram ajudar!