Quiero que se oculte un div si el tamaño de la pantalla es mayor a 700 px y se muestra solo si el tamaño de la pantalla es menor a 700 px;
Aquí está el código que estoy tratando de implementar usando jQuery 3
jQuery(document).ready(function() { if ((screen.width>701)) { $(".mobile-section").css('display', 'none'); $(".yourClass").hide(); }elseif ((screen.width<=699)) { $(".mobile-section").css('display', 'block'); } });No funciona --- ¿estoy haciendo algo mal?
width() es una función compatible con jQuery que proporciona la propiedad de width de, por ejemplo, elementos de document o window . En su caso se refiere al document .
Una explicación de la diferencia entre .width() y screen.width de jQuery sería buena : screen.width es una propiedad DOM nativa y devuelve el ancho de toda la pantalla , por ejemplo, si tiene un monitor con una resolución de 1920x1200, screen.width volverá 1920 .
$(document).ready(function() { if (($(this).width() > 701)) { $(".mobile-section").css('display', 'none'); $(".yourClass").hide(); } else { $(".mobile-section").css('display', 'block'); } });Realmente no tiene sentido usar javscript/JQuery aquí si eso es todo lo que quiere probar con consultas de medios CSS como
.mobile-section { display: none; background-color: orange; } @media screen and (max-width: 700px) { .mobile-section { display: block; } } <div class="mobile-section"> hello mobile section </div>Echa un vistazo a este campo y cambia el tamaño del área visible
Use consultas de medios, no se requiere JavaScript.
@media only screen and (min-width: 700px) { #hideMe{ display:none; } } <div id="hideMe">This should only be displayed on smaller than 700px screens</div>Puede leer sobre consultas de medios aquí: https://www.w3schools.com/css/css_rwd_mediaqueries.asp