Ayuda: Div height:0 y innerHTML

[gepd]

[Problema]
Comenzando con un script de ésta web (Agrandar Tabla en Tiempo Real)
decidí crear una barra al estilo activex en donde puedo mandarle mensajes predeterminados por medio de la funcion agrandar, a continuación les dejo el primer código, con el cual tenía el problema

Código:

function achicar(minimo,id){
    
  contenido = document.getElementById(id);
  contenido.innerHTML = '';
  altura = contenido.style.height;
  altura = parseFloat(altura);
      if(altura > minimo){
      altura--;
      contenido.style.height = altura;
      }
  if(altura > minimo){
    Rminimo = minimo;
      setTimeout("achicar(Rminimo)",1);
  }
}

function agrandar(maximo,minimo,ID,msj){
    ID2=ID;
    msjX=msj;
      contenido = document.getElementById(ID);
      altura = document.getElementById(ID).style.height;
      altura = parseFloat(altura);
    
    if(altura < maximo){
        altura++;
          document.getElementById(ID).style.height = altura;
          AgregarTexto = altura+1;
        
        if(AgregarTexto == maximo){
            contenido.innerHTML = msj;
        }
    }
    
    if(altura < maximo){
        Rmaximo = maximo;
        Rminimo = minimo;
        
        setTimeout("agrandar(Rmaximo,Rminimo,ID2,msjX)",1);
    }
}

<div id="barra" style="background:#CC0000; color:#FFFFFF; height:0px; width:100%;"></div>

El problema fué que en explorer dentro del div hay un espacio lo cual no se consigue el efecto al achicar la "barra" ni al agrandar ya que son alrededor de 20 px los que en mi caso agrando...

una de las primeras soluciones que encontré fué agregar ésto al div

Código:

<div id="barra" style="background:#CC0000; color:#FFFFFF; height:0px; width:100%;"><!-- --></div>

hasta ahí todo bien, paracía una solución buena ya que ahora al ejecutar el script no aparecía espacio alguno en el div, al agrandar el div aparece el mensaje y luego al achicarlo apareció nuevamente el espacio

[Solución]

La solucion la consiguió Mikel quedando finalmente de ésta forma el código

Código:

function achicar(minimo,id){
    
  contenido = document.getElementById(id);
  contenido.innerHTML = '';
  altura = contenido.style.height;
  altura = parseFloat(altura);
      if(altura > minimo){
      altura--;
      contenido.style.height = altura;
      QuitarTexto = altura-1;
        if(QuitarTexto == minimo){
        contenido.style.display = "none";
        }
      }
  if(altura > minimo){
    Rminimo = minimo;
      setTimeout("achicar(Rminimo)",1);
  }
}

function agrandar(maximo,minimo,ID,msj){
    ID2=ID;
    msjX=msj;
      contenido = document.getElementById(ID);
      altura = document.getElementById(ID).style.height;
      altura = parseFloat(altura);
    
    if(altura < maximo){
        altura++;
          contenido.style.display = "block";
          document.getElementById(ID).style.height = altura;
          AgregarTexto = altura+1;
        
        if(AgregarTexto == maximo){
            contenido.innerHTML = msj;
        }
    }
    
    if(altura < maximo){
        Rmaximo = maximo;
        Rminimo = minimo;
        
        setTimeout("agrandar(Rmaximo,Rminimo,ID2,msjX)",1);
    }
}

y el div así

Código:

<div id="barra" style="background:#CC0000; color:#FFFFFF; height:0px; width:100%; overflow: hidden;"><!-- --></div>

[emiliodeg]

y si le agregas display:none; ????

[gepd]

Iniciado por emiliodeg

y si le agregas display:none; ????

si tambien pensé en eso, lo que pasa que ese div se agranda progresivamente y al hacer eso no se puede visualizar el efecto

[guille_el3]

probaste ponerle margin y padding en 0px?

[gepd]

si, ya lo he hecho, tampoco OJO que es sólo en IE en FF va todo OK

[gepd]

Nadie sabe nada alrespecto???

[Mikmoro]

¿Cómo es la función que usas para hacer desparecer el texto?

Mikel.

[gepd]

Mira te explico un poco mas detallado, he utilizao un codigo de aqui para grandar y achicar el div, luego que termina de agradarse con innerHTML

Código:

function agrandar (){
    div = document.getElementById('mensaje');
    //aqui agrando el div progresivamente con setTimeout();
   //cuando finaliza...
   div.innetHTML = 'texto que deseo que aparezca';
}
function achicar (){
    div = document.getElementById('mensaje');
    div.innetHTML = ''; //elimino el texto del div
    //aqui achico el div progresivamente con setTimeout();.
}

éste seria el div

Código:

<div id="mensaje" style="width:100%; heigth:20px;"><!-- --></div>

mas o menos es eso...
pero al achicar vuelve a quedar el espacio que deja explroer por defecto en los div.
aunque ponga div.innerHTML = '<!-- -->';


saludos

[Mikmoro]

De acuerdo, no es problema del script. Supongo que le cambias dinámicamente el height, ¿no?

Pues creo que deberías probar sin el width, porque al ser un elemento de bloque (que es lo que produce el problema), ocupará de todas maneras el 100% del espacio disponible en su línea de flujo.

Si pones simplemente <div id="mensaje"></div>
cámbiale dinámicamente sólo el height, y el width que no aparezca. Si tiene también que agrandar de ancho, al reducir lo tendrás que llevar a cero y creo que no funcionará, pero si puedes no ponerlo y que sólo crezca a lo alto sí.

Mikel.

[caricatos]

Hola:

En explorer (al menos en algunas viejas versiones), aparte de height:0, debía ponerse overflow: hidden... parece que reserva el espacio de un salto de línea o algo así...

Saludos

[gepd]

Iniciado por Mikmoro;

De acuerdo, no es problema del script. Supongo que le cambias dinámicamente el height, ¿no?

Pues creo que deberías probar sin el width, porque al ser un elemento de bloque (que es lo que produce el problema), ocupará de todas maneras el 100% del espacio disponible en su línea de flujo.

Si pones simplemente <div id="mensaje"></div>
cámbiale dinámicamente sólo el height, y el width que no aparezca. Si tiene también que agrandar de ancho, al reducir lo tendrás que llevar a cero y creo que no funcionará, pero si puedes no ponerlo y que sólo crezca a lo alto sí.

Mikel.

mi problema no es el width si no el heigth es ahí donde explorer deja un salto de linea por defecto

Iniciado por caricatos

Hola:

En explorer (al menos en algunas viejas versiones), aparte de height:0, debía ponerse overflow: hidden... parece que reserva el espacio de un salto de línea o algo así...

Saludos

ya lo habia probado una vez, pero no me acordaba bie, para volver acesorarme lo he vuelto a hacer y nada sigue igual

saludos y gracias por ayudar desde ya

[Mikmoro]

No importa que tu problema sea el height; prueba ese div sin width, y a ver cómo lo ves.

Mikel.

[gepd]

Iniciado por Mikmoro

No importa que tu problema sea el height; prueba ese div sin width, y a ver cómo lo ves.

Mikel.

lo acavo de probar, e igual... de hecho lo he dejado así... eliminé el width, ya que hace llo mismo que al tener la pripiedad al 100%

saludos

[Mikmoro]

Pues entonces tiene que ser que no entiendo tu problema.

En este ejemplo, en el primer div de enmedio no hay width, y salen el de encima y el de debajo pegados, y en el segundo sí tiene width, y se hace un hueco entre ellos. El código es este:

<div id="mensaje1" style="width:100%; height:20px;background-color: #f00;"></div>
<div id="mensaje"></div>
<div id="mensaje3" style="width:100%; height:20px;background-color: #f0f;"></div>
<br/><br/>
<div id="mensaje1" style="width:100%; height:20px;background-color: #f00;"></div>
<div id="mensaje" style="width:100%;"></div>
<div id="mensaje3" style="width:100%; height:20px;background-color: #f0f;"></div>

Es decir, dos bloques (rojo y lila) y el de enmedio, que sería el que debería desaparecer.

A ver si descubrimos dónde está el problema.

Mikel.

[gepd]

Problema

Creo que estamos hablando de tomas totalmente distintos, y tambien creo que debi comenzar con un ejemplo desde el principio

si te fijas en el ejejmplo que puse, al principio no aparece el div, puero luego al poner agrandar, y luego volver achicar queda ese espacio en el div...
al principio lo he quitado con <div><!-- --></div>

[Mikmoro]

Yo creo que está solucionado

Míralo a ver.

Mikel.

[gepd]

Mikel Muchas gracias de verdad que llevaba días buscando ésta solución, ahora sí ya puedo continuar con mi proyecto... como ando un poco apurado no editare el post, pero detallaré todo en el primer post, creo que es importnate para los que buscan en el foro encontrar la informacion rápidamente

saludos y muchas gracias nuevamente

[Mikmoro]

Perfecto. Me alegro de que te haya servido.

Mikel.

[gepd]

Iniciado por Mikmoro

Perfecto. Me alegro de que te haya servido.

Mikel.

Uff no sabes cuanto, no sólo para éste script si no para muchos otros donde tenia problemas similares

[caricatos]

Hola:

He mirado el código de Mikel (¡Hola !) y me ha extrañado que funcionara en FF ya que la asignación del estilo no define las medidas (supongo que se interpreta como "px")... en explorer es claro que debe funcionar, pero en opera y otros... ¿? ... bueno, lo cierto es que los valores width, height, top, left... etc, deben acompañarse de las medidas...

Saludos

[Mikmoro]

La verdad es que lo único que he hecho ha sido añadir el display en ambas funciones para que se oculte sin utilizar otros trucos para explorer. Sólo hice eso para que funcionara, y ahora mirando el script creo que se puede optimizar un poco. Si no hay algún impedimento en el diseño real para que sea así, creo que este otro es más simple

Ejemplo

A lo que podría ser conveniente añadir el tamaño en px como bien dices.

Mikel.

[caricatos]

Hola:

La cerdad es que estoy extrañadísimo que en los 4 navegadores con los que lo probé, funciona bien... tengo que felicitarte

Tal vez, al no tener un doctype, se saltan esos errorcillos...

¡Confirmado!... con un doctype estricto no hace nada en mi FF portable, salvo que añadas "px" a los estilos:

Código:

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

Saludos

[kseso?]

Hola magister


Con el encabezado:

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
<title>Mikel</title>
<script>
<!--- resto del código de la página de Mikmoro -->

Tanto en FF 2.0.0.14, como en Opera 9.25 y :-p IE 7.0.6001.18000 corriendo en vi$ta me funciona.
(el código lo copié hoy domingo 15, a las 14:15 h local de España)
Saludos.

[Mikmoro]

El script final que me guardo para la colección

Con doctype Strict y con el añadido de px aportado por caricatos, funcionado en:

- FF 2 y 3
- IE 6 y 7
- Opera 9.50
- Safari 3.1 Windows

<!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>
<header>
<script>
function achicar(minimo,ID){
contenido = document.getElementById(ID);
altura = contenido.style.height;
altura = parseFloat(altura);
if(altura > minimo){
altura--;
contenido.style.height = altura + "px";
ocultar = altura-1;
if(ocultar == minimo){ contenido.style.display = "none";
}
}
if(altura > minimo){
Rminimo = minimo;
setTimeout("achicar(Rminimo,ID2)",1);
}
}
function agrandar(maximo,minimo,ID){
ID2=ID;
contenido = document.getElementById(ID);
altura = contenido.style.height;
altura = parseFloat(altura);
if(altura < maximo){
altura++;
contenido.style.display = "block";
contenido.style.height = altura + "px";
}
if(altura < maximo){
Rmaximo = maximo;
Rminimo = minimo;

setTimeout("agrandar(Rmaximo,Rminimo,ID2)",1);
}
}
</script>
</header>
<body bgcolor="#cccccc" topmargin="0" leftmargin="0" rightmargin="0">
<div id="barra" style="background:#CCCC00; height:0px; overflow: hidden;display: none;">Este es el texto que debe aparecer</div>
<a href="#" onClick="agrandar(40,0,'barra');">agrandar</a>
<a href="#" onClick="achicar(0,'barra');">achicar</a>
</body>
</html>

Lo pongo porque puede ser interesante para otra gente.

Mikel.

[gepd]

Pues Agregale
Opera Mac
Safari MAc
Firefox 3 Mac

También andan bien, 0 problemas lo acavo de corroborar

gracias por esas mejoras!!!

[Mikmoro]

Decía que así estaría mejor siempre que tu diseño lo permita, es decir, como vés, al usar el display desde el inicio no era necesario usar el inner, y el texto se puede poner directamente dentro del div, al igual que cualquier otra cosa, pero igual tú querías que saliera el texto sólo al final por alguna razón. Así como está ahora, parece que el texto estaba ahí pero se va descubriendo al quitar "el telón"

Mikel.

[gepd]

Iniciado por Mikmoro

Decía que así estaría mejor siempre que tu diseño lo permita, es decir, como vés, al usar el display desde el inicio no era necesario usar el inner, y el texto se puede poner directamente dentro del div, al igual que cualquier otra cosa, pero igual tú querías que saliera el texto sólo al final por alguna razón. Así como está ahora, parece que el texto estaba ahí pero se va descubriendo al quitar "el telón"

Mikel.

no exactamente eso fué lo que cambié que el texto se viera al agrandarse todo el "telon" y que se quitara antes de que se cerrara, pero son detalles minimos

:D

Gracias por todo

[furoya]

Hola todos :

Sí, caricatos, esos pixeles que aparecen en el div y otros elementos en realidad son 1em; una 'reserva' para texto. El asunto se había mencionado antes, aunque el tema —en el que yo participé— no me terminó gustando mucho.

forzar un height

Un detalle del código anterior (que está muy bueno, los felicito ) : en FF2 salta un bug al agrandar el texto. Me dijeron que la versión '3' ya trae un zoom de verdad y seguramente no habrá problemas, y como la comunidad "mozilla" actualiza cada vez que sale la nueva versión —aunque sea para probarla— no sé si debería preocuparnos. Igual se puede corregir fácil ... bah, más o menos ... al div se le tiene que dar una altura relativa, y así lo atamos a la altura de la fuente.

saludos

furoya

[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

[Mikmoro]

Hola, gepd.

Quizá has hecho alguna modificación posterior, porque yo estoy viendo el script que te puse con FF3 y va perfectamente.

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

Cópialo y pégalo en un archivo limpio y verás que funciona.

Mikel.