Foros del Web » Programando para Internet » Javascript »

[SOLUCIONADO] capa con mostrar más

 Estas en el tema de capa con mostrar más en el foro de Javascript en Foros del Web. Buenos días Necesito que unas capas se muestren inicialmente con un alto determinado pero con un mostrar más en la parte inferior, que al pulsarlo, ...
  #1 (permalink)  
Antiguo 03/02/2013, 12:57
Avatar de intergus  
Fecha de Ingreso: mayo-2007
Mensajes: 126
Antigüedad: 17 años, 7 meses
Puntos: 3
capa con mostrar más
Buenos días

Necesito que unas capas se muestren inicialmente con un alto determinado pero con un mostrar más en la parte inferior, que al pulsarlo, amplie la capa hasta lo necesario para mostrar todo el contenido.

No quiero ajax para recargar la info. La info debe estar toda al cargar la página por primera vez, aunque no la muestre al completo.

Algo similar se usa en youtube justo debajo del video, en los comentarios que pone el autor del video, los semi oculta y al pulsar en mostrar más, se expande hacia abajo para permitir leer todo el texto.

¿alguna idea?
Gracias
  #2 (permalink)  
Antiguo 03/02/2013, 17:06
Avatar de emprear
Colaborador
  
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 17 años, 6 meses
Puntos: 1567
Respuesta: capa con mostrar más
dale a la capa inicial un alto específico y overflow hidden, y con javascript lo cambias por auto y auto

SAludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #3 (permalink)  
Antiguo 04/02/2013, 13:37
Avatar de intergus  
Fecha de Ingreso: mayo-2007
Mensajes: 126
Antigüedad: 17 años, 7 meses
Puntos: 3
Respuesta: capa con mostrar más
Bueno, te agradecería algo más de ayuda. No se como cambiarle el overflow dentro de la función o restaurar el height al valor inicial.
  #4 (permalink)  
Antiguo 04/02/2013, 14:03
Avatar de intergus  
Fecha de Ingreso: mayo-2007
Mensajes: 126
Antigüedad: 17 años, 7 meses
Puntos: 3
Respuesta: capa con mostrar más
Conste que lo he intentado pero....

1) El primer clic no ejecuta nada, en los restantes va perfecto
2) Debo cerrar todas las capas que se encuentren abiertas, pero solo las de un contenedor determinado (no todas las de la página.
3) Me gustaría simplificarlo si es posible.

Este es el código que he puesto:

<style>
#contenido{
border:solid 1px silver;
overflow: hidden;
height: 50px;
width:200px;
padding:10px;
font:normal 10px/15px verdana;
text-align:justify;

}
</style>
<script>
function actua(esto){
a = document.getElementById(esto);
if(a.style.overflow == 'hidden'){
mostrar(esto);
}else{
ocultar(esto)
}
}

function mostrar(esto){
a = document.getElementById(esto);
a.style.height = "auto";
a.style.overflow = "auto";
}

function ocultar(esto){
a = document.getElementById(esto);
a.style.height = "50px";
a.style.overflow = "hidden";
}
</script>

Lo ejecuto con esto, claro..
<a href="#" onclick="actua('contenido');return false">Más Info</a>
  #5 (permalink)  
Antiguo 04/02/2013, 14:20
Avatar de intergus  
Fecha de Ingreso: mayo-2007
Mensajes: 126
Antigüedad: 17 años, 7 meses
Puntos: 3
Respuesta: capa con mostrar más
Bueno, lo he mejorado aún más, pero sigue fallando el primer clic.

No entiendo porque si la capa inicialmente defino con overflow a hidden, al evaluar la primera vez, el if interpreta que no está en hidden.
algo se me escapa....
  #6 (permalink)  
Antiguo 04/02/2013, 15:39
Avatar de emprear
Colaborador
  
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 17 años, 6 meses
Puntos: 1567
Respuesta: capa con mostrar más
Bien por el intento, pero lo estás complicando un poco. Primero te aclaro que estas técnicas de alternar las propiedades css de un elemento en forma alternada con el click del mouse son muy variadas, y los ajustes pueden cambiar en detalles.

Para tu caso en particular, este ejemplo creo que sirve

Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <title>Ver ocultar detalles</title> 
  6. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  7. <style type="text/css">
  8. /*<![CDATA[*/
  9. body{
  10.  font-family: arial, sans-serif;
  11.  font-size: 11pt;
  12. }
  13.  
  14. .faqs {  
  15.  text-overflow: ellipsis;
  16.  overflow: hidden;
  17.  width: 500px;
  18.  white-space: nowrap;
  19.  padding: 3px;
  20.  background: #DFD2C8;
  21. }
  22.  
  23. .ver{
  24.  cursor: pointer;
  25.  font-size: 11px;
  26.  font-weight: bold;
  27.  margin-bottom: 10px;
  28.  padding: 3px;
  29. }
  30. /*]]>*/
  31. </style>
  32. <script type="text/javascript">
  33. //<![CDATA[
  34. function mostrarOcultar(elDiv,e){
  35. var miCapa=document.getElementById(elDiv).style.overflow;
  36. if(miCapa=="auto"){
  37. document.getElementById(elDiv).style.overflow="hidden";
  38. document.getElementById(elDiv).style.whiteSpace = 'nowrap';
  39. e.innerHTML = 'ver detalles';
  40. }else{ 
  41. document.getElementById(elDiv).style.overflow="auto";
  42. document.getElementById(elDiv).style.whiteSpace = 'normal';
  43. e.innerHTML = 'ocultar detalles';
  44. }
  45. }
  46. //]]>
  47. </script>
  48. </head>
  49. <body>
  50. <div id="comentario_01" class="faqs">
  51. Lorem ipsum dolor sit  amet, consectetur adipiscing elit.  Aenean euismod vestibulum elit  non condimentum. Pellentesque
  52. vitae adipiscing sem. Phasellus velit enim, consequat id pharetra id, adipiscing in turpis 
  53. </div>
  54. <div onclick="mostrarOcultar('comentario_01',this)" class="ver">ver detalles</div>
  55.  
  56.  
  57. <div id="comentario_02" class="faqs">
  58. Vestibulum lacus diam, pellentesque in faucibus eget, dapibus sed sem. Integer id justo id tortor varius tempus. Aliquam
  59. dui tellus, consequat sed molestie in, facilisis eget nisi. 
  60. </div>
  61. <div onclick="mostrarOcultar('comentario_02',this)" class="ver">ver detalles</div>
  62.  
  63. </body>
  64. </html>

Si vas a generar los textos en forma dinámica (desde una bd, por ejemplo) asegurate de crear id distintos para cada una y modificar el primer parámetro en la llamada de la función en el texto "ver detalles" para que coincida con el que corresponda

Demo
http://foros.emprear.com/javascript/...detalles.phtml

SAludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #7 (permalink)  
Antiguo 04/02/2013, 16:44
Avatar de emprear
Colaborador
  
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 17 años, 6 meses
Puntos: 1567
Respuesta: capa con mostrar más
Agrego una variante que no requiere id en las capas que contienen el texto

Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <title>Ver ocultar detalles usando previousSibling</title> 
  6. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  7. <style type="text/css">
  8. /*<![CDATA[*/
  9. body{
  10.  font-family: arial, sans-serif;
  11.  font-size: 11pt;
  12. }
  13. /* propiedades por defecto para las capas que contienen el texto */
  14. .faqs {  
  15.  text-overflow: ellipsis;
  16.  overflow: hidden;
  17.  width: 500px;
  18.  white-space: nowrap;
  19.  padding: 3px;
  20.  background: #DFD2C8;
  21. }
  22.  
  23. .ver{
  24.  cursor: pointer;
  25.  font-size: 11px;
  26.  font-weight: bold;
  27.  margin-bottom: 10px;
  28.  padding: 3px;
  29. }
  30. /*]]>*/
  31. </style>
  32. <script type="text/javascript">
  33. //<![CDATA[
  34. function mostrarOcultar(e){
  35.  
  36. // identificamos el elemento previo al "mostrar detalles" que se clickea, que por supuesto será un div
  37. if(document.all && document.querySelector && !document.addEventListener){
  38. var p = e.previousSibling; // ie8
  39. }else{
  40. var p = e.previousSibling.previousSibling; // ie9, otros
  41. }
  42.  
  43. // tomamos una propiedad css del elemento obtenido previamente para evaluarla
  44. // en este caso el 'overflow', que por defecto nuestra class 'faqs' establece como hidden
  45. var miCapa=p.style.overflow;
  46.  
  47. // ahora, según sea el valor de overflow, invertimos el resto de las propiedades css y el texto a mostrar en el elemento (e) al que se hizo click
  48. if(miCapa=="auto"){
  49. p.style.overflow="hidden";
  50. p.style.whiteSpace = 'nowrap';
  51. e.innerHTML = 'ver detalles';
  52. }else{ 
  53. p.style.overflow="auto";
  54. p.style.whiteSpace = 'normal';
  55. e.innerHTML = 'ocultar detalles';
  56. }
  57. }
  58. //]]>
  59. </script>
  60. </head>
  61. <body>
  62. <div class="faqs">
  63. Lorem ipsum dolor sit  amet, consectetur adipiscing elit.  Aenean euismod vestibulum elit  non condimentum. Pellentesque
  64. vitae adipiscing sem. Phasellus velit enim, consequat id pharetra id, adipiscing in turpis 
  65. </div>
  66. <div onclick="mostrarOcultar(this)" class="ver">ver detalles</div>
  67. <div class="faqs">
  68. Vestibulum lacus diam, pellentesque in faucibus eget, dapibus sed sem. Integer id justo id tortor varius tempus. Aliquam
  69. dui tellus, consequat sed molestie in, facilisis eget nisi. 
  70. </div>
  71. <div onclick="mostrarOcultar(this)" class="ver">ver detalles</div>
  72. </body>
  73. </html>

Demo
http://foros.emprear.com/javascript/...ssibling.phtml

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #8 (permalink)  
Antiguo 05/02/2013, 11:21
Avatar de intergus  
Fecha de Ingreso: mayo-2007
Mensajes: 126
Antigüedad: 17 años, 7 meses
Puntos: 3
Respuesta: capa con mostrar más
Me gusta la opción del DOM, nunca había usado esa propiedad de previousSibling ni nextSibling.

Aunque no cumple uno de los requisitos, que era el de cerrar todos las otras capas abiertas, es decir que solo una estuviese desplegada en cada momento, pero en realidad tampoco es algo que sea imperioso, quiza quedaría más limpio el resultado.

La verdad es que esta solución del previousSibling, me gusta más, pero puestos a que puedas usar las 2. ¿Cual puede ser más estable con los distintos navegadores?¿tu recomendación?

Por cierto, esto es lo que se llama una respuesta currada.... Applausse...
  #9 (permalink)  
Antiguo 06/02/2013, 10:42
Avatar de emprear
Colaborador
  
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 17 años, 6 meses
Puntos: 1567
Respuesta: capa con mostrar más
Como te dije hay nuchas variantes, me olvidé del detalle de ocultar las restantes, se puede hacer asi (uso otra técnica comparando los indices de los elementos)

Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <title>mostrar oculta capas</title> 
  6. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  7. <style type="text/css">
  8. /*<![CDATA[*/
  9. p{
  10. font-weight: bold;
  11. cursor: pointer;
  12. }
  13. #contenedor{
  14. width: 300px;
  15. }
  16. .faqs{
  17. /* display: none; */
  18.  text-overflow: ellipsis; 
  19.  overflow: hidden;
  20.  white-space: nowrap;
  21.  padding: 3px;
  22.  background: #DFD2C8;
  23.  margin:5px 1px 5px 1px;
  24.  border-top: dotted 1px darkred;
  25.  cursor: pointer;
  26. }
  27. .faqs span{
  28. display: block;
  29. cursor: pointer;
  30. font-size: 11px;
  31. margin-top: 10px;
  32. }
  33. #contenedor p{
  34. margin-bottom: 0;
  35. background: #DFD2C8;
  36. }
  37. /*]]>*/
  38. </style>
  39. <script type="text/javascript">
  40. //<![CDATA[
  41. function contenido(cual){
  42. var i;
  43. var principal = document.getElementById ("contenedor");
  44. var capas = [];
  45. var divTags = principal.getElementsByTagName ("div");
  46. for (var i = 0; i < divTags.length; i++) {
  47. capas.push(i);
  48. }
  49.     for(i in capas){
  50.         if(capas[i] == cual){
  51.         divTags[i].style.overflow = 'auto';
  52.         divTags[i].style.whiteSpace = 'normal';
  53.           divTags[i].title = '';   
  54.         }else{
  55.        divTags[i].style.overflow = 'hidden';
  56.         divTags[i].style.whiteSpace = 'nowrap';
  57.         divTags[i].title = 'Ver más detalles';        
  58.         }
  59.     }
  60. }
  61. //]]>
  62. </script>
  63. </head>
  64. <body>
  65. <div id="contenedor">
  66.  
  67. <div class="faqs" onclick="contenido(0)" title="Ver más detalles">Texto uno Lorem ipsum dolor sit  amet, consectetur adipiscing elit.  Aenean euismod vestibulum elit  non condimentum. Pellentesque vitae adipiscing sem</div>
  68.  
  69. <div class="faqs" onclick="contenido(1)" title="Ver más detalles">Texto dos Lorem ipsum dolor sit  amet, consectetur adipiscing elit.  Aenean euismod vestibulum elit  non condimentum. Pellentesque vitae adipiscing sem</div>
  70.  
  71. <div class="faqs" onclick="contenido(2)" title="Ver más detalles">Texto tres Lorem ipsum dolor sit  amet, consectetur adipiscing elit.  Aenean euismod vestibulum elit  non condimentum. Pellentesque vitae adipiscing sem</div>
  72. </div>
  73. </body>
  74. </html>
A esta le podría faltar, si se quiere, alguna forma de ocultar la que queda abierta, pero a eso no le dediqué tiempo todavía

Aqui hay 2 más por si estás aburrido
http://foros.emprear.com/javascript/...ctexto_nt.html
http://foros.emprear.com/javascript/...as-ctexto.html

Por compatibilidad no hay problema, las que te dejé antes, corren en todos los navegadores (ie a partir del 8), incluso en OperaMini y el Nokia Browser tembién (ajustes de los tamaños mediante)

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #10 (permalink)  
Antiguo 07/02/2013, 12:09
Avatar de intergus  
Fecha de Ingreso: mayo-2007
Mensajes: 126
Antigüedad: 17 años, 7 meses
Puntos: 3
Respuesta: capa con mostrar más
Bueno, si señor. Sobrádamente aclarado y util. Una pena que se hunda este tema en los fondos de los foros del web.

Muchas gracias, sobre todo por la dedicación.

Etiquetas: ajax
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 01:32.