Ocultar div si la pantalla es más pequeña que un determinado ancho

Question

Quiero ocultar un div flotante si la pantalla del usuario es < 1024px, ya que se superpondrá con el área de contenido de mi blog. Encontré este jQuery en la red, pero no estoy seguro de cómo usarlo.

$(document).ready(function() { 

if ((screen.width>1024)) { 
    // if screen size is 1025px wide or larger 
    $(".yourClass").css('display', 'none'); // you can also use $(".yourClass").hide(); 
} 
elseif ((screen.width<=1024)) { 
    // if screen size width is less than 1024px 
    $(".yourClass").css('display', 'block'); // here you can also use show(); 
} 
}); 

Si mi nombre de clase div flotante es compartir contenido, ¿debería reemplazar el script anterior como se muestra a continuación? Si es así, no está funcionando.

$(document).ready(function() { 

if ((screen.width>1024)) { 
    // if screen size is 1025px wide or larger 
    $(".sharecontent").css('display', 'none'); // you can also use $(".yourClass").hide(); 
} 
elseif ((screen.width<=1024)) { 
    // if screen size width is less than 1024px 
    $(".sharecontent").css('display', 'block'); // here you can also use show(); 
} 
}); 

También probé la sustitución de la screen.width con window.width pero aún sin éxito :(

Answer 1

Uso media queries Su código CSS sería:.

@media screen and (max-width: 1024px) { 
    .yourClass { 
     display: none !important; 
    } 
} 

Answer 2

¿Su lógica no redonda de la manera incorrecta en ese ejemplo, lo tiene escondido cuando la pantalla es más grande que 1024. Invierta las cajas, haga que none en un block y viceversa.

Answer 3

El problema con su código parece ser la instrucción elseif que debería ser else if (tenga en cuenta el espacio).

Reescribí y simplyfied el código para esto:

$(document).ready(function() { 

    if (screen.width < 1024) { 
     $(".yourClass").hide(); 
    } 
    else { 

     $(".yourClass").show(); 
    } 

}); 

Answer 4

tengo la casi la misma situación que la suya; que si el ancho de la pantalla es menor que el ancho especificado, debería ocultar el div. Este es el código jquery que utilicé y que funcionó para mí.

$(window).resize(function() { 

    if ($(this).width() < 1024) { 

    $('.divIWantedToHide').hide(); 

    } else { 

    $('.divIWantedToHide').show(); 

    } 

}); 

Answer 5

El problema que estaba teniendo es mi css media queries y mi declaración de IF en Jquery chocan. Ambos estaban configurados en 700px, pero uno pensaría que tocó 700px antes que el otro.

Para evitar esto he creado un derecho Div vacío en la parte superior de mi HTML (fuera de mi contenedor principal)

<div id="max-width"></div> 

En CSS fijo esto div para mostrar ninguno

#max-width { 
     display: none; 
    } 

En mi JS crea una función

var hasSwitched = function() { 
    var maxWidth = parseInt($('#max-width').css('max-width'), 10); 
    return !isNaN(maxWidth); 
}; 

Así que en mi declaración si en vez de decir si (hasSwitched < 700) realice el siguiente código, hice lo siguiente

if (!hasSwitched()) { Your code 

} 

else{ your code 

} 

Al hacer esto CSS dice Jquery cuando es golpeado 700px. Entonces css y jquery están sincronizados ... en lugar de tener un par de píxeles de diferencia. Dale una oportunidad a este, definitivamente no te defraudará.

Para obtener esta misma lógica que funciona para IE8 utilicé el plugin Respond.js (que también funciona). Le permite usar consultas de medios para IE8. Lo único que no se admite es el ancho de la ventana gráfica y la altura de la ventana gráfica ... de ahí mi razón para intentar que mi css y JS funcionen juntos. Espero que esto les ayude chicos