Foros del Web » Programando para Internet » Javascript »

[SOLUCIONADO] Mostrar contenido segun parametro

Estas en el tema de Mostrar contenido segun parametro en el foro de Javascript en Foros del Web. Necesito mostrar determinado contenido según resolución de imagen Por ejemplo si la resolución de una imagen es de 1280x1024 mostrar determinado contenido (div o tabla), ...
  #1 (permalink)  
Antiguo 04/07/2014, 04:53
 
Fecha de Ingreso: octubre-2009
Ubicación: Santa Fe
Mensajes: 206
Antigüedad: 10 años, 7 meses
Puntos: 7
Mostrar contenido segun parametro

Necesito mostrar determinado contenido según resolución de imagen

Por ejemplo si la resolución de una imagen es de 1280x1024 mostrar determinado contenido (div o tabla), si la resolución de la imagen es 1920x1080 mostrar otro contenido (div o tabla).

Encontré esto en el foro, pero el problema que en este ejemplo se debe seleccionar lo que se quiere ver, yo necesito que sea automático según un parámetro, ya sea la resolución e una imagen o un texto.

Código:
<html>
<head>
<script language="Javascript"> 
function aparecer(id) {
	var d = document.getElementById(id);
	d.style.display = "block";
	d.style.visibility = "visible";
}
function ocultar(id) {
	var d = document.getElementById(id);
	d.style.display = "none";
	d.style.visibility = "hidden";
}
window.onload = function () {
	//Al cargar la página se oculta el div de consulta
	ocultar("capaConsultar");
}
</script> 
</head>
<body>
<table>
	<tr>
		<td scope="col">
			<div align="center">
				<a href="#capaIngreso" onClick="ocultar('capaConsultar');aparecer('capaIngreso');">Ingreso</a> - 
				<a href="#capaConsultar" onClick="ocultar('capaIngreso');aparecer('capaConsultar');">Consulta</a> -
			</div>
		</td>
	</tr>
</table>
<div id="capaIngreso" style="position:absolute;text-align:center;top:100px;left:200px;border:solid 1px red;">Primer Cuadrado Ingresar</div>
<div id="capaConsultar" style="position:absolute;text-align:center;top:100px;left:200px;border:solid 1px red;">Primer Cuadrado Consultar</div>
</body>
</html>
Alguna idea!!
__________________
Fondos de pantalla
Juegos Gratis
  #2 (permalink)  
Antiguo 04/07/2014, 11:36
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.437
Antigüedad: 8 años, 6 meses
Puntos: 935
Respuesta: Mostrar contenido segun parametro

Bastaría con que envíes el id a una función en la cual obtendrás sus medidas y en base a eso realizas lo que deseas.

Código HTML:
Ver original
  1. <img src = "imagen1.jpg" id = "ejemplo" />

Código Javascript:
Ver original
  1. function foo(id){
  2.     var imagen = document.getElementById(id),
  3.         ancho = imagen.offsetWidth,
  4.         alto = imagen.offsetHeight;
  5.    
  6.     if (ancho == 1280 && alto == 1024){ //1280x1024
  7.         //Instrucciones
  8.     }
  9.     else if (ancho == 1920 && alto == 1080){ //1920x1080
  10.         //Instrucciones
  11.     }
  12.     else{ //Otras medidas
  13.         //Instrucciones
  14.     }
  15. }
  16.  
  17. foo("ejemplo");

Saludos
__________________
«Laissez faire et laissez passer, le monde va de lui même»
  #3 (permalink)  
Antiguo 05/07/2014, 17:39
 
Fecha de Ingreso: octubre-2009
Ubicación: Santa Fe
Mensajes: 206
Antigüedad: 10 años, 7 meses
Puntos: 7
Respuesta: Mostrar contenido segun parametro

Gracias por tu respuesta Alexis88

Estuve probando lo que me indicaste, pero al no saber mucho, no pude hacerlo funcionar, aquí lo que hice.

Código:
<html>
<head>
<script language="Javascript"> 
function foo(id){
    var imagen = document.getElementById(id),
        ancho = imagen.offsetWidth,
        alto = imagen.offsetHeight;
    
    if (ancho == 1024 && alto == 768){ 
	div = document.getElementById('texto1');
    div.style.display = 'block';
    }
    else if (ancho == 1920 && alto == 1080){ 
	div = document.getElementById('texto2');
    div.style.display = 'block';
    }
    else{ //Otras medidas
        //Instrucciones
    }
}
 
foo("ejemplo");
</script> 
</head>
<body>
        <img src = "imagen1024x768.jpg" id = "ejemplo" />
        <div id="texto1" style="display:none;">CONTENIDO A OCULTAR/MOSTRAR</div>
        <div id="texto2" style="display:none;">ddddddddd</div>
</body>
</html>
No se si estoy en lo correcto o totalmente equivocado!
__________________
Fondos de pantalla
Juegos Gratis
  #4 (permalink)  
Antiguo 05/07/2014, 18:09
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.437
Antigüedad: 8 años, 6 meses
Puntos: 935
Respuesta: Mostrar contenido segun parametro

Coloca el código JavaScript justo antes de la etiqueta </body>, de ese modo, surtirá efecto.

Saludos
__________________
«Laissez faire et laissez passer, le monde va de lui même»
  #5 (permalink)  
Antiguo 05/07/2014, 18:56
 
Fecha de Ingreso: octubre-2009
Ubicación: Santa Fe
Mensajes: 206
Antigüedad: 10 años, 7 meses
Puntos: 7
Respuesta: Mostrar contenido segun parametro

Clarooo!!!

Funciona de maravillas!!!!

Muchísimas gracias Alexis88, eres un genio!!!

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. </head>
  4.         <img src = "imagen1024x768.jpg" id = "ejemplo" />
  5.         <div id="texto1" style="display:none;">CONTENIDO A OCULTAR/MOSTRAR</div>
  6.         <div id="texto2" style="display:none;">ddddddddd</div>
  7.         <script language="Javascript">
  8. function foo(id){
  9.     var imagen = document.getElementById(id),
  10.         ancho = imagen.offsetWidth,
  11.         alto = imagen.offsetHeight;
  12.    
  13.     if (ancho == 1024 && alto == 768){
  14.     div = document.getElementById('texto1');
  15.     div.style.display = 'block';
  16.     }
  17.     else if (ancho == 1920 && alto == 1080){
  18.     div = document.getElementById('texto2');
  19.     div.style.display = 'block';
  20.     }
  21.     else{ //Otras medidas
  22.         //Instrucciones
  23.     }
  24. }
  25.  
  26. foo("ejemplo");
  27. </script>
  28. </body>
  29. </html>

Aquí el código completo por si alguien quiere usarlo.

saludos!!
__________________
Fondos de pantalla
Juegos Gratis

Etiquetas: contenido, html, parametro
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 01:47.