Chatbox retrátil no canto do fórum

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?

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

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?

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

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

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

Saudações,

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

Até mais.
Sennior

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

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

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.

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.

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.

Up!

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

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?

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.