llamada función estilo div

natig · #1 (**permalink**) 31/05/2012, 15:51

Hola,

necesito vuestra ayuda. Aviso de que no sé nada de javascript, pero quería hacer una cosa y he buscado información: quiero asignar el height a un div en función del ancho de la ventana. He usado este código:

Código HTML:

Ver original<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<link rel="stylesheet" href="estilos_ej_java.css" type="text/css" />
<script language="JavaScript">
function addWidth() {
    var mydiv = document.getElementById("mydiv");
    var curr_height = parseInt(mydiv.style.height); // removes the "px" at the end
    mydiv.style.height = (screen.width * 0.2)+"px" ;
}
</script>
</head>
 
<body>
<input type="button" value="Make Bigger" onclick="addWidth()" />
<div id="mydiv" style="width:100%" ></div>
</body>
</html>

Funciona perfecto, pero yo quiero que la función se ejecute automáticamente, no con un botón. Es decir, que al cargar la web, se asigne al alto de la capa lo que corresponda. ¿Cómo llamo a la función?, ¿dónde la llamo?

Gracias!

kaninox · #2 (**permalink**) 31/05/2012, 16:04

Entonces deberías poner tu funcion en el onload del body y no en el boton quedando : <body onload="addWidth()">

dime si es lo que necesitas.

Saludos

natig · #3 (**permalink**) 31/05/2012, 16:14

Funciona, pero necesito una llamada constante, porque si cambio el ancho de la ventana, el alto del div no cambia. Yo quiero que detecte el tamaño de la pantalla en cualquier momento.

Gracias!

natig · #4 (**permalink**) 31/05/2012, 16:24

Hola,

necesito vuestra ayuda. Aviso de que no sé nada de javascript, pero quería hacer una cosa y he buscado información: quiero asignar el height a un div en función del ancho de la ventana. He usado este código:

Código HTML:

Ver original<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<link rel="stylesheet" href="estilos_ej_java.css" type="text/css" />
<script language="JavaScript">
function addWidth() {
    var mydiv = document.getElementById("mydiv");
    var curr_height = parseInt(mydiv.style.height); // removes the "px" at the end
    mydiv.style.height = (screen.width * 0.2)+"px" ;
}
</script>
</head>
 
<body>
<input type="button" value="Make Bigger" onclick="addWidth()" />
<div id="mydiv" style="width:100%" ></div>
</body>
</html>

Funciona perfecto, pero yo quiero que la función se ejecute automáticamente, no con un botón. Es decir, que según el tamaño de la ventana, se asigne al alto de la capa lo que corresponda, pero no solo al cargar la web, si no también cuando se varía el tamaño de la pantalla. ¿Cómo llamo a la función?, ¿dónde la llamo?

Gracias!

kaninox · #5 (**permalink**) 31/05/2012, 16:29

que quieres poner un fondo que se adapte a la pantalla siempre? o un cuadro div que se adapte segun el ancho, por que eso lo logras con css :/ aun no entiendo la dinamica de tu problemas, es mas te dire que uso firefox y a mi al menos el div ahora que lo pruebo no me da todo el ancho de la ventana :/ que navegador usas?

natig · #6 (**permalink**) 31/05/2012, 17:02

Lo que quiero es que el div tenga de ancho un 100% y de alto un 20% del ancho, sea el que sea. Como el ancho de la capa se va a adaptar a la ventana, quiero que de alguna manera se averigüe el ancho que ha tomado el div (es decir, el de la ventana) y en función de eso calcular el alto, que será un 20 % del ancho.

No sé la manera de lograrlo, buscando por google he probado con esa, pero si se puede hacer directamente con CSS, perfecto. El tema es que yo se que al div le puedo dar un porcentaje como valor, pero el porcentaje se hace sobre el alto de la ventana, y yo lo quiero sobre el ancho (alto en función del ancho).

Muchas gracias por tu interes.

summaky · #7 (**permalink**) 31/05/2012, 17:33

Si el ancho siempre es 100 (100%) y el alto es el 20% de 100, siempre es el 20%, independientemente del ancho y alto del contenedor (pantalla o lo que sea)... no veo ningún problema para hacerlo indicando los valores en el css (como te dice kaninox). No necesitas javascript para hacer eso, ni buscar valores en píxeles.

Indicando esos valores en porcentajes siempre quedarán como pides sea cual sea la resolución de la pantalla.

Si no es esto lo que buscas, pon tu código para ver lo que quieres hacer.

summaky · #8 (**permalink**) 31/05/2012, 17:36

No dupliques el tema... mira en el foro "Diseño web", ahí tienes la respuesta.

furoya · #9 (**permalink**) 31/05/2012, 17:38

Sí. Son los problemas de "copiar y pegar" sin entender lo que se está haciendo.

Lo que buscas se llama

javascript event evento

Acá encontré una página no tan vieja que tiene una lista para que elijas en qué condiciones quieres que haga el redimensionado.

http://www.librosweb.es/javascript/c..._eventos1.html

Está aplicado más que nada a elementos de HTML, pero en muchos ejemplos vas a ver que se pueden poner directamente al final de la etiqueta script. Algo como

Código:

<script>
function mi_funcion() {
alert("Se Mueve!");
}
onscroll = mi_funcion;
</script>

Al disparar tu función después de la carga del documento o al redimensionarlo, ya no necesitas el botón.

Edición:

Lo escribí antes de que postearas el aviso, summaky. Perdón.
Aunque no es de Diseño. Pero tampoco es de HTML. :-/

natig · #10 (**permalink**) 01/06/2012, 02:05

A ver si me aclaro. Cuando hacemos un porcentaje, lo hacemos sobre una cantidad, el tanto por cierto de algo. En css si pongo:

width:100%; lo que hace es width= 100% del ancho de la ventana, o sea, width = (ancho ventana) px.
heigth:20%, lo que hace es heigth= 20% del alto de la la ventana, o sea, heigth = (0.2 * alto ventana) px.

Y yo lo que quiero es:

heigth = 20 % del ancho de la venta = (0.2 * ancho ventana) px.

El problema es que no se conoce a priori el ancho que va a tomar la ventana, depende de la resolución y de si la ventana ocupa todo el espacio de la pantalla o la pones más pequeña. Es decir, "ancho ventana" es una incógnita.

A lo mejor es posible indicar en css:

heigth: 0.2*width;

No lo sé. Si es así, indicadme cómo es la sintaxis en css.

Gracias.

natig · #11 (**permalink**) 01/06/2012, 08:42

Primero decir que en el foro de Diseño Web no tengo la respuesta, hay respuestas, pero no la respuesta. Segundo, para algo se hacen los temas en un foro, digo yo que no todos visitamos todas las secciones del foro, y quizá los que entran en la sección "html" puedan darme una respuesta o enfoque distinto de los que entran a "Diseño web", puede ser que muchos entren en ambos, pero no tiene por qué.

Y tercero, gracias a furoya y a kaninox lo he solucionado, por cierto, uno en el foro de html y otro en diseño web.

Gracias!

Solución:

Código HTML:

Ver original<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<link rel="stylesheet" href="estilos_ej_java.css" type="text/css" />
<script language="JavaScript">
function addWidth() {
    var mydiv = document.getElementById("mydiv");
    var curr_height = parseInt(mydiv.style.height); // removes the "px" at the end 
    mydiv.style.height = (window.innerWidth * 0.2)+"px" ;
    
}
</script>
</head>
 
<body onload="addWidth()" onresize="addWidth()">
 
<div id="mydiv" style="width:100%" ></div>
</body>
</html>

He cambiado screen.width por window.innerWidth y he ejecutado la función tanto al cargar como al redimensionar.

natig · #12 (**permalink**) 01/06/2012, 08:52

Solución con JavaScript:

Código HTML:

Ver original<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<link rel="stylesheet" href="estilos_ej_java.css" type="text/css" />
<script language="JavaScript">
function addWidth() {
    var mydiv = document.getElementById("mydiv");
    var curr_height = parseInt(mydiv.style.height); // removes the "px" at the end 
    mydiv.style.height = (window.innerWidth * 0.2)+"px" ;
    
}
</script>
</head>
 
<body onload="addWidth()" onresize="addWidth()">
 
<div id="mydiv" style="width:100%" ></div>
</body>
</html>

He cambiado screen.width por window.innerWidth y he ejecutado la función tanto al cargar como al redimensionar.

Gracias!

PD: si conocéis alguna otra manera, podéis compartirla.

furoya · #13 (**permalink**) 01/06/2012, 20:37

No todos visitamos todas las secciones, pero hubieses empezado por meterlo en Javascript, porque sabías que era JS.

Los temas no se repiten, si no obtienes respuesta en un subforo, porque te equivocaste o no sabías dónde ponerlo, esperas una recomendación (que es cierto, allá no te hicieron) y se mueve el tema.

Primero respeta las normas del Foro, y después vemos tus apuros y tus comodidades.
Recuerda que esto no es una consultoría. Acá no estamos para resolverte los problemas ni tu falta de conocimientos sobre javascript; estamos para debatir y compartir ideas. Para eso es un Foro.

Si respondemos consultas "particulares" es porque ponemos buena voluntad con la gente que se lo merece. Así que en vez de discutir lo indiscutible, lo mejor era disculparse y explicar que le erraste sin mala intención. Después del tirón de orejas, te íbamos a entender.

Como no creo que ya vayan a juntar los temas, aprovecho y dejo el enlace al otro tema, que —dicho sea de paso— tampoco pusiste por acá.

llamada función estilo div

(¿Se me escapó alguno más?)

natig · #14 (**permalink**) 02/06/2012, 07:44

Hola de nuevo,

tenéis toda la razón, de hecho, ya me han penalizado por esto, dos puntos menos.

Perdón por haber respondido tan soberbiamente.

Un saludo.

PD: no lo puse en ninguno más.

furoya · #15 (**permalink**) 02/06/2012, 10:48

Cita:

Iniciado por natig

PD: no lo puse en ninguno más.

¡Bueno, entonces no busco más!

Gracias!.

Me alegra que te haya servido algo de lo que pusimos. Por lo general tratamos de colaborar con quienes tienen ganas de aprender.
O por lo menos de leer algún tutorial, tampoco somos tan exigentes.

Edición :

Ajá. Hoy veo que los juntaron. Gracias.