Bienvenid@s al Foro del Pueblo
Este es su foro de expresión. Le invitamos a compartir sus temas y comentarios. Temática variada: farándula, música, religión, política, etc.

 
ÍndiceÍndice  CalendarioCalendario  FAQFAQ  BuscarBuscar  MiembrosMiembros  Grupos de UsuariosGrupos de Usuarios  RegistrarseRegistrarse  ConectarseConectarse  
Saludos amigos: A nombre de la administración del foro. Quiero darles las gracias por el apoyo que nos han brindado, donde cada uno de sus comentarios y opiniones han sido importantes para nosotros. Gracias Atentamente Admin

Comparte|

Como ocultar el chat en un boton como aqui

Ver el tema anterior Ver el tema siguiente Ir abajo
MensajeAutor
MensajeTema: Como ocultar el chat en un boton como aqui Vie Mayo 23, 2014 2:42 pm

Mi preguanta es esa, como podria ocultar el chat de mi foro como lo hacen Ustedes, con el boton que aparece abajo a la derecha.

Desde ya muchas gracias por la respuesta...

Saludos
fertrones
Invitado
Volver arriba Ir abajo
MensajeTema: Re: Como ocultar el chat en un boton como aqui Jue Mayo 29, 2014 1:59 pm

Saludos fertrones y bienvenido

Antes que nada aclaro que el código no es mio, es una estrategia para poner el chatbox desplegable en la esquina. Y es sacada de la pagina de foroactivo el foro de los foros. Yo solo la use para poner un chat IRC en el, aunque puedes poner cualquier frame.

En resumen creas un nuevo javascript, En tu Portal Administrativo, vas a "Módulos" y luego a "Gestión de los códigos JavaScript y creas uno nuevo. En mi caso para recordar de que se trata le Puse por nombre ChatBox, y marque en Posición: En todas las paginas.

Luego pegas y registras:


Código:

//Inicio variables a editar por el usuario
    var imagen_chatbox_desplegable = "http://i37.servimg.com/u/f37/15/27/41/23/chat10.png";
    var posicion_chatbox_desplegable = "derecha"; //Admite también 'izquierda'
    //Fin variables a editar por el usuario

    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 o cerrar el Chat\" src=\"" + imagen_chatbox_desplegable + "\">");
    document.write("        <\/span>");
    document.write("        <span id=\"chatbox_ret_offline\"><\/span>");
    document.write("    <\/div>");
    document.write("    <iframe src=\"http://wapaforo.webcindario.com/wchat/index.html\" width=640  height=420 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>");




El http://wapaforo.webcindario.com/wchat/index.html es la pagina donde tengo el WEBCHAT IRC, esa la sustituyes por lo que quieras mostrar. Ejemplo un chat, una reproductor web, un XAT box o cualquier otra cosa.

Las URL que terminan en PNG, es la imagen que presionas para que se desplace. Están en PNG porque ese tipo de imagen soporta transparencia.

Luego vas a Visualización, Imágenes y Colores, Colores, y en CSS Stylesheet:

La mayoría del código esta ajustado para la chatbox que trae por defecto el foro, pero lo que nos interesa es
height: 400px;
width: 640px;
Que deben quedar del mismo tamaño que el iframe del javascript deben coincidir

Código:

#chatbox_ret_cont{
 x-index: 10000;
 z-index: 999;
 background-color: transparent;
 position: fixed;
 bottom: 0;
}
#chatbox_ret_cont.chatbox_derecha{
  right: 0;
}
#chatbox_ret_cont.chatbox_izquierda{
  left: 0;
}
#chatbox_ret_cont div{
  cursor: pointer;
}
#chatbox_ret_cont iframe#chatbox_ret{
  background-color: white;
  border: 2px solid grey;
  display: none;
  height: 400px;
  margin-bottom: 0;
  width: 640px;
}

#chatbox {
  background-color:  white;
  -moz-border-radius: px;
  -webkit-border-radius:5px;
}

#chatbox_members {
  background-color: #FFFFFF;
}

#chatbox_footer {
  background-color: #FFFFFF;
}
    .chatbox_row_1 {
      padding: 4px;
      background-color:  transparent;
      }
    .chatbox_row_2 {
      padding: 4px;
      background-color:  transparent;
      }
    .chatbox_row_3 {
      padding: 4px;
      background-color:  transparent;
      }
    .chatbox {
      background-color:  white;
      }
    .chatfootertable {
      background-color:  transparent;
      }
    .chatbox {
      -moz-border-radius: px;
      -webkit-border-radius:5px;
      }




Disculpa la demora.
Admin
Admin Masculino Tauro Mensajes : 48
Fecha de inscripción : 16/05/2011
Edad : 105
Localización : Puerto Rico
Ver perfil de usuario http://www.wapaforo.com
Volver arriba Ir abajo

Como ocultar el chat en un boton como aqui

Ver el tema anterior Ver el tema siguiente Volver arriba
Página 1 de 1.
Permisos de este foro:No puedes responder a temas en este foro.
WAPA TV Alternativo :: El Foro Del Pueblo :: Rincón Técnico-

Cambiar a: