Mostrar widget lateral al inicio en móviles

[ 8 septiembre 2016 ] [ Autor: Jhon Marreros Guzmán ] [ Themes - Intermedio] [ ]

accesibilidad js

Si tienes un theme con una barra lateral, probablemente esta barra y sus widgets se desplacen al final cuando el sitio se muestra en dispositivos móviles. En este artículo veremos cómo duplicar un widget de la barra lateral y mostrarlo al inicio en móviles.

1- Ubicamos el archivo javascript

El proceso de duplicación lo haremos usando código javascript, para esto ubicaremos algún archivo javascript que ya carga nuestro theme, usualmente los themes guardan estos archivos en la carpeta js. Una manera práctica de saber que archivos javascript carga nuestro theme es revisando el código html generado y buscando el texto “.js”.

2- Agregamos código javascript con Jquery

El código que agregaremos al archivo javascript será similar a lo siguiente:

if ( $(window).width() <=768 ){
	$('#idWidget').clone().insertBefore('#idDestino');
}

En el código anterior:

• Debemos asegurarnos que la librería Jquery se encuentre cargada, este código puede ir dentro del evento .ready de Jquery.
• Validamos que sólo se haga la clonación cuando el sitio se carga en un dispositivo con ancho menor o igual a 768 px.
• Seleccionamos el Widget por su id y usamos la función de clonación.
• El resultado de la clonación lo insertamos en un elemento destino.

3- Validar si es un móvil

El código anterior sólo valida el ancho del navegador, para validar si es un dispositivo móvil podemos agregar una condición adicional, el código quedará como:

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
	if ( $(window).width() <=768 ){
		$('#idWidget').clone().insertBefore('#idDestino');
	}
}

4- Resultado final

Finalmente, tomando como ejemplo este sitio de decodecms, veremos que el Widget de suscripción de la barra lateral, al verlo en dispositivos móviles, se muestra al inicio.

¿Aún con dudas?, el siguiente video explica en detalle cada uno de los puntos tratados anteriormente.

Valora este artículo : (1 votos, promedio: 5,00 de 5)

Cargando…