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
Conectar-se

Esqueci minha senha

Últimos assuntos
» Como trasnferir um site do wix para forumeiros?
Hoje à(s) 02:18 pm por iScroll

» Como fazer sub entrada?
Hoje à(s) 02:04 pm por Czins

» Como ocultar iframe de um tópico para visitantes
Hoje à(s) 01:46 pm por Luiz

» MP para administradores
Hoje à(s) 01:42 pm por Luiz

» Caixa de Login
Hoje à(s) 01:20 pm por iScroll

» Personalizar cabeçalho
Hoje à(s) 01:12 pm por iScroll

» Personalizar posts
Hoje à(s) 11:00 am por Harleen

Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Parceiros Forumeiros
Os membros mais ativos da semana
Harleen
 
Kyo Panda
 
APOllO
 
odelgado
 
Kyko
 
mrvisible
 
Shek
 
Luiz
 
iScroll
 
rlmac
 

Quem está conectado
300 usuários online :: 7 usuários cadastrados, 1 Invisível e 292 Visitantes :: 3 Motores de busca

alexandro.tadeu, Czins, iScroll, Kyo Panda, Luiz, odelgado, Shek

[ Ver toda a lista ]


O recorde de usuários online foi de 3131 em 24/12/09, 01:05 pm

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 09/01/17, 05:32 pm

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
avatar

Troubleshoot
Usuário experiente

Masculino
Inscrito dia : 25/09/2011
Mensagens : 2184
Pontos Ativos : 2913

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

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

Mensagem por Kyo Panda em 09/01/17, 05:43 pm

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

Yep. Precisaremos destes caras para dar continuidade. Feliz
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 3789
Pontos Ativos : 5012

http://ajuda.forumeiros.com

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

Mensagem por Troubleshoot em 09/01/17, 05:50 pm

@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
avatar

Troubleshoot
Usuário experiente

Masculino
Inscrito dia : 25/09/2011
Mensagens : 2184
Pontos Ativos : 2913

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

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

Mensagem por Kyo Panda em 09/01/17, 06:04 pm

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
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 3789
Pontos Ativos : 5012

http://ajuda.forumeiros.com

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

Mensagem por Troubleshoot em 09/01/17, 06:08 pm

@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
avatar

Troubleshoot
Usuário experiente

Masculino
Inscrito dia : 25/09/2011
Mensagens : 2184
Pontos Ativos : 2913

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

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

Mensagem por Kyo Panda em 10/01/17, 08:06 am

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
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 3789
Pontos Ativos : 5012

http://ajuda.forumeiros.com

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

Mensagem por Troubleshoot em 10/01/17, 09:34 am

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
avatar

Troubleshoot
Usuário experiente

Masculino
Inscrito dia : 25/09/2011
Mensagens : 2184
Pontos Ativos : 2913

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 10/01/17, 09:48 am

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

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 3789
Pontos Ativos : 5012

http://ajuda.forumeiros.com

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

Mensagem por Troubleshoot em 11/01/17, 03:19 pm

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


Mais muito obrigado! Dúvida resolvida.
avatar

Troubleshoot
Usuário experiente

Masculino
Inscrito dia : 25/09/2011
Mensagens : 2184
Pontos Ativos : 2913

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 11/01/17, 03:24 pm

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".
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 3789
Pontos Ativos : 5012

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