Codigos Web / Wordpress

Mover un div de posición según dispositivo con jQuery

Como cambiar de posición de un sitio a otro un div (antes ó después) según el tamaño del dispositivo ó pantalla.

(Ejemplo de como hacer Media Query  Responsive de CSS, pero en Jquery)

*Función insertBefore(“”) jQuery para insertar un elemento ANTES de otro existente.

*Función insertAfter(“”)  jQuery para insertar un elemento DESPUES de otro existente.

 

Mover div de posición según dispositivo con Jquery:

  1. $(window).resize(function(){ /*COMENTARIOS RESPONSIVE*/
  2. if ($(window).width() <= 479){
  3. $( "#comments" ).insertBefore( ".sidebar" );
  4. }else{
  5. $( ".sidebar" ).insertBefore( "#comments" );
  6. }
  7. });

En WORDPRESS:

  1. jQuery(window).resize(function(){ /*COMENTARIOS RESPONSIVE*/
  2. if (jQuery(window).width() <= 479){
  3. jQuery( "#comments" ).insertBefore( ".sidebar" );
  4. }else{
  5. jQuery( ".sidebar" ).insertBefore( "#comments" );
  6. }
  7. });

*Explicación de estos ejemplos:  Utlizamos la función jQuery Resize(“”) para detectar cuándo la pantalla varía de tamaño. Definimos un IF: Si el ancho del dispositivo es menor que 479píxeles, que al cargar la página, el div con id=”comments” se inserte ANTES del div con la class=”sidebar”, sino que cargue ese contenido de la forma estándar que queramos.

No comments