Chatbox na barra de ferramentas do fórum

E se nós inovássemos com o Chatbox? Neste tutorial nós iremos ensinar a vocês como colocar o Chatbox na barra de ferramentas do fórum, isso mesmo a barra de ferramentas. Para isso primeiramente siga a explicação do primeiro passo para gerir a ativação da barra de ferramentas em teu fórum.



1º - Ativando a Barra de Ferramentas:
Antes de mais nada, precisamos ativar a Barra de ferramentas para que o efeito seja sobre posto sobre ela:

Ativar barra de ferramentasCorrespondente a ativação da barra de ferramentas em teu fórum.

Fixar barra de ferramentas É destinada a escolher se haverá scrolling ao rolar a pagina e a barra de ferramentar mover juntamente com a página.

Cor Cor da barra de ferramentas, se refere a ela toda.

Cor do texto A cor do texto que ficará na barra de ferramentas.

2º - Noção básica da função:
As páginas javascript ativas em seu fórum possibilita inserir scripts e jquery para personalizar seu fórum, contudo é importante saber que qualquer script encontrado na internet acabam por não surgir efeito nos fóruns.

Título Correspondente ao nome da página JavaScript/jQuery que será criada.

Localização São destinados os devidos locais para onde você aplicará os efeitos do JavaScript nos fóruns. No nosso caso, aplicaremos Em todas as páginas.

Código JavaScript Campo destinado para receber os códigos JavaScript e jQuery.

Habilitar o gerenciamento dos códigos JavaScript Ao selecionar a opção sim, estará ativando a função páginas Javascript no seu fórum. Se selecionar não, as páginas serão desabilitadas no fórum.

2º - Código a ser usado:
O código que estaremos utilizando é um JavaScript e não esqueça que o investimento é Em todas as páginas:

Código:

$(function(){$(function(){
  var config = {
    width : '700px',
    height : '350px',
    mod_icon : 'default',
    msgnotif : true,
    timestamp : true,
    connection_logs : true
  },
  fa_chat = cre('IFRAME'), fa_button = cre('A'), fa_members = cre('SPAN'), fa_style = cre('STYLE'), fa_right = getId('fa_right'), frame,
      css = '#fa_chat_button{line-height:30px;padding:0 5px;color:#FFF;cursor:pointer;} .fa_actif{background:#FFF !important;color:#000 !important;} .fa_new{background:#FF8 !important;color:#000 !important;} #fa_chat{background:#FFF;width:'+config.width+';height:'+config.height+';border:1px solid #000;border-top:none;position:absolute;top:30px;right:39px;}';

  if (!fa_right || !_userdata.session_logged_in) return;
  
  // set stylesheet
  fa_style.type = 'text/css';
  if (fa_style.styleSheet) fa_style.styleSheet.cssText = css;
  else fa_style.appendChild(document.createTextNode(css));
  document.getElementsByTagName('HEAD')[0].appendChild(fa_style);
  
  // members attributes
  fa_members.id = 'fa_members';
  fa_members.innerHTML = '(0)';
  
  // fa_button attributes
  fa_button.innerHTML = 'Chat ';
  fa_button.id = 'fa_chat_button';
  fa_button.className = 'rightHeaderLink';
  fa_button.appendChild(fa_members);
  fa_right.insertBefore(fa_button,fa_right.lastChild);
  
  // fa_chat attributes
  fa_chat.id = 'fa_chat';
  fa_chat.src = '/chatbox';
  fa_chat.style.display = 'none';
  fa_right.insertBefore(fa_chat,fa_right.lastChild);
  
  fa_chat.onload = function() {
    if (fa_chat.contentDocument) frame = fa_chat.contentDocument;
    else if (fa_chat.contentWindow) frame = fa_chat.contentWindow.document;
    var memb_thn = getLength('chatbox_members','LI'), memb_now = memb_thn,
        msg_thn = getLength('chatbox','P'), msg_now = msg_thn;
    
    // set some data..
    fa_members.innerHTML = '('+memb_thn+')';
   
    // kill the interval if archives are enabled
    var a = frame.getElementsByTagName('A');
    for (i=0; i<a.length; i++) if (/archives/.test(a[i].href)) a[i].onclick = function() { window.clearInterval(fa_chat_refresh) };
    
    // execute code in an interval
    fa_chat_refresh = window.setInterval(function() {
      // START chat members
       memb_now = getLength('chatbox_members','LI'), msg_now = getLength('chatbox','P');
      if (memb_now > memb_thn || memb_now < memb_thn) {
        memb_thn = memb_now;
        fa_members.innerHTML = '('+memb_now+')'
      }
      // END chat members
      
      // START chat notification
      if (config.msgnotif) {
        if (msg_now > msg_thn || msg_now < msg_thn) {
          if (!/fa_new/.test(fa_button.className) && chatState(/none/) && !/none/.test(frame.getElementById('chatbox_option_autorefresh').style.display)) fa_button.className += ' fa_new';
          msg_thn = msg_now;
        }
      }
      // END chat notification
      
      // START timestamp
      if (!config.timestamp) {
        var date = frame.getElementsByTagName('SPAN'),i;
        for (i=0; i<date.length; i++) if (/date-and-time/.test(date[i].className) && date[i].style.display != 'none') date[i].style.display = 'none';
      }
      // END timestamp
      
      // START connection logs
      if (!config.connection_logs) {
        var logs = frame.getElementsByTagName('SPAN'),i;
        for (i=0; i<logs.length; i++) if (/red/i.test(logs[i].style.color) || /green/i.test(logs[i].style.color)) if (!/none/.test(logs[i].parentNode.parentNode.style.display)) logs[i].parentNode.parentNode.style.display = 'none';
      }
      // END connection logs
      
      // START mod icon
      if (config.mod_icon.toLowerCase() != 'default') {
        var s = frame.getElementsByTagName('STRONG'),i;
        for (i=0; i<s.length; i++) if (/@/.test(s[i].innerHTML) && s[i].innerHTML.length === 1 && !/msg/.test(s[i].parentNode.parentNode.className)) s[i].innerHTML = config.mod_icon;
      }
      // END mod icon
    },1);
  };

  // toggle chat display
  fa_button.onclick = function() { 
    if (/welcome/.test(fa_right.className)) removeClass(fa_right, /welcome/);
    if (/notification/.test(fa_right.className)) removeClass(fa_right, /notification/);
    if (chatState(/none/)) {
      fa_chat.style.display = 'block';
      fa_button.className += ' fa_actif';
      if (/fa_new/.test(fa_button.className)) removeClass(fa_button, /fa_new/); 
      frame.getElementById('chatbox').scrollTop = 99999;
    } else hideChat();
  };
  
  // hide chat when toolbar options clicked
  getId('fa_welcome').onclick = function() { hideChat() };
  getId('fa_notifications').onclick = function() { hideChat() };
  getId('fa_hide').onclick = function() { hideChat() };
  
  // chatbox functions
  function hideChat() { if (chatState(/block/)) fa_chat.style.display = 'none'; removeClass(fa_button, /fa_actif/) };
  function chatState(reg) { return reg.test(fa_chat.style.display) };
  function getLength(id, tag) { return frame.getElementById(id).getElementsByTagName(tag).length };
  
  // basic functions
  function getId(id) { return document.getElementById(id) };
  function cre(el) { return document.createElement(el) };
  function removeClass(el, reg) { el.className = el.className.replace(reg,''); };
})});

Resultado:

---