Chatbox retrátil no canto do fórum

[Lucas Makuso]

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?

[Hancki]

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

[Lucas Makuso]

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?

[Hancki]

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

[Lucas Makuso]

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

[Hancki]

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

[Sennior]

Saudações,

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

Até mais.
Sennior

[Lucas Makuso]

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

[Fraise]

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

[Lucas Makuso]

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.

[Fraise]

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.

[Lucas Makuso]

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]

Up!

[Fraise]

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:
https://i.servimg.com/u/f21/18/21/41/30/chat10.gif

Até mais.
Fraise

[Lucas Makuso]

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?

[Fraise]

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.

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