Desplegar un div oculto

[moisesra]

hola a todos...

vereis, tengo el siguiente codigo que cuando hago click se ejecuta la funcion y desplega un div oculto

Código PHP:

  var px = 0;
var py = 0;
var ALTODECAPA = 100;
function alargar (){
    if (px < ALTODECAPA){
    px = (px+10);
    document.getElementById('oculto').style.display = 'block';
    document.getElementById('oculto').style.height = px+'px';
    tempo = setTimeout('alargar ()', 20);
    }    
} 
   

lo que estoy intentando hacer es que al volver hacer click se repliegue y se vuela a poner oculto.. lo he intentado de varias formas pero no hay manera. Si alguien me puede ayudar lo agradezco de antemano..Gracias.

[David]

Pues bien, puedes hacer el proceso inverso, guardar en una variable si está desplegado o no. Luego si está desplegado en vez de sumar 10 a px, restar, y en vez de sumar height a px, también restar. Hasta que vuelva al estado deseado.

Saludos

[desendoll]

buenas

te recomiendo el código que me paso buzu esta aqui.

Va perfecto y creo que es justo lo que pides ocultar() y mostrar() con un efecto que simula desplegado

[buzu]

Yep, eso es exactamente lo que hace. Es sencillo de modificar. Hace unos días lo abrí nuevamente y me di cuenta que el efecto no cancela el click, por lo que es necesario ya sea poner como propiedad href="#nogo" en el enlace, lo cual no es recomendable, o cancelar el click con javascript. Yo encuentro esta segunda opcion mas recomendable. Yo ya lo eh modificado, si no sabes como hacerlo nomas dime. Después de que hayas investigado sin obtener resultados claro está.

[moisesra]

ok , perfecto gracias, al final logre hacerlo que me funcionara pero como no el IE de problemas cuando le pongo contenido al div oculto como por ejemplo un input no me hace la animacion sobre este sino que da un salto en todo el alto del input..:S:S o si meto texto me hace lo mismo, va dando saltitos la animacion...pongo el codigo que utilice y me gustaria saber si con tu funcion buzu no tienes estos problemas...

Código PHP:

  var px = 0;
var py = 0;
var ALTODECAPA = 100;
function alargar (){
      if (px < ALTODECAPA){
    px = (px+10);
    document.getElementById('oculto').style.display = 'block';
    document.getElementById('oculto').style.height = px+'px';
    tempo = setTimeout('alargar ()', 20);
    }
    if (py > 0){
    py = (py-10);
    document.getElementById('oculto').style.height = py+'px';
    tempo2 = setTimeout('alargar ()', 20);
    if (py==0){document.getElementById('oculto').style.display = 'none';clearTimeout(tempo2);px=0;}
    }
    if (px == 100){clearTimeout(tempo);py=px;px=110;}
    //alert(py);
} 
   

[buzu]

no he probado con ese tipo de contenidos pero no creo que lo haya, Por que no pruevas la funcion y me dices?

[moisesra]

ey buzu, me fue perfecto el codigo, funciona correctamente tanto con IE como con firefox. Una preguntita, al cargar la pagina se ve la animacion de como se oculta el div, es posible hacer que directamente aparezca oculto..???

[buzu]

Si, si es posible, pero si no lo hice asi es por motivos de Graceful degradation (Como rayos se dice eso en español?) Bueno, lo que puedes hacer es especificar en tus hojas de estilo height: 0px; eso ocultara el div. El problema es que si por alguno motivo el efecto no funciona no hay forma de mostrar el contenido.

Veras, cuando desarrollo efectos lo primero que hago es desarrollar la página de modo que se vea como se vera después de realizado el efecto, en este caso el div completamente extendido. Luego con javascript llevo la pagina al estado inicial, en este caso el div oculto. De esa manera me aseguro de que si el efecto no funciona, la pagina se mostrara tal como la desarrolle al principio, de modo que el usuario podrá ver todo el contenido.

Otra cosa que puedes hacer es poner el div oculto en la función init, para eso bastaría con agregar a dicha función la siguiente linea.

Código HTML:

infodiv.style.height = '0px';

Pero esto trae consigo otro problema. La función init se ejecuta hasta que la pagina se ha cargado completamente por lo que el div se vera extendido por lo menos por una fracción de segundo antes de ocultarse bruscamente lo cual se ve muy feo y es la razón por la que no lo hice asi.

A mi tampoco me gusta el hecho de que al cargar la pagina se vea el efecto. Pero no te preocupes, que ahora mismo estoy usando el efecto para poner un formulario de contacto que va en todas las paginas por lo que tengo que arreglar ese asunto ya que no me gusta como se ve el efecto al navegar entre paginas, pues cada que vas a otra sección te sale el @#$ efecto y después de un rato fastidia. Aun que mejor si preocúpate ya que al final creo que terminare usando ajax para cargar las secciones y si es así no tendré el problema del formulario, de cualquier modo si arreglo algo yo te aviso...

[buzu]

Que mentiroso soy:

Iniciado por buzu

no he probado con ese tipo de contenidos pero no creo que lo haya, Por que no pruevas la funcion y me dices?

Si estoy usándolo con un formulario... Debe ser que ya me estaba quedando dormido.... Malditas drogas. jajaja.

[moisesra]

perfect..!! una ultima cosa buzu, si lo que quiero es lo contrario que se me muestre abierto al cargar la pagina?¿?

[buzu]

ah bueno, la cosa es mas sencilla. Basta con eliminar la siguiente linea de la funcion init();

info.efecto();

Elimina esa linea en la funcion init() y listo.

[buzu]

Solucionado el tema ese.
Al principio pensé que bastaría con poner un poco de javascript la función del cual seria checar si los métodos necesarios para asegurar el buen funcionamiento del desplegado estaban a nuestra disposición, si lo estaban, entonces escribir un CSS (dinámicamente por supuesto) en el que pusiéramos una regla para poner el div a cero en su altura lo que lo ocultaría. Este js estaría en el principio de la página y pues no tendría que esperar a que se cargara la pagina evitando así el problema que se genera al poner el infodiv.style.height = '0px'; en la función init().

En efecto, el js checaba si los métodos estaban disponibles y si lo estaban entonces "escondía" el div, pero eso me jodía el efecto. Esto por que en la función init(); checa el valor de la altura del div y lo guardo en una variable. Como el js que ponía al inicio me llevaba la altura a cero antes de cargar la pagina, cuando la pagina se cargaba el valor de la altura del div era cero, en lugar del valor de la altura total del div en su estado normal (extendido). El efecto depende de ese valor para saber hasta donde expander el div. Como en este caso el valor era cero, lo máximo que el div se podía extender era cero lo cual me dejaba el div siempre escondido.

Después intenté con la misma técnica del javascript al inicio, que por cierto la solucion se basa en esa idea, pero en lugar de poner la altura en cero especifiqué display = 'none' lo que me dio el mismo problema.

Lo que había que hacer era encontrar una regla que me permitiera ocultar el elemento sin que eso significara alterar su altura inicial (la del div extendido) permitiéndome pasar ese valor a la variable en la función init(); de tal modo que el div se extendiera hasta su altura normal y necesaria para mostrar los elementos. Fue ahí cuando recordé de la propiedad visibility y lo que hice fue, en lugar de llevar la altura a cero o poner dislpay igual a none, puse visibility igual a hidden. Lo que la propiedad visibility hace es ocultar o mostrar un elemento sin modificarlo, simplemente no lo muestra (si se pone como hidden). Esto me resolvió el problema de no mostrar el elemento, algo como para no revelar su contenido hasta que el usuario quiera acceder a el, pero me dejo todavía un problema. Como la propiedad visibility no altera el elemento, el elemento no se mostraba, pero su espacio seguía ahí, es decir que veía un espacio en blanco. Para poder quitar ese espacio en blanco era necesario remover el elemento del flujo de la página. Para lograr eso lo mas conveniente es poner el valor de position en absolute y después en la función init(); volver aponer tanto visibility como visible y position como static para volver a poner el elemento visible e integrarlo nuevamente en el flujo de la pagina. Al final la solución se resume en esto:

1 Agregar a la función init(); las siguientes lineas:

Código:

infodiv.style.visibility = "visible";
infodiv.style.position = 'static';

2 Agregar a la cabecera de la pagina lo siguiente:

Código:

<script type="text/javascript">
		if(document.getElementById){
			document.write("<style type='text/css'>#iddetuelemento{visibility: hidden; position: absolute; }<\/style>")
		}
	</script>

Por supuesto que esto último lo puedes poner en un javascript aparte y yo te recomendaría que así lo hicieras. Sin embargo si, como en mi caso, solo usaras el script en una pagina, es aceptable y quizá una mejor opción poner el js tal como esta en la cabecera de la pagina.

Saludos.

[moisesra]

muy buena explicacion, si señor..!!me va de maravilla buzu, muchas gracias

[buzu]

Claro. Saludos!

[moisesra]

ey buzu...me ha surgido un problema....y es que en el div oculto tengo campos dinamicos lo cual me varia la altura del div, se podria hacer que al hacer click en el boton que me muestra el div oculto vuelva a obtener la altura de este por si ha variado...?????

[buzu]

Hola, prueba con esto, agrega la linea en rojo a la función efecto de modo que te quede tal como el código siguiente:

info.altura = infodiv.offsetHeight;

Código PHP:

  efecto: function(){
                info.altura = infodiv.offsetHeight;
        if(info.abierto == false){
            clearInterval(info.intervalo);
            info.muestra();
            info.abierto = true;
        }else if(info.abierto == true){
            clearInterval(info.intervalo);
            info.oculta();
            info.abierto = false;
        }
    }, 
   

cuéntame como te va ok....