Fórum dos Fóruns

Fórum dos Fóruns Forumeiros

Welcome FdF Bem-vindo ao fórum de suporte Forumeiros  Muito feliz


Para aproveitar tudo o que o nosso fórum lhe oferece, agradecemos que se identifique, se já é nosso membro, ou que se junte à nossa comunidade, fazendo o seu registo.
Acesso rápido

Fóruns de suporte oficiais
Login

Esqueci minha senha

Últimos assuntos
Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Parceiros Forumeiros
Os membros mais ativos da semana
Kyo Panda
 
Shek Crowley
 
vitorsali
 
while
 
fiapinho
 
iScroll
 
Fou-Lu
 
Kyou
 
Smoke.xX
 
Neimasinho
 

Quem está conectado
314 usuários online :: 11 usuários cadastrados, 1 Invisível e 302 Visitantes :: 1 Motor de busca

E.Jesus, Ednaldo Hitmam, Harleen, Kyo Panda, PESS_dodo, SeuRaymundo, Shek Crowley, TZero, vitorsali, William_iHarDz, xBreninho_.

[ Ver toda a lista ]


O recorde de usuários online foi de 3131 em Qui 24 Dez 2009 - 15:05

Chatbox na Barra de Ferramentas (Mudança para botão em menu)

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

Resolvido Chatbox na Barra de Ferramentas (Mudança para botão em menu)

Mensagem por Troubleshoot em Seg 9 Jan 2017 - 19:32

Detalhes da questão


Endereço do fórum: http://www.libertytelecomctba.com.br/
Versão do fórum: Invision

Descrição


Olá Comunity Forumety
Eu estava dando uma passeada pelo Help Forumotion, ai páaah, vi esse tutorial(eu sei que ele está disponível aqui no Fdf) então, tive a ideia de adicionar este efeito em um botão no qual irei adicionar no menu.

O tutorial:
http://help.forumotion.com/t143414-add-the-chatbox-to-your-toolbar

O que desejo:
O mesmo efeito do botão chatbox na barra de ferramentas, porem, preciso adiciona-lo em um menu no qual estou fazendo(acredito que vou precisar do código HTML, CSS e .JS)


Vamos começar 2017, diferente, inovadoramente! Festa azul

Troubleshoot
Usuário experiente

Masculino
Inscrito dia : 25/09/2011
Mensagens : 2182
Pontos Ativos : 4886

http://guiatecnico.ativo-forum.com/

Resolvido Re: Chatbox na Barra de Ferramentas (Mudança para botão em menu)

Mensagem por Kyo Panda em Seg 9 Jan 2017 - 19:43

(acredito que vou precisar do código HTML, CSS e .JS)

Yep. Precisaremos destes caras para dar continuidade. Feliz


Bem vindo ao Fórum dos Fóruns. Antes de começar a postar, por favor, queira visitar alguns links importantes:
Regulamento e informações afins:
Flecha ajudeiros Condições gerais de uso & equipe voluntária de suporte.
Flecha ajudeiros Lista de perguntas e respostas e Tutoriais e astúcias.
Flecha ajudeiros Sistema de busca do fórum.
Fóruns interessantes:
Flecha ajudeiros Ajuda e Suporte.
Flecha ajudeiros Serviços Extras.
Flecha ajudeiros Publicidade & SEO.
Flecha ajudeiros Sugestões e Melhoras.
Desenvolvedores:
Flecha ajudeiros Addons ou Plugins.
Flecha ajudeiros Desenvolvimento Beta.

Kyo Panda
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 2287
Pontos Ativos : 5209

http://ajuda.forumeiros.com

Resolvido Re: Chatbox na Barra de Ferramentas (Mudança para botão em menu)

Mensagem por Troubleshoot em Seg 9 Jan 2017 - 19:50

@Kyo Panda
Obrigado por sua resposta!(eu sei que sua internet é da NASA)
Mas meu caro, na verdade eu preciso do código para fazer o efeito em um botão hehe

Ainda estou montando o código do meu menu, mais preciso deste para já adiciona-lo.(Acredite, vou levar algum tempo para montar o código do menu, já que vou ter que "puxar" via JS as divs do perfil para este.)

Thnks! Piscada

Troubleshoot
Usuário experiente

Masculino
Inscrito dia : 25/09/2011
Mensagens : 2182
Pontos Ativos : 4886

http://guiatecnico.ativo-forum.com/

Resolvido Re: Chatbox na Barra de Ferramentas (Mudança para botão em menu)

Mensagem por Kyo Panda em Seg 9 Jan 2017 - 20:04

O problema é não saber o atributo do elemento HTML para bindar o botão. Mas, a grosso modo:

Código:
(function() {
  if (!window.FA) window.FA = {};
  if (FA.Chat) {
    if (window.console) console.warn('FA.Chat has already been initialized');
    return;
  }
 
  FA.Chat = {
 
    // chatbox settings
    config : {
      height : '60%',
      width : '70%',
   
      live_notif : true,
      sound_notif : {
        enabled : true,
        file : 'http://illiweb.com/fa/fdf/zelda.mono.mp3'
      },
      notifRate : 10000
    },
 
    // language settings
    lang : {
      chatbox : 'Chatbox',
      new_msg : 'A new message has been posted in the <a href="javascript:FA.Chat.toggle();">chatbox</a>.'
    },
 
    // technical data below
    node : {}, // node cache
    users : 0, // users in chat
    messages : 'initial', // total chat messages
    actif : false, // tells us if the chatbox is opened
    notifActif : false, // tells us if the notifications are active
 
    // initial setup of the chatbox
    init : function() {
      var right = document.getElementById('fa_right'),
          container = document.createElement('DIV'),
          button = document.createElement('A'),
          audio;
 
      button.id = 'fa_chat_button';
      button.innerHTML = FA.Chat.lang.chatbox + ' <span id="fa_chatters">(0)</span>';
      button.onclick = FA.Chat.toggle;
      FA.Chat.node.button = button;
 
      container.id = 'fa_chat_container';
      container.innerHTML = '<iframe id="fa_chat" src="/chatbox/index.forum"></iframe>';
      container.style.width = FA.Chat.config.width;
      container.style.height = FA.Chat.config.height;
      container.style.bottom = '-' + FA.Chat.config.height;
      container.style.visibility = 'hidden';
 
      if (right) {
        right.insertBefore(button, right.lastChild); // add the chat button to the right side of the toolbar
        document.body.appendChild(container);
     
        // create the notification audio element
        if (FA.Chat.config.sound_notif.enabled) {
          audio = document.createElement('AUDIO');
          audio.src = FA.Chat.config.sound_notif.file;
          if (audio.canPlayType) {
            FA.Chat.node.audio = audio;
            document.body.appendChild(audio);
          }
        }
 
        FA.Chat.node.container = document.getElementById('fa_chat_container');
        FA.Chat.node.chatters = document.getElementById('fa_chatters');
        FA.Chat.node.frame = document.getElementById('fa_chat');
        FA.Chat.node.frame.onload = FA.Chat.getFrame;
      }
   
      delete FA.Chat.init;
    },
 
    // get the frame window, document, and elements
    getFrame : function() {
      if (FA.Chat.poll) window.clearInterval(FA.Chat.poll);
      if (this.contentDocument || this.contentWindow) {
        FA.Chat.window = this.contentWindow;
        FA.Chat.document = this.contentDocument ? this.contentDocument : FA.Chat.window.document;
     
        FA.Chat.node.message = FA.Chat.document.getElementById('message');
        FA.Chat.node.members = FA.Chat.document.getElementById('chatbox_members');
     
        FA.Chat.poll = window.setInterval(FA.Chat.listen, 300); // listen for changes every 0.3 seconds
      }
    },
 
    // listen for changes in the chatbox
    listen : function() {
      var users = FA.Chat.node.members.getElementsByTagName('LI').length,
          messages = FA.Chat.window.chatbox.messages.length;
   
      // update user count
      if (users > FA.Chat.users || users < FA.Chat.users) {
        FA.Chat.users = users;
        FA.Chat.node.chatters.innerHTML = '(' + FA.Chat.users + ')';
      }
   
      // initial / active updates
      if ((FA.Chat.messages == 'initial' && messages) || FA.Chat.notifActif || FA.Chat.actif) FA.Chat.messages = messages;
   
      // notify new messages while connected and the chatbox is closed
      if (!FA.Chat.actif && !FA.Chat.notifActif && FA.Chat.window.chatbox.connected && (messages > FA.Chat.messages || messages < FA.Chat.messages)) {
        FA.Chat.messages = messages; // update message count
        FA.Chat.notifActif = true;
     
        if (FA.Chat.config.live_notif) FA.Chat.notify(FA.Chat.lang.new_msg); // show live notification
        if (FA.Chat.config.sound_notif.enabled && FA.Chat.node.audio) FA.Chat.node.audio.play(); // play sound notification
     
        // wait before notifying the user again
        window.setTimeout(function() {
          FA.Chat.notifActif = false;
        }, FA.Chat.config.notifRate);
      }
    },
 
    // create a custom notification
    notify : function(msg) {
   
      var notif = document.createElement('DIV'),
          live = document.getElementById(Toolbar.LIVE_NOTIF);
       
      notif.className = 'fa_notification';
      notif.innerHTML = '<div class="content ellipsis">' + msg + '</div>';
      notif.style.display = 'none';
   
      $(notif).mouseover(function() { $(this).stop(true, true) });
      $(notif).mouseleave(function() { $(this).delay(5000).fadeOut() });
   
      live.insertBefore(notif, live.firstChild);
      $(notif.firstChild).dotdotdot();
   
      $(notif).fadeIn(100, function() { $(this).delay(10000).fadeOut() });
    },
 
    // toggle the display state of the chatbox
    toggle : function() {
      var container = FA.Chat.node.container.style;
     
      if (/hidden/i.test(container.visibility)) {
        FA.Chat.node.button.className = 'fa_chat_active';
        FA.Chat.actif = true;
       
        container.visibility = 'visible';
        container.bottom = '3px';
       
        // auto focus the message field
        window.setTimeout(function() {
          FA.Chat.node.message.focus();
        }, 350); // some browsers ( firefox ) need a delay
      } else {
        FA.Chat.node.button.className = '';
        FA.Chat.actif = false;
       
        container.visibility = 'hidden';
        container.bottom = '-' + FA.Chat.config.height;
      }
    }
 
  };
 
  $(function(){
    // initialize the chat when the document is ready and the user is logged in
    if (_userdata.session_logged_in) $(FA.Chat.init);
  });
})();

Nessa linha:

Código:
var right = document.getElementById('fa_right'),

É definido o elemento que o chat (e seu botão) será inserido. O senhor pode configurá-lo como bem desejar.

Agora para realizarmos o processo completo, precisaria do HTML/CSS/JS da sua barra para garantirmos o funcionamento correto.

Pensativo


Bem vindo ao Fórum dos Fóruns. Antes de começar a postar, por favor, queira visitar alguns links importantes:
Regulamento e informações afins:
Flecha ajudeiros Condições gerais de uso & equipe voluntária de suporte.
Flecha ajudeiros Lista de perguntas e respostas e Tutoriais e astúcias.
Flecha ajudeiros Sistema de busca do fórum.
Fóruns interessantes:
Flecha ajudeiros Ajuda e Suporte.
Flecha ajudeiros Serviços Extras.
Flecha ajudeiros Publicidade & SEO.
Flecha ajudeiros Sugestões e Melhoras.
Desenvolvedores:
Flecha ajudeiros Addons ou Plugins.
Flecha ajudeiros Desenvolvimento Beta.

Kyo Panda
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 2287
Pontos Ativos : 5209

http://ajuda.forumeiros.com

Resolvido Re: Chatbox na Barra de Ferramentas (Mudança para botão em menu)

Mensagem por Troubleshoot em Seg 9 Jan 2017 - 20:08

@Kyo Panda
o elemento fa_right é aonde será adicionado o botão do chatbox, certo? Eu gostaria apenas deste botão sem o uso do código .JS

Muito feliz

Troubleshoot
Usuário experiente

Masculino
Inscrito dia : 25/09/2011
Mensagens : 2182
Pontos Ativos : 4886

http://guiatecnico.ativo-forum.com/

Resolvido Re: Chatbox na Barra de Ferramentas (Mudança para botão em menu)

Mensagem por Kyo Panda em Ter 10 Jan 2017 - 10:06

Eu não compreendi o que deseja. O senhor quer o HTML que o JS gera para o botão, mas sem o chat em si? huh


Bem vindo ao Fórum dos Fóruns. Antes de começar a postar, por favor, queira visitar alguns links importantes:
Regulamento e informações afins:
Flecha ajudeiros Condições gerais de uso & equipe voluntária de suporte.
Flecha ajudeiros Lista de perguntas e respostas e Tutoriais e astúcias.
Flecha ajudeiros Sistema de busca do fórum.
Fóruns interessantes:
Flecha ajudeiros Ajuda e Suporte.
Flecha ajudeiros Serviços Extras.
Flecha ajudeiros Publicidade & SEO.
Flecha ajudeiros Sugestões e Melhoras.
Desenvolvedores:
Flecha ajudeiros Addons ou Plugins.
Flecha ajudeiros Desenvolvimento Beta.

Kyo Panda
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 2287
Pontos Ativos : 5209

http://ajuda.forumeiros.com

Resolvido Re: Chatbox na Barra de Ferramentas (Mudança para botão em menu)

Mensagem por Troubleshoot em Ter 10 Jan 2017 - 11:34

Pera ai que agora até eu me confundi '-'

Eu necessito deste código do chatbox, quando clico no botão "Chatbox" ele aparece no canto inferior da tela. Mas, preciso somente deste botão com o efeito.

Com o código somente deste botão, vou adiciona-lo em um menu e não na barra de ferramentas.

Compreendeste my fryend?


Até logo mais Piscada

Troubleshoot
Usuário experiente

Masculino
Inscrito dia : 25/09/2011
Mensagens : 2182
Pontos Ativos : 4886

http://guiatecnico.ativo-forum.com/
  • 0

Resolvido Re: Chatbox na Barra de Ferramentas (Mudança para botão em menu)

Mensagem por Kyo Panda em Ter 10 Jan 2017 - 11:48

Vou tentar dar um exemplo. Supomos que o código do seu menu esteja assim:

Código:
<ul class="fa-custom-menu">
  <li><a href="/h1-">Link 1</a></li>
  <li><a href="/h2-">Link 2</a></li>
  <li><a href="/h3-">Link 3</a></li>
  <li><a href="/h4-">Link 4</a></li>
</ul>

E o senhor deseja introduzir esse botão no fim da lista. Um jeito de fazê-lo seria alterar o menu para:

Código:
<ul class="fa-custom-menu">
  <li><a href="/h1-">Link 1</a></li>
  <li><a href="/h2-">Link 2</a></li>
  <li><a href="/h3-">Link 3</a></li>
  <li><a href="/h4-">Link 4</a></li>
  <li id="fa-custom-chat"></li>
</ul>

E naquela parte do código que citei, mudar para:

Código:
var right = document.getElementById('fa-custom-chat'),

---

O script se injetará no elemento que quiser, mesmo que seja personalizado.

Kyo Panda
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 2287
Pontos Ativos : 5209

http://ajuda.forumeiros.com

Resolvido Re: Chatbox na Barra de Ferramentas (Mudança para botão em menu)

Mensagem por Troubleshoot em Qua 11 Jan 2017 - 17:19

@Kyo Panda
Eu nem imaginei em fazer isso... Tonto


Mais muito obrigado! Dúvida resolvida.

Troubleshoot
Usuário experiente

Masculino
Inscrito dia : 25/09/2011
Mensagens : 2182
Pontos Ativos : 4886

http://guiatecnico.ativo-forum.com/
  • 0

Resolvido Re: Chatbox na Barra de Ferramentas (Mudança para botão em menu)

Mensagem por Kyo Panda em Qua 11 Jan 2017 - 17:24

Somos nozes. o/

---

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.

Tópico marcado como Resolvido e movido para "Questões resolvidas".


Bem vindo ao Fórum dos Fóruns. Antes de começar a postar, por favor, queira visitar alguns links importantes:
Regulamento e informações afins:
Flecha ajudeiros Condições gerais de uso & equipe voluntária de suporte.
Flecha ajudeiros Lista de perguntas e respostas e Tutoriais e astúcias.
Flecha ajudeiros Sistema de busca do fórum.
Fóruns interessantes:
Flecha ajudeiros Ajuda e Suporte.
Flecha ajudeiros Serviços Extras.
Flecha ajudeiros Publicidade & SEO.
Flecha ajudeiros Sugestões e Melhoras.
Desenvolvedores:
Flecha ajudeiros Addons ou Plugins.
Flecha ajudeiros Desenvolvimento Beta.

Kyo Panda
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 2287
Pontos Ativos : 5209

http://ajuda.forumeiros.com

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