JQuery - Manipular elementos dependiendo del Ancho de Pantalla

   
Vista:

Manipular elementos dependiendo del Ancho de Pantalla

Publicado por Juan (4 intervenciones) el 13/03/2018 01:15:45
Hola, tengo un problema al crear una condición con innerWidth.
Lo que busco básicamente es hacer que un elemento se oculte o muestre dependiendo del ancho de la ventana.

Este es el código que estoy usando.
1
2
3
4
5
6
7
8
9
10
$(document).ready(function(){
var anchoPantalla = $(window).innerWidth()
 
if(anchoPantalla < 992){
$(".dCapa").show()
}
else if(anchoPantalla >= 992){
$(".dCapa").hide()
}
})

Soy muy nuevo en esto y no sé por qué no funciona, si tal vez estoy declarando mal las condiciones, me gustaría que me corrijan.
Lo que busco es que cuando la ventana mida menos de 992px, el elemento con la clase "dCapa" se muestre, y cuando mida más de 992px, el elemento con la clase "dCapa" se oculte.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve

Manipular elementos dependiendo del Ancho de Pantalla

Publicado por xve (657 intervenciones) el 13/03/2018 07:56:55
Hola Juan, el código es correcto, el problema creo que es, que solo se ejecuta ese código cuando carga la pagina, no lo ejecuta si redimensionas el navegador!!!

Puede ser ese el problema?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Manipular elementos dependiendo del Ancho de Pantalla

Publicado por Juan juandavidgutierrez99@gmail.com (4 intervenciones) el 14/03/2018 19:01:53
Intenté con un $(window).resize()
Pero sigo sin ver que funcione :/
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

Manipular elementos dependiendo del Ancho de Pantalla

Publicado por xve (657 intervenciones) el 14/03/2018 19:30:24
No muestras tu código Juan, por lo que no se donde fallas... pero mira este código de ejemplo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
 
	<script>
	$(document).ready(function(){
 
		$(window).resize(function(){
			var anchoPantalla = $(window).innerWidth()
 
			if(anchoPantalla < 992){
				$(".dCapa").show()
			}else if(anchoPantalla >= 992){
				$(".dCapa").hide()
			}
		});
	});
 
	</script>
</head>
 
<body>
 
<div class="dCapa">texto</div>
 
</body>
</html>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Revisar política de publicidad