Ayuda: Div height:0 y innerHTML

caricatos · #31 (**permalink**) 25/06/2008, 18:52

Cita:

Iniciado por gepd

... la solucion fué borrar el DOCTYPE...

Mal asunto... el doctype aunque no es parte del juego de tags (x)html es imprescindible para conseguir la mejor compatibilidad entre navegadores... seguro que no has probado en todos (opera, safari...)

Como comenta Mikmoro (

) seguro que has hecho algún retoque posterior... y otro consejo, aunque por el total de los mensajes de este tema, es obvio, procura respetar los estándares.

Saludos

gepd · #32 (**permalink**) 25/06/2008, 18:55

si, intentaré probar nuevamente que es lo que causa el conflicto, de todos modos así son el doctype, me funciona en IE 7, IE 8, safari win, firefox win, firefox mac, safari mac, opera mac es en los navegadores que he podido probar, seguiré trabajando en ellos y les comento que tal me fué

saludos y gracias por interezarse en el tema

gepd · #33 (**permalink**) 27/06/2008, 18:50

acabo de modificar el codigo agregandole el doctype y me ha surgido algo en firefox, resulta que ya no toma el topmargin ni left, etc alguien sabe como solicionarlo, ya intententé poniendo margin:0px,en la css

saludos y gracias

Mikmoro · #34 (**permalink**) 28/06/2008, 02:50

Si pones lo que tienes ahora igual podemos encontrar la compatibilidad como la otra vez.

Mikel.

gepd · #35 (**permalink**) 28/06/2008, 06:24

es mismo que dejaste para la coleccion, lo he probado en un nuevo archivo para asegurarme que no es problema con alguna otra propiedad css

http://www.forosdelweb.com/f53/ayuda...9/#post2449710

saludos

Mikmoro · #36 (**permalink**) 28/06/2008, 12:18

Cita:

Iniciado por gepd

He seguido Trabajando en el código y se me ha presentado un problema cuando actualisé a FF3, no me agranadaba la "barra" la solucion fué borrar el DOCTYPE y cambiar ésta parte

éste

Código:

contenido.style.height = altura + "px";

por éste

Código:

contenido.style.height = altura;

fué la única forma de poder hacerlo funcionar en FF3, comento ésto para que no pierda tanto tiempo al próximo que le pase ésto mismo

saludos

Entonces me he perdido en alguna parte. Decías "he seguido trabajando en el código". Decías que no te funcionaba en FF3 y que debías quitar el DOCTYPE y los px para que lo hiciera, pero al decirte a ver en qué punto estás con el código me dices que estás usando exactamente el que dejamos para la colección, que yo he comprobado que funciona correctamente en FF3.

No sé exactamente dónde pero veo que me he perdido con el problema actual.

Mikel.

gepd · #37 (**permalink**) 28/06/2008, 12:20

Claro, he copiado el código en una nueva pagina limpia sin niun codigo aparte y he podido solucionar el problema que tenia con FF3 pero ahora me encuentro que no toma los parametros de topmargin ni leftmargin etc... (sólo en firefox), ésto hace que el efecto no sea muy bueno

saludos

Mikmoro · #38 (**permalink**) 28/06/2008, 12:27

De acuerdo. ¿Y dónde colocas esos parámetros? Es para intentar buscar una solución, que podría ser sencilla (o no

)

Mikel.

gepd · #39 (**permalink**) 28/06/2008, 12:31

supone que el en body yo coloco
<body topmargin="0" leftmargin="0" rigthmargin="0">

si pruebas el code en firefox te darás cuenta que deja un margen superior al expandir la "barra"

Mikmoro · #40 (**permalink**) 28/06/2008, 16:42

Ah, de acuerdo. Pruébalo así, que es lo correcto:

<body style="margin:0;">

o mejor todavía, en la css

body {margin: 0;}

Mikel.

gepd · #41 (**permalink**) 28/06/2008, 16:44

ya lo hice y no funciona, lo había escrito unos post mas arriba :)
que trabajito ésto de compatibilidad xD

pero me entretiene...

Mikmoro · #42 (**permalink**) 28/06/2008, 17:15

Pues a mi también me divierten mucho los retos, pero en este caso sigo sin saber qué es lo que no funciona.

http://www.araudi.net/forosdelweb/gepd3.html#

¿En este ejemplo no ves el texto y los enlaces absolutamente pegados arriba, a izquierda y derecha con FF2 o 3?

Es el código original de la colección + margin 0 en el body.

Mikel.

gepd · #43 (**permalink**) 28/06/2008, 17:17

Hey, ahora sí, te lo agradezco muchisimo, creo que tendré que buscar mas sobre css, es lo que me cuesta mas en éste momento...

gracias nuevamente! :D

Mikmoro · #44 (**permalink**) 28/06/2008, 17:22

Estudia y pregunta lo que necesites, que se te ayudará en lo que se pueda

Saludos.

Mikel.

gepd · #45 (**permalink**) 01/07/2008, 21:41

me ha surgido una duda cual es la diferencia entre:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

y éste:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

ya que en un principio había puesto el segundo para lo que estaba tratando de hacer a lo largo de todo el post, pero luego he querido y he logrado poner un div a 100% pero he tenido que cambiar el doctype a éste

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

cual es la diferencia?

no he probado pero estoy seguro que no me funcionará la "barra".

furoya · #46 (**permalink**) 15/07/2008, 07:54

No pensé volver a este tema, pero mientras hacía una versión del efecto para guardarme, apareció algo extraño.
Quizá debi abrir otro, con otro ejemplo, donde se viera mejor el problema. Lo que pasa es que lo encontré trabajando con este código, y aquí mismo ya se mencionó el asunto de las alturas y los márgenes fantasma.
Por eso vuelvo, aunque seguramente me van a poner un enlace a algún tema donde ya lo hayan resuelto.

Antes de empezar —y para que no no pienses que estoy ignorando tu pregunta— te diré que en las FAQ y en todo el Foro hay información sobre los DTD. Y supongo que aparecen más con cualquier buscador. Éste sería como para empezar.

http://www.w3.org/QA/Tips/Doctype

Yo no puedo ayudarte más, gepd, porque no los entiendo mucho; siempre estaba por estudiarlos con la idea de hacer mis propios doctype, y al final los dejé. Me acostumbré a usar el de HTML transicional, que funciona bastante bien en todos los navegadores.

En fin, volviendo a mi asunto, esta es la versión que hice teniendo en cuenta el "zoom" para Firefox 2 o menores y que tiene corregido el bug del tamaño de texto.

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>gepd - Mikel - caricatos</title>
<script type="text/javascript">

var altura3 = 0;

function agrandar(){
var contenido1 = document.getElementById("barra1");
var contenido2 = document.getElementById("texto1");
var altura1 = contenido1.offsetHeight; 
var altura2 = contenido2.offsetHeight;

if(altura1 < altura2){
altura3 = altura3 + 0.1;
contenido1.style.height = altura3 + "ex";
setTimeout("agrandar()",25);
}
}

function achicar(){
var contenido1 = document.getElementById("barra1");
var contenido2 = document.getElementById("texto1");

if(altura3 > 0.1){
altura3 = altura3 - 0.1;
contenido1.style.height = altura3 + "ex";
setTimeout("achicar()",25);
}
else {
contenido1.style.height = altura3 = 0;
}
}
</script>
<style type="text/css">

body {margin:0; background-color:#000000; color:#ffffff; 
font-size:100%;}

#barra1 {background-color:#ffffff; color:#000000; height:0; 
overflow: hidden; font-size:20pt;}

.abajo {width:1em; height:1em; font-size:6px; border-style:solid; 
border-top-color:#ffffff; border-left-color:#000000; 
border-right-color:#000000; border-bottom-color:#000000; 
border-top-width:1em; border-left-width:0.5em; 
border-right-width:0.5em; border-bottom-width:1px; 
background-color:#ffffff; padding:0; cursor:pointer;}

.arriba {width:1em; height:1em; font-size:6px; border-style:solid; 
border-top-color:#000000; border-left-color:#000000; 
border-right-color:#000000; border-bottom-color:#ffffff; 
border-top-width:1px; border-left-width:0.5em; 
border-right-width:0.5em; border-bottom-width:1em; 
background-color:#fffffff; padding:0; cursor:pointer;}

#pag {padding:0 10px 15px 10px;}

img {height:6em; background-color:#808080; color:#800000;
font-family:gothic, celtic, decorative, fantasy, cursive; }
</style>
</head>
<body>
<center><input type=button class=abajo onClick="agrandar()" 
title="ABRE" value="" /> 
<input type=button class=arriba onClick="achicar()" 
title="CIERRA" value="" /></center>

<div id="barra1"><div id="texto1">QWERTYUIOP. QWERTYUIOP. 
QWERTYUIOP. </div></div>

<div id="pag">
<h2>Panel superior se abre con animaci&oacute;n y botones.</h2>
<img src="http://www.forosdelweb.com/images/vbulletin3_logo_fdw.gif" 
alt="IMAGEN">
</div>

</body>
</html>

Como dato adicional, ese "zoom" también funciona en Internet Explorer 6; aunque no sé cuánta utilidad tendrá, sabiendo que Microsoft ya le había puesto uno propietario con CSS.

El cambio de formato más evidente son los botones en forma de flecha, reemplazando a los falsos enlaces que estaban bajo el panel.
Y resulta que se ven perfecto en IE y en Opera. No en Firefox : están desfasados.

Estuve peleando la última semana con un efecto que no anda en Opera y no sé por qué. Como me siento un inútil con baja autoestima, no quiero fracasar también en descubrir el motivo para que un botón me quede más abajo que el otro. Por eso les dejo el ejemplo, para ver si alguien le encuentra —o le encontró— una explicación razonable.

furoya · #47 (**permalink**) 15/05/2009, 15:20

Parece que el problema no sólo es difícil de resolver, sino también de explicar. Todavía pienso si no debí ponerlo en otro tema; aunque el código salió de aquí, lo cierto es que no tiene ningún paso de variables entre las funciones ... y terminó con dos botones desfasados además de un zoom a destiempo.

O no.

Varias veces preguntaron por un zoom para Firefox 2, o también para IExplorer 6, cuando la ruedita del ratón sólo agrandaba texto relativo. Las nuevas versiones ya traen uno de "contenido" y de "acercar" respectivamente. Así que con este ejemplo estaba llegando tarde.
Bue, eso creí hasta que probé un Safari para Windows. No tiene zoom, así que el código todavía sirve.

Como el título de este tema dice otra cosa, voy a buscar algún otro tema sobre zoom, y lo enlazo; para que lo vean los que usan el buscador.

Igual sigo insistiendo : si alguien sabe qué pasa con esos botones, agradezco cualquier información. En Safari se ven bien.

alelita1980 · #48 (**permalink**) 21/07/2009, 21:08

En vez de dejar el contenido vacío con

Código:

div.innerHTML = "";

uso esto

Código:

div.innerHTML = "<div class='nada'>";

y declaro la clase .nada en mi css así:

Código:

.nada {
margin-top: -18px;
}

Funciona y fácil
Slds

furoya · #49 (**permalink**) 09/08/2009, 12:11

Lo que no entiendo es cómo va a resolver eso lo de los botones desfasados. A menos que te estés refiriendo a algo que ya está resuelto desde hace mucho, arriesgando este tema al cierre, cuando todavía no me respondieron.

Aunque no creo. Porque ese ejemplo no funciona.
Pero si era así; en vez de innerHTML se podría recomendar el uso de nodos, porque mover el margen no 'vacía' nada. Ni desaparece, allí se sigue viendo todo 'arriba' del div contenedor. Y para colmo éste no "colapsa" la altura, sigue mostrando alguna pequeña reserva de la que hablábamos antes.

Para eso se usa overflow:hidden, que permite achicar el contenedor hasta desaparecerlo.
Y hablando de desaparecer, con display:none "borramos" el div del contenido. ¿Cuál sería el sentido de moverlo con margen negativo?.

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<body>
<div style="margin-top:100px; border:1px solid red;">
<div style="margin-top: -18px; color: black; 
background-color: yellow; font-size: 18px;">
Texto contenido que se sigue viendo.
</div></div>
</body>
</html>