Chatbox retrátil no canto do fórum

4 participantes

Ir para baixo

Tópico resolvido Chatbox retrátil no canto do fórum

Mensagem por Lucas Makuso 11.09.15 23:43

Detalhes da questão


Endereço do fórum: http://digitalwars.forumeiro.com/
Versão do fórum: PhpBB3

Descrição


Bem, eu estava olhando os tutoriais de códigos e esse me chamou a atenção. https://ajuda.forumeiros.com/t56724-tutorial-chatbox-retratil-no-canto-do-forum

Fiz todos os procedimentos, mas não consegui coloca-lo para funcionar, então procurei em algum tópico parecido e achei este tópico ( https://ajuda.forumeiros.com/t96761-chatbox-retratil-no-canto-do-forum#662861 ). O Sennior havia respondido a pergunta utilizando esse Javascript, fiz como dizia ai, mas nada do código funcionar...

Alguém poderia me ajudar?
Lucas Makuso
Lucas Makuso
***

Membro desde : 28/08/2014
Mensagens : 108
Pontos : 164

http://digitalwars.forumeiro.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Chatbox retrátil no canto do fórum

Mensagem por Hancki 12.09.15 21:22

Olá!

Crie uma nova página Javascript, com Investimento em todas as páginas. Exemplo: https://i.imgur.com/qhgCRlJ.png

Adicione este código lá:
Código:
var cb_new=1;
var cbmp3='http://tinyurl.com/ma-musique-fa';

jQuery(document).ready(function(){
  jQuery('body').append('<span id="cbalarm"></span>');
});

$('body').append('<div style="border-top: 7px solid #000;border-left: 7px solid #000; border-radius: 20px 0 0 0; z-index: 10000; -moz-border-radius: 20px 0 0 0; -webkit-border-radius: 20px 0 0 0; background-color: #000; position: fixed; bottom: 0; right: 0;" onMousever="stopINT()" onClick="stopINT()" onClick="stopINT()" onMouseOut="stopINT()" id="chatbox_ret_cont"><div style="font-size: 12px; font-family: \'trebuchet ms\', serif; cursor: pointer; padding: 3px;"  onClick="(document.getElementById(\'chatbox_ret\').style.display==\'block\')?my_setcookie(\'chatbox_ret\',\'0\',0,0):my_setcookie(\'chatbox_ret\',\'1\',1,0); $(\'#chatbox_ret\').toggle(\'normal\');"><span style="color:#22ec3a" id="chatbox_ret_online">?</span> & <span style="color:#ff4037" id="chatbox_ret_offline">?</span></div><iframe src="/chatbox/chatbox.forum" id="chatbox_ret" name="chatbox_ret" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" style="width: 740px; height: 400px; display: none;" onLoad="if(cb_new) { cb_start(); cb_new=0; }"></iframe></div>')

if(parseInt(my_getcookie('chatbox_ret'))==1) document.getElementById('chatbox_ret').style.display='block';
if(!document.getElementById('i_icon_mini_login')){var oldCCB;var oldDCB;var pageTitle=document.title; var INTCB;function stopINT(){ if(INTCB!=undefined){clearInterval(INTCB);document.title=pageTitle;} return true;} function checkCB(){ if(parent.chatbox_ret.connected){ if(parent.chatbox_ret.document.getElementById('chatbox_members').childNodes.length==2) { if(parent.chatbox_ret.document.getElementById('chatbox_members').childNodes[0].className=='member-title away') { document.getElementById('chatbox_ret_online').innerHTML=0;document.getElementById('chatbox_ret_offline').innerHTML=parent.chatbox_ret.document.getElementById('chatbox_members').childNodes[1].childNodes.length; } else { document.getElementById('chatbox_ret_offline').innerHTML=0;document.getElementById('chatbox_ret_online').innerHTML=parent.chatbox_ret.document.getElementById('chatbox_members').childNodes[1].childNodes.length; } } else if(parent.chatbox_ret.document.getElementById('chatbox_members').childNodes.length>2) { document.getElementById('chatbox_ret_online').innerHTML=parent.chatbox_ret.document.getElementById('chatbox_members').childNodes[1].childNodes.length;document.getElementById('chatbox_ret_offline').innerHTML=parent.chatbox_ret.document.getElementById('chatbox_members').childNodes[5].childNodes.length; }
document.getElementById('chatbox_ret_cont').style.backgroundColor='#0b940b';document.getElementById('chatbox_ret_cont').style.borderColor='#0b940b'; parent.chatbox_ret.document.getElementById('refresh_auto').checked=true; var newDCB= parent.chatbox_ret.document.getElementById('chatbox').childNodes[ parent.chatbox_ret.document.getElementById('chatbox').childNodes.length-1].firstChild.innerHTML; if(newDCB!=oldDCB){oldDCB=newDCB;var newCCB= parent.chatbox_ret.document.getElementById('chatbox').childNodes[ parent.chatbox_ret.document.getElementById('chatbox').childNodes.length-1].childNodes[2].innerHTML; stopINT();if(newCCB!=oldCCB){ oldCCB=newCCB; jQuery('#cbalarm').html('<object id="cbalarm" type="application/x-shockwave-flash" data="http://tinyurl.com/minidew-fa" width="0" height="0" style="visibility:hidden"><param name="movie" value="http://tinyurl.com/minidew-fa" /><param name="flashvars" value="mp3='+cbmp3+'&autoplay=1" /></object>');INTCB=setInterval("document.title=(document.title==pageTitle)?'!!! New Message !!!':pageTitle;",500); setTimeout('stopINT()',300000);}}}else { document.getElementById('chatbox_ret_cont').style.backgroundColor='#940b0b';document.getElementById('chatbox_ret_cont').style.borderColor='#940b0b'; stopINT();}} function cb_start() { if(parent.chatbox_ret.connected) { oldDCB= parent.chatbox_ret.document.getElementById('chatbox').childNodes[ parent.chatbox_ret.document.getElementById('chatbox').childNodes.length-1].firstChild.innerHTML;oldCCB= parent.chatbox_ret.document.getElementById('chatbox').childNodes[ parent.chatbox_ret.document.getElementById('chatbox').childNodes.length-1].childNodes[2].innerHTML; } else { oldDCB=''; oldCCB=''; } setInterval('checkCB()',1000); parent.chatbox_ret.onfocus= parent.chatbox_ret.onkeypress= parent.chatbox_ret.onclick= parent.chatbox_ret.onblur=stopINT;}}

Deve funcionar!

Hancki
Hancki
Hancki
Membro Entusiasta

Membro desde : 03/10/2009
Mensagens : 8195
Pontos : 12250

https://ajuda.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Chatbox retrátil no canto do fórum

Mensagem por Lucas Makuso 12.09.15 22:18

Adicionei e nada resultou! Ainda tem que manter o código na descrição no fórum assim como o que está descrito no primeiro tutorial?
Lucas Makuso
Lucas Makuso
***

Membro desde : 28/08/2014
Mensagens : 108
Pontos : 164

http://digitalwars.forumeiro.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Chatbox retrátil no canto do fórum

Mensagem por Hancki 12.09.15 23:25

Não! Aquele tutorial está desatualizado quanto ao método de introdução de códigos Javascript.

Se este código não funcionou nem o de "Adaptação caixa de login", é porque tem outros códigos Javascript na página que contêm erros e então o sistema não é capaz de interpretar corretamente o resto dos códigos.

Hancki
Hancki
Hancki
Membro Entusiasta

Membro desde : 03/10/2009
Mensagens : 8195
Pontos : 12250

https://ajuda.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Chatbox retrátil no canto do fórum

Mensagem por Lucas Makuso 13.09.15 2:50

Eu exclui alguns HTML e JavaScripts que não usava mais e acabou permanecendo apenas os códigos das duas duvidas que tive (do login e do chatbox) porém continua não aparecer.

Mudei de navegador, não resultou e fui em outro computador e acontece o mesmo... O navegador que eu uso é Google Chrome e o navegador alternativo foi o Internet Explorer...
Lucas Makuso
Lucas Makuso
***

Membro desde : 28/08/2014
Mensagens : 108
Pontos : 164

http://digitalwars.forumeiro.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Chatbox retrátil no canto do fórum

Mensagem por Hancki 13.09.15 13:15

Olá de novo!

Experimente deixar só um ativo... se não der, deve ser outro código com algum erro mesmo no código fonte, talvez por edições de templates.

Hancki
Hancki
Hancki
Membro Entusiasta

Membro desde : 03/10/2009
Mensagens : 8195
Pontos : 12250

https://ajuda.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Chatbox retrátil no canto do fórum

Mensagem por Sennior 16.09.15 21:02

Saudações,

Leia este tópico e faça o que se pede:
Seta https://ajuda.forumeiros.com/t57261-

Até mais.
Sennior
Sennior
Sennior
Principal Contribuidor
Principal Contribuidor

Membro desde : 10/06/2011
Mensagens : 16379
Pontos : 20903

https://ajuda.forumeiros.com/forum https://www.facebook.com/GladstonHenriq https://twitter.com/UmGladston

Ir para o topo Ir para baixo

Tópico resolvido Re: Chatbox retrátil no canto do fórum

Mensagem por Lucas Makuso 16.09.15 22:56

Mas no casso deste tutorial, o chatbox retratil só poderia ser visto na página inicial do fórum...

Eu gostaria de algo como no primeiro tutorial, que ficaria mais ao canto e poderia ser visto em qualquer lugar (eu acho).
Lucas Makuso
Lucas Makuso
***

Membro desde : 28/08/2014
Mensagens : 108
Pontos : 164

http://digitalwars.forumeiro.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Chatbox retrátil no canto do fórum

Mensagem por Fraise 16.09.15 23:00

Olá,

Crie um novo JS com investimento em todas as páginas:
Código:
//Variáveis a editar
var imagen_chatbox_desplegable = "http://i45.servimg.com/u/f45/17/45/19/77/chat10.png";
var posicion_chatbox_desplegable = "derecha"; // ou 'izquierda'
//Fim das variáveis a editar

document.write("<div id='chatbox_ret_cont' class='chatbox_' + posicion_chatbox_desplegable + "">");
document.write("    <div onclick='(document.getElementById('chatbox_ret').style.display=='block')?my_setcookie('chatbox_ret','0',0,0):my_setcookie('chatbox_ret','1',1,0); jQuery('#chatbox_ret').toggle('normal');'>");
document.write("        <span id='chatbox_ret_online'>");
document.write("            <img title='Abrir e fechar o chatbox' src='' + imagen_chatbox_desplegable + ''>");
document.write("        <\/span>");
document.write("        <span id='chatbox_ret_offline'><\/span>");
document.write("    <\/div>");
document.write("    <iframe src='\/chatbox' id='chatbox_ret' name='chatbox_ret' ");
document.write("      scrolling='no' frameborder='0' marginwidth='0' marginheight='1px'");
document.write("      onload='if(cb_new){cb_start();cb_new=0;}'>");
document.write("    <\/iframe>");
document.write("<\/div>");

Até mais.
Fraise
Fraise
Fraise
Ajudeiro
Ajudeiro

Membro desde : 26/06/2015
Mensagens : 6566
Pontos : 8050

https://ajuda.forumeiros.com/ https://twitter.com/@FraiseFdF

Ir para o topo Ir para baixo

Tópico resolvido Re: Chatbox retrátil no canto do fórum

Mensagem por Lucas Makuso 16.09.15 23:04

O código não resultou, além de ter desativado o outro código JS que estava ativo (o único), que era relacionado ao login...

Edit: tive que retirar o código que o Fraise mandou, para que o código que estava ativo voltasse a funcionar.
Lucas Makuso
Lucas Makuso
***

Membro desde : 28/08/2014
Mensagens : 108
Pontos : 164

http://digitalwars.forumeiro.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Chatbox retrátil no canto do fórum

Mensagem por Fraise 17.09.15 14:02

Bom dia,

Tente com este:
Código:
//Variáveis a editar
var imagen_chatbox_desplegable = 'http://i45.servimg.com/u/f45/17/45/19/77/chat10.png';
var posicion_chatbox_desplegable = 'derecha'; // ou 'izquierda'
//Fim das variáveis a editar

document.write("<div id='chatbox_ret_cont' class='chatbox_" + posicion_chatbox_desplegable + "'>");
document.write("    <div onclick='(document.getElementById('chatbox_ret').style.display=='block')?my_setcookie('chatbox_ret','0',0,0):my_setcookie('chatbox_ret','1',1,0); jQuery('#chatbox_ret').toggle('normal');'>");
document.write("        <span id='chatbox_ret_online'>");
document.write(" <img title='Abrir e fechar o chatbox' src=' + imagen_chatbox_desplegable + '>");
document.write("        <\/span>");
document.write("        <span id='chatbox_ret_offline'><\/span>");
document.write("    <\/div>");
document.write("    <iframe src='\/chatbox' id='chatbox_ret' name='chatbox_ret' ");
document.write("      scrolling='no' frameborder='0' marginwidth='0' marginheight='1px'");
document.write("      onload='if(cb_new){cb_start();cb_new=0;}'>");
document.write("    <\/iframe>");
document.write("<\/div>");

Até mais.
Fraise
Fraise
Ajudeiro
Ajudeiro

Membro desde : 26/06/2015
Mensagens : 6566
Pontos : 8050

https://ajuda.forumeiros.com/ https://twitter.com/@FraiseFdF

Ir para o topo Ir para baixo

Tópico resolvido Re: Chatbox retrátil no canto do fórum

Mensagem por Lucas Makuso 17.09.15 16:55

Novamente, não resulta. Na verdade, resulta, mas não é um resultado positivo

Segue a imagem: https://i.imgur.com/a0yUZNv.png

E novamente, o código javascript que já permanecia ativo, volta a ser desativado e tenho que excluir e criar um novo, para que ele volte a funcionar.
Lucas Makuso
Lucas Makuso
***

Membro desde : 28/08/2014
Mensagens : 108
Pontos : 164

http://digitalwars.forumeiro.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Chatbox retrátil no canto do fórum

Mensagem por Lucas Makuso 20.09.15 4:13

Up!
Lucas Makuso
Lucas Makuso
***

Membro desde : 28/08/2014
Mensagens : 108
Pontos : 164

http://digitalwars.forumeiro.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Chatbox retrátil no canto do fórum

Mensagem por Fraise 25.09.15 20:26

Olá novamente e perdão pela demora!

Pelo que entendi, o senhor deseja um chatbox no seu fórum que apareça em todas as páginas, correto? Eis uma forma bem eficaz, teremos de ativar a barra de notificações/ferramentas para que o código que lhe vou passar tenha efeito.. Aceda a Painel de Controle > Módulos > Barra de Ferramentas > Configuração e em "Ativar barra de ferramenta" marque a opção "Sim".

Em seguida, deverá aceder a Painel de Controle > Visualização > Imagens & Cores > Cores > Folha de estilo CSS e adicionar o seguinte código:
Código:
/* help.forumotion.com tutorial */
#fa_chat_container {
  background:#FFF;
  border:1px solid #556682;
  border-radius:3px;
  position:fixed;
  right:3px;
  z-index:999;
  overflow:hidden;
  min-width:500px;
  min-height:250px;
  transition:300ms;
}

#fa_chat {
  border:none;
  width:100%;
  height:100%;
}

#fa_chat_button {
  color:#FFF;
  line-height:30px;
  margin-left:10px;
  padding:0 5px;
  cursor:pointer;
}

#fa_chat_button.fa_chat_active {
  color:#333;
  background:#FFF;
}

Por fim, deveremos criar um código JavaScript acedendo a Painel de Controle > Módulos > HTML & JavaScript > Gestão dos códigos JavaScript e criar um código JavaScript com investimento 'em todas as páginas' com o seguinte código:
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"></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);
  });
})();

O resultado deverá ser algo assim:
Flecha ajudeiros https://i.servimg.com/u/f21/18/21/41/30/chat10.gif

Até mais.
Fraise
Fraise
Fraise
Ajudeiro
Ajudeiro

Membro desde : 26/06/2015
Mensagens : 6566
Pontos : 8050

https://ajuda.forumeiros.com/ https://twitter.com/@FraiseFdF

Ir para o topo Ir para baixo

Tópico resolvido Re: Chatbox retrátil no canto do fórum

Mensagem por Lucas Makuso 25.09.15 22:00

Resultou! Mas agora para colocar tudo em um tópico só (se possível) teria como fixar o MENU do meu fórum abaixo do logo? Eu curti como ficou o resultado, porém a barra de notificações tampa totalmente o menu do fórum, teria alguma forma do menu que utilizo ficar abaixo do logo?
Lucas Makuso
Lucas Makuso
***

Membro desde : 28/08/2014
Mensagens : 108
Pontos : 164

http://digitalwars.forumeiro.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Chatbox retrátil no canto do fórum

Mensagem por Fraise 25.09.15 22:02

Infelizmente não lhe posso ajudar acerca dessa questão neste tópico, pois só é permitida uma dúvida por tópico. Crie um novo tópico que estou disponível em lhe ajudar. Amigos

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

Membro desde : 26/06/2015
Mensagens : 6566
Pontos : 8050

https://ajuda.forumeiros.com/ https://twitter.com/@FraiseFdF

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