Staff en línea
Últimos temas
[Ocio] Contemos hasta el 5000
por Chalo Ayer a las 11:27 pm

[recursos] Pack Rangos
por elvinson Vie Ene 19, 2018 6:05 pm

[aviso] Bugs: cambios en el foro
por YoshiGM Jue Ene 18, 2018 8:00 pm

[Pedido] Rangos para el Staff
por YoshiGM Jue Ene 18, 2018 2:11 pm

[recursos] Añadir chatbox a la toolbar
Tema iniciado por y Añadir a favoritos

[recursos] Añadir chatbox a la toolbar 
el Jue Feb 16, 2017 8:11 pm
staff

[bkg]http://i.imgur.com/fiMUKFbh.gif [/bkg]
Este tutorial le ayudará a agregar la ventana de chat a la barra de herramientas en su foro de ForoActivo. Así que se puede chatear con sus miembros de cualquier página.



Incluye algunas características adicionales de la ventana de chat por defecto, como las notificaciones de sonido y de la barra de herramientas, para saber cuándo un mensaje nuevo mientras está conectado en el chat. Así como una pequeña barra en el botón para mostrar el total de miembros en la ventana de chat.

Nota: Debe tener activada la ventana de chat, así como la barra de herramientas.

Para activar la ventana de chat : Panel de Administración> Módulos> Chatbox> Config> Active la ventana de chat: Sí

para permitir que la barra de herramientas : Panel de Administración> Módulos> Barra de Herramientas> Configuración> Activar la barra de herramientas: Sí


[ok]CSS[/ok]
En primer lugar es necesario instalar un poco de CSS. Ir a Panel de Administración> Pantalla> Colores> hoja de estilo CSS y pegar los códigos siguientes:
[codebox]
Código:
#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;
}
[/codebox]

Puede cambiar el estilo a su gusto.


[ok]JavaScript[/ok]
Ahora añadir la ventana de chat a la barra de herramientas que necesita para crear un nuevo guión. Ir a Panel de Administración> Módulos> JavaScript gestión de códigos y crear un nuevo guión con la siguiente configuración.


Título: FA Barra de herramientas de chat
Colocación: En todas las páginas
[codebox]
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);
  });
})();
[/codebox]

Guarde el script para finalizar la instalación. Si desea hacer cualquier modificación en la ventana de chat, por favor consulte la siguiente sección.


[ok]Modificaciones[/ok]
Cerca de la parte superior de la secuencia de comandos es un objeto denominado config , este contiene la configuración general que se enumeran más abajo.

altura: Establece la altura de la ventana de chat. Puede utilizar píxeles, por ciento, em, etc .. El valor por defecto es 60%.

anchura: Establece el ancho de la ventana de chat. Una vez más, se puede utilizar píxeles, por ciento, em, etc .. El valor por defecto es 70%.

live_notif: Activa / desactiva la notificación emergente en directo cuando un mensaje nuevo. El valor predeterminado es true (activada), establece en false para deshabilitar las notificaciones en vivo. Las notificaciones sólo se mostrará mientras está conectado a la ventana de chat y usted tiene el chat oculto.



sound_notif : Este contiene dos ajustes para la notificación de sonido:

enabled: Especifica si la notificación de sonido está activada. El valor predeterminado es true (activada), establece en false para deshabilitar las notificaciones de sonido.

file: Esto le permite cambiar el sonido de notificación. Si desea cambiar el sonido, todo lo que tiene que hacer es reemplazar la URL actual con su propio archivo de audio MP3.

notifRate: Este ajuste determina la velocidad a la que las notificaciones se activan de nuevo. La colocación de este a un valor más bajo hará que las notificaciones que aparezcan con más frecuencia cuando se presenten nuevos mensajes. El valor por defecto es 10000ms (10 segundos).


Además hay otro objeto de configuración de datos de lenguaje llamado lang . Este objeto se encuentra bajo la configuración, por lo que si desea cambiar cualquiera de los textos que se pueden hacer eso aquí. Sólo hay dos configuraciones de idioma:

chatbox: Los textos para el botón de ventana de chat en la barra de herramientas.

new_msg: Los textos de notificación en vivo para cuando un mensaje nuevo.


[ok]Resumen[/ok]
Una vez que la ventana de chat está instalado y haya terminado de realizar modificaciones .. todo lo que queda es hacer clic en el botón ventana de chat en la barra de herramientas para comenzar a chatear con sus miembros!



Este tutorial fue escrito por Ange Tuteur .
Fibo
avatar

¿Que estoy pensando? :

Estamos en Open, Estamos en Familia [table class=fecha_up][td]Se modifico:1/02/17 - 19:06 hrs.[/td][/table]


Banner en temas :

http://i.imgur.com/R9vnOcf.jpg


Color de titulos :

#fff


Sombra titulo :

1px 1px 1px #fff


Mensajes :

409


Puntos :

617


Me gusta :

120


ingreso :

11/09/2015


Sexo :

Masculino

Plataforma :

PhpBB3


Navegador :

Chrome


Ver perfil de usuario http://www.opensourcephpbb3.com

Volver arriba Ir abajo

Re: [recursos] Añadir chatbox a la toolbar 
el Vie Feb 17, 2017 10:36 am
Gracias por el aporte fibo
YoshiGM
avatar

¿Que estoy pensando? :

1000 mensajes en OpenSource :D [table class=fecha_up][td]Se modifico:2/01/18 - 21:40 hrs. [/td][/table]


Banner en temas :

http://i19.servimg.com/u/f19/13/45/80/80/banner10.jpg


Color de titulos :

#fff


Sombra titulo :

1px 1px 1px #555


Mensajes :

1032


Puntos :

1380


Me gusta :

194


ingreso :

17/12/2014


Sexo :

Masculino

Plataforma :

PhpBB3


Navegador :

Chrome


Ver perfil de usuario https://www.yoshifansclub.net

Volver arriba Ir abajo

Re: [recursos] Añadir chatbox a la toolbar 
el Vie Jul 21, 2017 9:11 pm
¡Excelente! ¡Muchas gracias por el aporte!
Nebel
avatar

¿Que estoy pensando? :

Escribe lo que tienes en mente [table class=fecha_up][td]Se modifico:10/7/15 - 15:25 hrs.[/td][/table]


Banner en temas :

http://i64.tinypic.com/2i8tzma.jpg


Color de titulos :

#333


Sombra titulo :

1px 1px 1px #fff


Mensajes :

3


Puntos :

4


Me gusta :

1


ingreso :

21/07/2017


Sexo :

Femenino

Plataforma :

phpbb3


Navegador :

firefox


Ver perfil de usuario

Volver arriba Ir abajo

Re: [recursos] Añadir chatbox a la toolbar 
el Vie Ago 04, 2017 7:58 pm
staff
excelente aporte...
Dosh
avatar

¿Que estoy pensando? :

Caballo sin nombre... [table class=fecha_up][td]Se modifico:31/07/17 - 20:22 hrs. [/td][/table]


Banner en temas :

http://i.imgur.com/FzYAhXk.jpg


Color de titulos :

#fff


Sombra titulo :

1px 1px 1px #fff


Mensajes :

1481


Puntos :

2155


Me gusta :

396


ingreso :

07/12/2014


Sexo :

Masculino

Plataforma :

punbb


Navegador :

Chrome


Ver perfil de usuario http://www.telefoneros.com/

Volver arriba Ir abajo

Re: [recursos] Añadir chatbox a la toolbar 
el Mar Sep 12, 2017 8:35 pm
se ve interesante lo probare!
forobit
avatar

¿Que estoy pensando? :

Esperando todo [table class=fecha_up][td]Se modifico:21/09/17 - 13:37 hrs. [/td][/table]


Banner en temas :

http://i64.tinypic.com/2i8tzma.jpg


Color de titulos :

#333


Sombra titulo :

1px 1px 1px #fff


Mensajes :

8


Puntos :

8


Me gusta :

0


ingreso :

12/09/2017


Sexo :

Masculino

Plataforma :

PhpBB3


Navegador :

Chrome


Ver perfil de usuario

Volver arriba Ir abajo

 En la misma categoria


Permisos de este foro:
No puedes responder a temas en este foro.