Foros del Web » Programando para Internet » Javascript »

Ayuda con texto desplegable.

 Estas en el tema de Ayuda con texto desplegable. en el foro de Javascript en Foros del Web. Actualmente estoy trabajando con un javascript que despliega el texto de manera seca por asi decirlo, recorriendo esta web note que el mismo despliegue se ...
  #1 (permalink)  
Antiguo 17/06/2009, 12:17
Avatar de Wonza99  
Fecha de Ingreso: marzo-2009
Mensajes: 54
Antigüedad: 15 años, 9 meses
Puntos: 0
Ayuda con texto desplegable.
Actualmente estoy trabajando con un javascript que despliega el texto de manera seca por asi decirlo, recorriendo esta web note que el mismo despliegue se puede hacer con un efecto mas suave.

La pagina es la siguiente:

http://www.visitingargentina.com/esp..._argentina.php

y el efecto es cuando hacemos click en Region Norte, Centro, etc etc...

Estoy utilizando el siguiente javascript.

ocultar.js

Código: 
function cambiar(esto)
{
	vista=document.getElementById(esto).style.display;
	if (vista=='none')
		vista='block';
	else
		vista='none';

	document.getElementById(esto).style.display = vista;
}
Carga de Ocultar.js

Código: 
<script src="ocultar.js" type="text/javascript"></script>
Link

Código: 
<a href="#" onclick="cambiar('ejemplo'); return false;">Texto de Ejemplo</a>
Texto a Mostrar

Código: 
<div id="ejemplo" style="display: none;">Texto Oculto</div>

¿Se puede anexar algo al codigo para que se despliegue de manera mas suave o bien tengo que cambiar todo?

Gracias.
  #2 (permalink)  
Antiguo 17/06/2009, 12:40
Avatar de buzu  
Fecha de Ingreso: octubre-2006
Ubicación: San Francisco, CA
Mensajes: 2.168
Antigüedad: 18 años, 2 meses
Puntos: 122
Respuesta: Ayuda con texto desplegable.
Al parecer tienes que cambiarlo todo.
Hace tiempo escribí este código que hace lo que quieres pero es especificamente para un sitio web por lo que necesitarás adaptarlo a tu propio sitio y a tus propias necesidades. Espero que te sirva por lo menos para darte una idea de como se hace:

Código javascript: 
Ver original
  1. var info = {
  2.     addEvent: function(elem, evType, func, useCapture){
  3.         if(elem.addEventListener){
  4.             elem.addEventListener(evType, func, useCapture);
  5.             return true;
  6.         }else if(elem.attachEvent){
  7.             var r = elem.attachEvent('on' + evType, func);
  8.             return r;
  9.         }else{
  10.             elem['on' + evType] = func;
  11.         }
  12.     },
  13.     
  14.     init: function(){
  15.         var infodiv = document.getElementById('info_libro');
  16.         var libro = document.getElementById('elLibro');
  17.         info.altura = infodiv.offsetHeight;
  18.         info.efecto();
  19.         info.addEvent(libro, 'click', info.efecto, false);
  20.     },
  21.     
  22.     efecto: function(){
  23.         if(info.abierto == false){
  24.             clearInterval(info.intervalo);
  25.             info.muestra();
  26.             info.abierto = true;
  27.         }else if(info.abierto == true){
  28.             clearInterval(info.intervalo);
  29.             info.oculta();
  30.             info.abierto = false;
  31.         }
  32.     },
  33.     
  34.     muestra: function(){
  35.         var infodiv = document.getElementById('info_libro');
  36.         infodiv.style.height = '0px';
  37.         infodiv.style.overflow = 'hidden';
  38.         info.intervalo = setInterval(function(){ info.redimenciona(info.altura); }, 1);
  39.     },
  40.     
  41.     oculta: function(){
  42.         var infodiv = document.getElementById('info_libro');
  43.         infodiv.style.height = infodiv.offsetHeight + 'px';// establesco la altura por que js no la lee a menos que haya sido establecida antes.
  44.         infodiv.style.overflow = 'hidden';
  45.         info.intervalo = setInterval(function(){ info.redimenciona(0); }, 1);
  46.     },
  47.     
  48.     redimenciona: function(limite){
  49.         var infodiv = document.getElementById('info_libro');
  50.         inicial = parseInt(infodiv.style.height);
  51.         
  52.         actual = Math.ceil((limite - inicial)/4);
  53.         inicial += actual;
  54.         infodiv.style.height = inicial + 'px';
  55.         if(parseInt(infodiv.style.height) >= (limite - 5) && parseInt(infodiv.style.height) <= (limite + 5)){
  56.             clearInterval(info.intervalo);
  57.             infodiv.style.height = limite + 'px';
  58.         }
  59.     },
  60.     
  61.     abierto: true
  62. }
  63.  
  64. info.addEvent(window, 'load', info.init, false);
__________________
twitter: @imbuzu
  #3 (permalink)  
Antiguo 17/06/2009, 12:46
Avatar de Wonza99  
Fecha de Ingreso: marzo-2009
Mensajes: 54
Antigüedad: 15 años, 9 meses
Puntos: 0
Respuesta: Ayuda con texto desplegable.
Cita:
Iniciado por buzu Ver Mensaje
Al parecer tienes que cambiarlo todo.
Hace tiempo escribí este código que hace lo que quieres pero es especificamente para un sitio web por lo que necesitarás adaptarlo a tu propio sitio y a tus propias necesidades. Espero que te sirva por lo menos para darte una idea de como se hace:

Código javascript: 
Ver original
  1. var info = {
  2.     addEvent: function(elem, evType, func, useCapture){
  3.         if(elem.addEventListener){
  4.             elem.addEventListener(evType, func, useCapture);
  5.             return true;
  6.         }else if(elem.attachEvent){
  7.             var r = elem.attachEvent('on' + evType, func);
  8.             return r;
  9.         }else{
  10.             elem['on' + evType] = func;
  11.         }
  12.     },
  13.     
  14.     init: function(){
  15.         var infodiv = document.getElementById('info_libro');
  16.         var libro = document.getElementById('elLibro');
  17.         info.altura = infodiv.offsetHeight;
  18.         info.efecto();
  19.         info.addEvent(libro, 'click', info.efecto, false);
  20.     },
  21.     
  22.     efecto: function(){
  23.         if(info.abierto == false){
  24.             clearInterval(info.intervalo);
  25.             info.muestra();
  26.             info.abierto = true;
  27.         }else if(info.abierto == true){
  28.             clearInterval(info.intervalo);
  29.             info.oculta();
  30.             info.abierto = false;
  31.         }
  32.     },
  33.     
  34.     muestra: function(){
  35.         var infodiv = document.getElementById('info_libro');
  36.         infodiv.style.height = '0px';
  37.         infodiv.style.overflow = 'hidden';
  38.         info.intervalo = setInterval(function(){ info.redimenciona(info.altura); }, 1);
  39.     },
  40.     
  41.     oculta: function(){
  42.         var infodiv = document.getElementById('info_libro');
  43.         infodiv.style.height = infodiv.offsetHeight + 'px';// establesco la altura por que js no la lee a menos que haya sido establecida antes.
  44.         infodiv.style.overflow = 'hidden';
  45.         info.intervalo = setInterval(function(){ info.redimenciona(0); }, 1);
  46.     },
  47.     
  48.     redimenciona: function(limite){
  49.         var infodiv = document.getElementById('info_libro');
  50.         inicial = parseInt(infodiv.style.height);
  51.         
  52.         actual = Math.ceil((limite - inicial)/4);
  53.         inicial += actual;
  54.         infodiv.style.height = inicial + 'px';
  55.         if(parseInt(infodiv.style.height) >= (limite - 5) && parseInt(infodiv.style.height) <= (limite + 5)){
  56.             clearInterval(info.intervalo);
  57.             infodiv.style.height = limite + 'px';
  58.         }
  59.     },
  60.     
  61.     abierto: true
  62. }
  63.  
  64. info.addEvent(window, 'load', info.init, false);
Buenisimo Buzu, gracias por el codigo.

Lo estoy mirando y veo que tendria que modificar info_libro y elLibro, Perdon por la ignorancia pero no logro darme cuenta que serian y como tendría que declarar el texto oculto a partir de este nuevo javascript.

Gracias por tu ayuda.
  #4 (permalink)  
Antiguo 17/06/2009, 12:51
Avatar de buzu  
Fecha de Ingreso: octubre-2006
Ubicación: San Francisco, CA
Mensajes: 2.168
Antigüedad: 18 años, 2 meses
Puntos: 122
Respuesta: Ayuda con texto desplegable.
Ok, info_libro es el id del div o el párrafo o lo que quieras ocultar. elLibro es el botón o enlace que quieres que se presione para activar el efecto. El texto a ocultar simplemente ponlo de forma normal en el div que quieres ocultar. Tal como lo harías normalmente.
__________________
twitter: @imbuzu
  #5 (permalink)  
Antiguo 17/06/2009, 12:54
Avatar de Wonza99  
Fecha de Ingreso: marzo-2009
Mensajes: 54
Antigüedad: 15 años, 9 meses
Puntos: 0
Respuesta: Ayuda con texto desplegable.
Cita:
Iniciado por buzu Ver Mensaje
Ok, info_libro es el id del div o el párrafo o lo que quieras ocultar. elLibro es el botón o enlace que quieres que se presione para activar el efecto. El texto a ocultar simplemente ponlo de forma normal en el div que quieres ocultar. Tal como lo harías normalmente.
Muy bien, osea que simplemente modificaria 100% el archivo javascript y logicamente el ID del div.

Gracias, a probar !
  #6 (permalink)  
Antiguo 17/06/2009, 12:59
Avatar de buzu  
Fecha de Ingreso: octubre-2006
Ubicación: San Francisco, CA
Mensajes: 2.168
Antigüedad: 18 años, 2 meses
Puntos: 122
Respuesta: Ayuda con texto desplegable.
Si, con ese que te pase ya no necesitas nada de tu viejo JS. Espero que te sirva, de no ser así, avisas...
__________________
twitter: @imbuzu
  #7 (permalink)  
Antiguo 17/06/2009, 14:23
Avatar de Wonza99  
Fecha de Ingreso: marzo-2009
Mensajes: 54
Antigüedad: 15 años, 9 meses
Puntos: 0
Respuesta: Ayuda con texto desplegable.
A ver, hay algo que no entiendo bien.

Del Java Script tengo que modificar info_libro y elLibro

Ahora, lo que yo quiero es que cuando hagan click en una imagen se despligue el texto oculto.

Ahora bien, el codigo html que carga la imagen es:

Código: 
<img src="ejemplo.jpg" border="0" />
Anteriormente le agregaba este link para que ejecute el js:

Código: 
<a href="#" onclick="cambiar('ejemplo'); return false;">LINK</a>
Osea que el codigo quedaría:

Código: 
<a href="#" onclick="cambiar('ejemplo'); return false;"><img src="separaarjona.jpg" border="0" /></a>
Mi pregunta es que tengo que poner en remplazo de esto href="#" onclick="cambiar('ejemplo'); return false;" para que se ejecute correctamente.
  #8 (permalink)  
Antiguo 17/06/2009, 14:33
Avatar de Adler
Colaborador
  
Fecha de Ingreso: diciembre-2006
Mensajes: 4.671
Antigüedad: 18 años
Puntos: 126
Respuesta: Ayuda con texto desplegable.
Hola

Con permiso

Este es bastante mas sencillo

Código javascript: 
Ver original
  1. function cambia(esto) {
  2. var obj = document.getElementById(esto);
  3.  
  4.     if(obj.style.display == 'none' ) {
  5.                     despliega(esto);
  6.             } else {
  7.                         recoge(esto);
  8.             }
  9. }
  10.  
  11.  
  12. var height=1;
  13. function despliega(elem) {
  14.  
  15.     if(height<=120){
  16.     height+=5;
  17.         document.getElementById(elem).style.display='block';
  18.         document.getElementById(elem).style.height=height+'px';
  19.         setTimeout("despliega('"+elem+"')",30);
  20.  
  21.     }
  22. }
  23.  
  24.  
  25.  
  26. function recoge(elem) {
  27.  
  28.     if(height>=0){
  29.     height-=5;
  30.         document.getElementById(elem).style.height=height+'px';
  31.         setTimeout("recoge('"+elem+"')",30);
  32.  
  33.     }
  34.     else
  35.     {
  36.         document.getElementById(elem).style.display='none';
  37.     }
  38. }
Suerte
__________________
Los formularios se envían/validan con un botón Submit
<input type="submit" value="Enviar" style="background-color:#0B5795; font:bold 10px verdana; color:#FFF;" />
  #9 (permalink)  
Antiguo 17/06/2009, 14:51
Avatar de buzu  
Fecha de Ingreso: octubre-2006
Ubicación: San Francisco, CA
Mensajes: 2.168
Antigüedad: 18 años, 2 meses
Puntos: 122
Respuesta: Ayuda con texto desplegable.
Para no complicarte el asunto, aun que no es la mejor forma, solo cambia:

onclick="cambiar('ejemplo'); return false;

por

onclick='info.efecto(); return false;'
__________________
twitter: @imbuzu
  #10 (permalink)  
Antiguo 17/06/2009, 14:53
Avatar de Wonza99  
Fecha de Ingreso: marzo-2009
Mensajes: 54
Antigüedad: 15 años, 9 meses
Puntos: 0
Respuesta: Ayuda con texto desplegable.
Cita:
Iniciado por Adler Ver Mensaje
Hola

Con permiso

Este es bastante mas sencillo

Código javascript: 
Ver original
  1. function cambia(esto) {
  2. var obj = document.getElementById(esto);
  3.  
  4.     if(obj.style.display == 'none' ) {
  5.                     despliega(esto);
  6.             } else {
  7.                         recoge(esto);
  8.             }
  9. }
  10.  
  11.  
  12. var height=1;
  13. function despliega(elem) {
  14.  
  15.     if(height<=120){
  16.     height+=5;
  17.         document.getElementById(elem).style.display='block';
  18.         document.getElementById(elem).style.height=height+'px';
  19.         setTimeout("despliega('"+elem+"')",30);
  20.  
  21.     }
  22. }
  23.  
  24.  
  25.  
  26. function recoge(elem) {
  27.  
  28.     if(height>=0){
  29.     height-=5;
  30.         document.getElementById(elem).style.height=height+'px';
  31.         setTimeout("recoge('"+elem+"')",30);
  32.  
  33.     }
  34.     else
  35.     {
  36.         document.getElementById(elem).style.display='none';
  37.     }
  38. }
Suerte
Mil Gracias, funciona a la perfección. Lo que si tendre que ver el tema del tamaño de despliegue ya que no es automatico y me corta el texto.
  #11 (permalink)  
Antiguo 17/06/2009, 14:57
Avatar de buzu  
Fecha de Ingreso: octubre-2006
Ubicación: San Francisco, CA
Mensajes: 2.168
Antigüedad: 18 años, 2 meses
Puntos: 122
Respuesta: Ayuda con texto desplegable.
el código que te pasé soluciona ese problema. A veces más sencillo no quiere decir mejor. Prueba como te dije si te funciona adelante y si no, podemos seguir con ese o adaptar la otra opción para que te tome el alto automático.
__________________
twitter: @imbuzu
  #12 (permalink)  
Antiguo 17/06/2009, 15:23
Avatar de Wonza99  
Fecha de Ingreso: marzo-2009
Mensajes: 54
Antigüedad: 15 años, 9 meses
Puntos: 0
Respuesta: Ayuda con texto desplegable.
Listo che, Muchisimas gracias :D
  #13 (permalink)  
Antiguo 17/06/2009, 18:08
Avatar de buzu  
Fecha de Ingreso: octubre-2006
Ubicación: San Francisco, CA
Mensajes: 2.168
Antigüedad: 18 años, 2 meses
Puntos: 122
Respuesta: Ayuda con texto desplegable.
Hummm al final por cual de los dos métodos te has decidido? Encontré una ventaja en el que fue sugerido a parte del mio. Ese te deja hacer el efecto con varios divs. El mio se puede adaptar, pero tal como está funciona solo para uno.
__________________
twitter: @imbuzu
  #14 (permalink)  
Antiguo 17/06/2009, 18:46
Avatar de Wonza99  
Fecha de Ingreso: marzo-2009
Mensajes: 54
Antigüedad: 15 años, 9 meses
Puntos: 0
Respuesta: Ayuda con texto desplegable.
Cita:
Iniciado por buzu Ver Mensaje
Hummm al final por cual de los dos métodos te has decidido? Encontré una ventaja en el que fue sugerido a parte del mio. Ese te deja hacer el efecto con varios divs. El mio se puede adaptar, pero tal como está funciona solo para uno.
Probe con el tuyo, modificando los ID pero no hubo forma de hacerlo andar. Luego probe con el de Adler y funciono a la perfección, pero si te parece podemos seguir experimentando con el tuyo, hacerlo andar y dejarlo bien explicado por si a alguien le sirve a futuro.
  #15 (permalink)  
Antiguo 17/06/2009, 19:40
Avatar de buzu  
Fecha de Ingreso: octubre-2006
Ubicación: San Francisco, CA
Mensajes: 2.168
Antigüedad: 18 años, 2 meses
Puntos: 122
Respuesta: Ayuda con texto desplegable.
No, si ya te funciona para que buscarle cinco patas al gato... Yo se como modificar el mio, pero por ahora no pienso distribuirlo por eso no lo he modificado. Como te dije desde un principio, era para una web especifica. En hora buena, y que gusto que hayas solucionado el dilema :)
__________________
twitter: @imbuzu
  #16 (permalink)  
Antiguo 18/06/2009, 04:16
Avatar de Adler
Colaborador
  
Fecha de Ingreso: diciembre-2006
Mensajes: 4.671
Antigüedad: 18 años
Puntos: 126
Respuesta: Ayuda con texto desplegable.
Hola

buzu no era mi intención pisarte, solo que cuando vi tu script me vi que habría que adaptarlo para creara el efecto en varios divs. Y si ya le costaba saber como llamar a la función ......
__________________
Los formularios se envían/validan con un botón Submit
<input type="submit" value="Enviar" style="background-color:#0B5795; font:bold 10px verdana; color:#FFF;" />
  #17 (permalink)  
Antiguo 18/06/2009, 05:34
Avatar de Wonza99  
Fecha de Ingreso: marzo-2009
Mensajes: 54
Antigüedad: 15 años, 9 meses
Puntos: 0
Respuesta: Ayuda con texto desplegable.
Cita:
Iniciado por buzu Ver Mensaje
No, si ya te funciona para que buscarle cinco patas al gato... Yo se como modificar el mio, pero por ahora no pienso distribuirlo por eso no lo he modificado. Como te dije desde un principio, era para una web especifica. En hora buena, y que gusto que hayas solucionado el dilema :)
Perfecto entonces. Te Agradezco de igual manera.

Cita:
Iniciado por Adler Ver Mensaje
Hola

buzu no era mi intención pisarte, solo que cuando vi tu script me vi que habría que adaptarlo para creara el efecto en varios divs. Y si ya le costaba saber como llamar a la función ......
y si, digamos que no tengo amplios conocimientos en programación, pero antes que quedarme sentado y esperar que alguien me programe todo, tan siquiera pregunto y averiguo a los que saben... Para eso esta el foro ¿NO?

Saludos.
  #18 (permalink)  
Antiguo 18/06/2009, 06:02
Avatar de Adler
Colaborador
  
Fecha de Ingreso: diciembre-2006
Mensajes: 4.671
Antigüedad: 18 años
Puntos: 126
Respuesta: Ayuda con texto desplegable.
Hola

Cita:
Iniciado por Wonza99 Ver Mensaje
y si, digamos que no tengo amplios conocimientos en programación, pero antes que quedarme sentado y esperar que alguien me programe todo, tan siquiera pregunto y averiguo a los que saben... Para eso esta el foro ¿NO?
me has tenido que entender mal. No he dicho lo contrario....
Cuando se está empezando hay que ir poco a poco, entendiendo los giones para así poder evolucionar. Tendrías que haberme visto a mi hace un año Además seguro que buzu estaría encantado de ayudarte a adaptar el código a tus necesidades
__________________
Los formularios se envían/validan con un botón Submit
<input type="submit" value="Enviar" style="background-color:#0B5795; font:bold 10px verdana; color:#FFF;" />
  #19 (permalink)  
Antiguo 18/06/2009, 08:32
Avatar de Wonza99  
Fecha de Ingreso: marzo-2009
Mensajes: 54
Antigüedad: 15 años, 9 meses
Puntos: 0
Respuesta: Ayuda con texto desplegable.
Cita:
Iniciado por Adler Ver Mensaje
Hola



me has tenido que entender mal. No he dicho lo contrario....
Cuando se está empezando hay que ir poco a poco, entendiendo los giones para así poder evolucionar. Tendrías que haberme visto a mi hace un año Además seguro que buzu estaría encantado de ayudarte a adaptar el código a tus necesidades
Ahh bueno, te entendi mal entonces

Te cuento que estoy finalmente trabajando con el Javascript que me pasaste y solamente me deja desplegar 1 por vez... ¿Existe la posibilidad de que se desplieguen todos los que uno quiera?

Para ser mas claro, Me deja desplegar siempre y cuando no este desplegado otro texto y si esta desplegado tengo que cerrarlo.

Saludos y gracias por vuestra ayuda.
  #20 (permalink)  
Antiguo 18/06/2009, 12:30
Avatar de Adler
Colaborador
  
Fecha de Ingreso: diciembre-2006
Mensajes: 4.671
Antigüedad: 18 años
Puntos: 126
Respuesta: Ayuda con texto desplegable.
Hola

Solo has de quitar la var height como global

Algo así

Código javascript: 
Ver original
  1. function cambia(elem) {
  2. var obj = document.getElementById(elem);
  3.  
  4.     if(obj.style.display == 'none' ) {
  5.                     despliega(elem,1);
  6.             } else {
  7.                         recoge(elem,121);
  8.             }
  9. }
  10.  
  11.  
  12.  
  13. function despliega(elem,height) {
  14.     if(height<=120){
  15.     height+=5;
  16.         document.getElementById(elem).style.display='block';
  17.         document.getElementById(elem).style.height=height+'px';
  18.         setTimeout("despliega('"+elem+"',"+height+")",30);
  19.  
  20.     }
  21. }
  22.  
  23.  
  24.  
  25. function recoge(elem,height) {
  26.  
  27.     if(height>=0){
  28.     height-=5;
  29.         document.getElementById(elem).style.height=height+'px';
  30.         setTimeout("recoge('"+elem+"',"+height+")",30);
  31.  
  32.     }
  33.     else
  34.     {
  35.         document.getElementById(elem).style.display='none';
  36.     }
  37. }

Suerte
__________________
Los formularios se envían/validan con un botón Submit
<input type="submit" value="Enviar" style="background-color:#0B5795; font:bold 10px verdana; color:#FFF;" />
  #21 (permalink)  
Antiguo 18/06/2009, 12:49
Avatar de buzu  
Fecha de Ingreso: octubre-2006
Ubicación: San Francisco, CA
Mensajes: 2.168
Antigüedad: 18 años, 2 meses
Puntos: 122
Respuesta: Ayuda con texto desplegable.
Cita:
buzu no era mi intención pisarte, solo que cuando vi tu script me vi que habría que adaptarlo para creara el efecto en varios divs. Y si ya le costaba saber como llamar a la función ......
Para nada, las soluciones son eso, soluciones y su tu código le solucionó el problema pues la verdad que me parece muy bien. Creo que peor hubiera sido que te quedaras callado y que nosotros tardáramos más en adaptar el código. La verdad que es por eso que los foros son geniales, siempre hay uno con una respuesta que se adapta a tus necesidades y todo lo demás te sirve como material de aprendizaje.

Saludos y todos pa' delante...
__________________
twitter: @imbuzu
  #22 (permalink)  
Antiguo 18/06/2009, 14:41
Avatar de Wonza99  
Fecha de Ingreso: marzo-2009
Mensajes: 54
Antigüedad: 15 años, 9 meses
Puntos: 0
Respuesta: Ayuda con texto desplegable.
Cita:
Iniciado por Adler Ver Mensaje
Hola

Solo has de quitar la var height como global

Algo así

Código javascript: 
Ver original
  1. function cambia(elem) {
  2. var obj = document.getElementById(elem);
  3.  
  4.     if(obj.style.display == 'none' ) {
  5.                     despliega(elem,1);
  6.             } else {
  7.                         recoge(elem,121);
  8.             }
  9. }
  10.  
  11.  
  12.  
  13. function despliega(elem,height) {
  14.     if(height<=120){
  15.     height+=5;
  16.         document.getElementById(elem).style.display='block';
  17.         document.getElementById(elem).style.height=height+'px';
  18.         setTimeout("despliega('"+elem+"',"+height+")",30);
  19.  
  20.     }
  21. }
  22.  
  23.  
  24.  
  25. function recoge(elem,height) {
  26.  
  27.     if(height>=0){
  28.     height-=5;
  29.         document.getElementById(elem).style.height=height+'px';
  30.         setTimeout("recoge('"+elem+"',"+height+")",30);
  31.  
  32.     }
  33.     else
  34.     {
  35.         document.getElementById(elem).style.display='none';
  36.     }
  37. }

Suerte
Estimado, note que la unica modificación que hiciste en el codigo fue eliminar la linea nº 12

Código: 
var height=1
Acabo de probar eliminandola y no se ejecuta el despliegue del texto

Por otro lado pregunto si le puedo poner otro atributo al link, ya que estoy utilizando <a href="#" onclick: ...... y cada vez que se hace click en los botones a desplegar se va al top de la WEB.

Saludos y gracias nuevamente.
  #23 (permalink)  
Antiguo 18/06/2009, 15:49
Avatar de buzu  
Fecha de Ingreso: octubre-2006
Ubicación: San Francisco, CA
Mensajes: 2.168
Antigüedad: 18 años, 2 meses
Puntos: 122
Respuesta: Ayuda con texto desplegable.
en el enlace pon #nova así no va a ningún lado. En realidad no importa que le pongas mientras que no coincida con un id o un name de una ancla. Con lo del desplegable, esa variable la tienes que modificar para según la altura que quieras, No la borres, solo cambia su valor.
__________________
twitter: @imbuzu
  #24 (permalink)  
Antiguo 19/06/2009, 05:45
Avatar de Adler
Colaborador
  
Fecha de Ingreso: diciembre-2006
Mensajes: 4.671
Antigüedad: 18 años
Puntos: 126
Respuesta: Ayuda con texto desplegable.
Hola

Si copiastes el código tal y como te lo dí, ha de funciona

En rojo los cambios con respecto al anterior

function cambia(elem) {
var obj = document.getElementById(elem);

if(obj.style.display == 'none' ) {
despliega(elem,1);
} else {
recoge(elem,121);
}
}



function despliega(elem,height) {
if(height<=120){
height+=5;
document.getElementById(elem).style.display='block ';
document.getElementById(elem).style.height=height+ 'px';
setTimeout("despliega('"+elem+"',"+height+")",30);

}
}



function recoge(elem,height) {

if(height>=0){
height-=5;
document.getElementById(elem).style.height=height+ 'px';
setTimeout("recoge('"+elem+"',"+height+")",30);

}
else
{
document.getElementById(elem).style.display='none' ;
}
}


Con respecto al link, puedes usar lo que dice buzu o <a herf="javascript:void(0)" onclick".... >

Suerte
__________________
Los formularios se envían/validan con un botón Submit
<input type="submit" value="Enviar" style="background-color:#0B5795; font:bold 10px verdana; color:#FFF;" />
  #25 (permalink)  
Antiguo 19/06/2009, 07:55
Avatar de Wonza99  
Fecha de Ingreso: marzo-2009
Mensajes: 54
Antigüedad: 15 años, 9 meses
Puntos: 0
Respuesta: Ayuda con texto desplegable.
Cita:
Iniciado por buzu Ver Mensaje
en el enlace pon #nova así no va a ningún lado. En realidad no importa que le pongas mientras que no coincida con un id o un name de una ancla. Con lo del desplegable, esa variable la tienes que modificar para según la altura que quieras, No la borres, solo cambia su valor.
Cita:
Iniciado por Adler Ver Mensaje
Hola

Si copiastes el código tal y como te lo dí, ha de funciona

En rojo los cambios con respecto al anterior

function cambia(elem) {
var obj = document.getElementById(elem);

if(obj.style.display == 'none' ) {
despliega(elem,1);
} else {
recoge(elem,121);
}
}



function despliega(elem,height) {
if(height<=120){
height+=5;
document.getElementById(elem).style.display='block ';
document.getElementById(elem).style.height=height+ 'px';
setTimeout("despliega('"+elem+"',"+height+")",30);

}
}



function recoge(elem,height) {

if(height>=0){
height-=5;
document.getElementById(elem).style.height=height+ 'px';
setTimeout("recoge('"+elem+"',"+height+")",30);

}
else
{
document.getElementById(elem).style.display='none' ;
}
}


Con respecto al link, puedes usar lo que dice buzu o <a herf="javascript:void(0)" onclick".... >

Suerte
Perfecto, en Firefox funciona a la perfección, despliega la cantidad que uno quiere y no vuelve al top de la pagina. Usando herf="javascript:void(0)" o herf="#nova"

El problema se presenta en internet explorel ya que al modificar el href no despliega el texto...

Internet explorel de mierda....
  #26 (permalink)  
Antiguo 19/06/2009, 13:36
Avatar de Adler
Colaborador
  
Fecha de Ingreso: diciembre-2006
Mensajes: 4.671
Antigüedad: 18 años
Puntos: 126
Respuesta: Ayuda con texto desplegable.
Hola

¿En que IE lo estás probando? Lo he probado en el que tengo en esta maquina ie6 y si es verdad que no corría bien, pero solo al recoger. He cambiado

Cita:
if(height>=0)
por
if(height>1)
y funciona

Suerte
__________________
Los formularios se envían/validan con un botón Submit
<input type="submit" value="Enviar" style="background-color:#0B5795; font:bold 10px verdana; color:#FFF;" />
  #27 (permalink)  
Antiguo 20/06/2009, 07:29
Avatar de Wonza99  
Fecha de Ingreso: marzo-2009
Mensajes: 54
Antigüedad: 15 años, 9 meses
Puntos: 0
Respuesta: Ayuda con texto desplegable.
Sigue sin desplegar en IE, seguramente sea otra parte del codigo la que esta generando el problema, voy a ver si lo encuentro.

Muchas gracias por la pasciencia.
  #28 (permalink)  
Antiguo 20/06/2009, 13:22
Avatar de pato12  
Fecha de Ingreso: septiembre-2007
Ubicación: Salta
Mensajes: 1.620
Antigüedad: 17 años, 3 meses
Puntos: 101
Respuesta: Ayuda con texto desplegable.
Hola,
Prueba con esto:
Código javascript: 
Ver original
  1. function toggle(id,time){
  2.     var el=document.getElementById(id);
  3.     if(el.style.display=='none'){
  4.         setHeight(el,getHeight(el,true),true,time);
  5.     }else{
  6.         setHeight(el,0,true,time);
  7.     }
  8. }
  9. function setHeight(elm,fin,efected,time){
  10.     if(fin>1){
  11.         elm.style.display='block';
  12.     }
  13.     elm.style.overflow="hidden";
  14.     if(efected){
  15.         if(elm.interval)clearInterval(elm.interval);
  16.         var time=!time?50:(time<2?2:time);
  17.         var act=getHeight(elm,false);
  18.         var org=act;
  19.         elm.interval=setInterval(function(){
  20.             if((org<fin?act>=fin:act<=fin)){
  21.                 if(fin==0){
  22.                     elm.style.display='none';
  23.                 }
  24.                 clearInterval(elm.interval);
  25.             }
  26.             act=(act>fin?act-Math.ceil((act-fin)/time):act+Math.ceil((fin-act)/time));
  27.             elm.style.height=act+'px';
  28.         },1);
  29.     }else{
  30.         if(fin==0){
  31.             elm.style.display='none';
  32.         }
  33.         elm.style.height=fin+'px';
  34.     }
  35. }
  36. function getHeight(elm,full){
  37.     if(!full){
  38.         return elm.clientHeight==0?elm.offsetHeight:elm.clientHeight;
  39.     }else{
  40.         origdisp=elm.style.display;
  41.         origheight=elm.style.height;
  42.         origpos=elm.style.position;
  43.         origvis=elm.style.visibility;
  44.         elm.style.visibility="hidden";
  45.         elm.style.height="";
  46.         elm.style.display="block";
  47.         elm.style.position="absolute";
  48.         var total=elm.clientHeight==0?elm.offsetHeight:elm.clientHeight;
  49.         elm.style.display=origdisp;
  50.         elm.style.height=origheight;
  51.         elm.style.position=origpos;
  52.         elm.style.visibility=origvis;
  53.         elm.style.display="block";
  54.         return total;
  55.     }
  56. }
Y lo ejecutas haci:
Código javascript: 
Ver original
  1. toggle('ID DEL ELEMENTO',TIEMPO);
Tambien si nesesitas puedes usar las dos funciones (setHeight,getHeight) mirando como las uso para el efecto.
Suerte
Salu2

PD: Anda en IE 5.5 al 8, Mozilla Firefox, Opera, Google Chorme y Safari (son todos los que conosco )
__________________
Half Music - www.halfmusic.com
Última edición por pato12; 20/06/2009 a las 13:32
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 19:24.