Pues eso.. Como hacer que un modulo sea flotante??
Para que sirve para mostrar contenido extra, generalmente contenido o banners que quieres que restalten y al hacerlo flotante obviamente resaltará mucho.
Pues manos a la obra. Primeramente explicaré a grandes rasgos lo que haremos, primero abriremos el index.php del template agergaremos la nueva posición de módulo, luego agregaremos el efecto con jQuery, despues de eso agregamos los estilos en el style.css de la plantilla y por último agregamos el contenido del módulo.
Click en “Seguir Leyendo” para seguir el tutorial completo.
Entonces lo primero que aremos sera abrir el index.php de sus plantillas para primero agregar la nueva posición de módulo en el template:
<div class="moduloflotante">
<jdoc:include type="modules" name="float" style="raw" />
</div>
Este código tienen que colocarlo dentro de las etiquetas BODY, en realidad en cualquier lugar! XD pero dentro del BODY.
Lo siguiente será agregar el efecto con el jQuery y como bien sabemos esto debe ir dentro del HEAD.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(window).scroll(function(){
$('.moduloflotante').animate({
top:$(window).scrollTop()+"px" //Esto hace que siempre mantenga la separación del div con el top.
},{queue: false, duration: 350}); //Esto hace el retraso en el scrool
});
})
</script>
Para hacerlo bien también agregaremos la posicion en el xml del template, exactamente en templateDetails.xml.
<positions>
<position>float</position>
</positions>
Obviamente uds tendrán mas posiciones dentro los tag POSITIONS asi que solo agreguen la linea del medio donde marcamos que la nueva posicion es: Float.
Ya casi llegando al final agregamos el css necesario para que nuestro efecto funcione correctamente. Lo importante en este paso es hacer que el div contenedor del modulo sea “Position:abolute” y ya luego depende de nosotros si queremos que salga a la derecha o a la izquierda y también definiremos el espacio entre el top del navegador y el div flotante, así que abrimos el style.css o el que contenga los estilos en sus templates y agregamos lo siguiente:
.moduloflotante{
position: absolute;
margin-top:200px; /* Solo con Margin-top */
right: 0;
width:52px; /*Esto es solo el ancho del div */
z-index: 9000;
}
Y por último solo queda agregar el contenido al modulo y publicarlo en la posicion “FLOAT“.
Sencillo no?
Demo | Como crear un “Modulo” flotante en Joomla! con jQuery?
Por Javier
El 25 de abril de 2011 a las 21:01
Gracias por tu aporte, sirvió a la perfección, era justo lo que buscaba, muchas gracias
Por Inturias
El 25 de abril de 2011 a las 23:20
Hola @Javier que bueno que te haya servido. (Espero sirva a muchos más)
Saludos!.
Por Dayvis Taya
El 4 de mayo de 2011 a las 15:33
Hola javier sabes como hacer un menu estatico creo que se llama frame en joomla ejemplo: http://www.sandvik.com/ que la parte superior del menu y el logo sean estaticos en joomla ayudame por favor.
Por Dayvis Taya
El 4 de mayo de 2011 a las 15:34
Hola amigo sabes como hacer un menu estatico creo que se llama frame en joomla ejemplo: http://www.sandvik.com/ que la parte superior del menu y el logo sean estaticos en joomla ayudame por favor.
Por Inturias
El 4 de mayo de 2011 a las 23:03
Hola Dayvis, si me esplicas exactamente que necesitas.. yo te hago un tutorial.
Si te entendi bien lo que quieres hacer es un simple menú con esos estilos??
Por Javier
El 9 de mayo de 2011 a las 13:45
Hola Dayvis
Una pregunta respecto del modulo flotante, hay forma que este mismo banner flotante quede quieto dentro del portal, es decir que no se mueva cuando se hace scroll ?
este es un ejemplo de Joomlart que lo muestra en todos los demos
EJM: http://www.joomlart.com/demo/#templates.joomlart.com/ja_business
Si bajas con el scroll el banner se queda quieto y no se mueve
gracias por tu ayuda
Por Inturias
El 9 de mayo de 2011 a las 13:56
Hola Javier, claro para eso no necesitas de jQuery eso se hace solo con CSS, mas o menos asi:
.moduloflotante{
position: fixed; /*IMPORTANTE */
top:200px; /* O el alto que quieras separarlo del top */
right: 0;
width:52px; /*Esto es solo el ancho del div */
z-index: 9000;
}
Por Javier
El 9 de mayo de 2011 a las 18:55
hola Inturias
gracias por tu pronta ayuda, sin embargo cuando hago el cambio en el CSS y actualizo, en el portal ahora el banner se mueve hacia abajo y a medida que bajo con el scroll entonces ya no aparece el banner, es decir no queda estatico sino que se baja, y pues desde luego cuando subo nuevamente con el scroll vuelve y aparece jjj
sera que hay que cuadrar algo en el código del index del HEAD? o que ocurrirá?
gracias saludos
Por Inturias
El 10 de mayo de 2011 a las 9:38
Seguro??, a mi me funciona perfectamente.
.moduloflotante
{
position: fixed;
top: 200px;
right: 0;
z-index: 9000;
width:52px;
}
Quitaste el código del jQuery?? si no es asi, borralo, ya que no lo vamos a necesitar más.
Saludos!.
Por javier
El 10 de mayo de 2011 a las 22:30
hola Inturias ya funciona perfecto
de nuevo gracias
Por Dayvis Taya
El 2 de junio de 2011 a las 12:07
Estimado Inturias como te mensione en mi comentario quiero una barra estica en la parte inferior de mi web joomla y poder colocar algunos datos cuando baje el scroll se mantenga estatica como mensiono javier crees que me puedas ayudar o en todo caso te paso los accesos a mi administrator estaria muy agradesido
Por Dayvis Taya
El 5 de junio de 2011 a las 0:41
Estimado Inturias
Todo salio bien pero me puedes orientar como hacer para que salga el modulo flotante en la parte inferior como el botton SUBIR de este blog y no al costado como esta actual ya todos los paso me salieron bien pero no quisiera que salga al costado si no en la parte de abajo.
Saludos
Por Jose Torero
El 5 de junio de 2011 a las 1:51
amigo inturias tambien busco lo mismo que deyvis que salga la modulo flotante en la parte inferior.
Tambien puedes hacer un tuto COMO PONER UNA IMAGEN DE FONDO EN LOS ARTICULOS EN JOOMLA 1.5
Por Inturias
El 5 de junio de 2011 a las 15:12
@Dayvis y @Jose, gracias por leer el articulo y lo que piden uds tambien es sencillo solo es un juego de CSS, antes que nada deben quitar el código de jQuery para que no cree un conflicto, por otro lado tiene que modificar solo el CSS para que quede de esta forma.
.moduloflotante
{
position: fixed;
bottom: 0; /*IMPORTANTE*/
z-index: 9999;
width: 100%;
height: 50px; /*o el alto que necesiten*/
}
De esta forma estaran haciendo que el módulo quede justo al pie del navegador sin importar la posición del scroll.
Saludos.
(espero sus comentarios para ver si les quedo bien)
Por Dayvis Taya
El 5 de junio de 2011 a las 18:01
Estimado Inturias muchas gracias por la ayuda prestada pero dime cuando cambio el codigo perfecto el modulo se cambia la posicion de abajo pero se va al lado derecho como es para que se este en el centro.
saludos
Por Inturias
El 5 de junio de 2011 a las 20:12
@Dayvis raro pon el link de tu página y asi será mas fácil poderte ayudar.
Saludos!
Por Dayvis Taya
El 5 de junio de 2011 a las 22:11
estimado inturias quedo perfecto me estaba equivocan en el procedimiento buen tuto estimado.
EXITOS
Por Dayvis Taya
El 6 de junio de 2011 a las 0:25
Sierto inturias puedes hacer un tutorial como poner un fondo en un articulo en joomla como mensiona jose torero.
saludos
Por Gabriel
El 20 de julio de 2011 a las 20:34
Muchas gracias por el aporte, me sirvió muchísimo amigo mío… Saludos y Bendiciones.
Por Inturias
El 20 de julio de 2011 a las 22:26
Que bueno que te haya servido.
Saludos!
Por Andrés
El 23 de septiembre de 2011 a las 23:07
Hola Inturias. Solo queria darte las gracias y felicitarte por el aporte realizado, aunque no he probado nada en mis sitios eran ciertas cosas que hace dias queria aprender y no encontre otro sitio donde me lo explicaran de una manera tan simple y rapida. Muchas gracias nuevamente y que sigas aportando tan buena informacion como la encontrada aca.
Solo queria preguntarte algo y es como puedo hacerle estilos a los modulos de joomla. me explico, que las imagenes o los efectos salgan de las margenes que siempre delimitan los modulos de joomla. un ejemplo de ello puede ser el sitio web de Yootheme, que tiene un miquito al lado de la hoja y queda por encima del body.
hasta la proxima
Por Alberto
El 9 de octubre de 2011 a las 11:24
Muchas gracias inturias, la verdad el modulo funciona muy bien!! pero solo tengo un detalle, cuando la pag se carga el modulo no aparece, pero aparece cuando hago scroll!!
Que debo modificar para que aparezca de una vez cuando se carga la pag?? Mil Gracias….
Por maxi
El 20 de diciembre de 2011 a las 22:20
muxas gracias men por el tutorial pude realizarlo a la perfecion era lo que estaba buscando
muy bien explicado
eres un dios jejeje
bueno pasando a mi pregunta como podria ahcer para que la ventana flotante en vez de aparecerme a la derecha de la pantalla me aparesca en la izquierda??
gracias espero tu respuesta
Por Inturias
El 20 de diciembre de 2011 a las 22:32
@maxi, que bueno que te haya servidor y respecto a tu pregunta claro que si!, solo tienes que modificar el CSS y cambiar el:
right:0;
por:
left:0;
con esto cambiarias la posicion del modulo.
Suerte.
Por Dayvis
El 16 de febrero de 2012 a las 0:53
Hola inturias una consulta como para que una barra flotante en ves que este abajo este en la parte superior anteriormente me ayudastes dandome este codigo que funciona perfectamente pero la barra aparese abajo pero ahora como hago para que se vaya ala parte fuperior.
saludos
}
.moduloflotante
{
position: fixed;
right: 1252px;
bottom: 0; /*IMPORTANTE*/
z-index: 9999;
width: 252px;
height: 67px; /*o el alto que necesiten*/
}
Por clety
El 21 de febrero de 2012 a las 17:07
Hola! Me encantóóó.
Quisiera hacer ese móulo flotante pero ABAJO (ni derecha ni izquierda), como la barra Wibiya… http://wibiya.conduit.com/
Consejos? No logro encontrar la forma… desde ya “GRACIAS”
Por Inturias
El 21 de febrero de 2012 a las 17:16
@Dayvis, Fácil solo tienes que cambiar el valor de “bottom”
bottom: 0; /*IMPORTANTE*/
por
top:0; /*cambias el cero por el valor que necesites*/
Saludos.
Por Inturias
El 21 de febrero de 2012 a las 21:08
@clety, Basicamente es lo mismo, que @Dayvis:
Solo que el valor de “right” lo dejas en “50%” para que tu div se posiciones al medio.
Saludos.
.moduloflotante
{
position: fixed;
right: 50%;
bottom: 0; /*IMPORTANTE*/
z-index: 9999;
width: 252px;
height: 67px; /*o el alto que necesiten*/
}
Por Anónimo
El 19 de marzo de 2012 a las 15:32
[...] [...]
Por Alex
El 19 de marzo de 2012 a las 21:05
Funciona esto con Joomla! 1.0.15 Stable ?
Y si no, qué debería hacer para que funcione?
Gracias
Por Inturias
El 19 de marzo de 2012 a las 22:25
@Alex, no veo el J! 1.0 hace haaarto pero estoy seguro que el código funciona perfectamente.
Solo tendrias que cambiar esto:
Por la llamada correcta del J! 1.0
Saludos