Problema con Show/Hide

CHILENOCES · #1 (**permalink**) 18/07/2008, 01:09

Hola amigos,
Bueno tengo un problema que creo que es sencillo pero ya de tanto darme vueltas no le estoy encontrando la solución. Aqui va...

Tengo el siguiente código (prueba.html):

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Prueba</title>
<style type="text/css">
<!--
.more {
display: none;
}
body,td,th {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
}
-->
</style>
<script type="text/javascript">
function showHide(shID) {
	if (document.getElementById(shID)) {
		if (document.getElementById(shID+'-show').style.display != 'none') {
			document.getElementById(shID+'-show').style.display = 'none';
			document.getElementById(shID).style.display = 'block';
		}
		else {
			document.getElementById(shID+'-show').style.display = 'inline';
			document.getElementById(shID).style.display = 'none';
		}
	}
}
</script>
</head>

<body>
<table width="300" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><h1>Wordpress 2.6</h1>
    Cumpliendo con el (ya un poco tedioso) ciclo de desarrollo de 4 meses, hoy    <a href="#" id="more-description-show" onclick="showHide('more-description');return false;">(más...)</a>
 <span id="more-description" class="more">vemos la versión final de Wordpress 2.6, llamada Tyner, que incluye numerosas mejoras a Wordpress como CMS. <a href="#" id="more-description-hide" class="link12pxblue" onclick="showHide('more-description');return false;">(ocultar...)</a></span>   
 </td>
  </tr>
</table>
</body>
</html>

Si lo copian, lo guardan y lo ejecutan, no veran nada anormal, ya que la funcion Mostrar y Ocultar funciona de maravilla.

Mi problema, es que si se fijan el link de "mas..." termina en la palabra del parrafo "hoy" y al hacer click en "mas..." se agrega un salto de linea que hace que la palabra que continuaria con el parrafo "vemos..." quede en la linea de abajo y por lo tanto no se lee digamos esteticamente bien.

Al hacer click en "mas..." queda:

Cumpliendo con el (ya un poco tedioso) ciclo de desarrollo de 4 meses, hoy
vemos la versión final de Wordpress 2.6, llamada Tyner, que incluye numerosas mejoras a Wordpress como CMS.

Y deberia quedar:

Cumpliendo con el (ya un poco tedioso) ciclo de desarrollo de 4 meses, hoy vemos la versión final de Wordpress 2.6, llamada Tyner, que incluye numerosas mejoras a Wordpress como CMS.

Es decir, todo de corrido no con ese salto de linea despues de "hoy".

Espero que se entienda y ojala puedan ayudarme.

Desde ya, muchisimas gracias!

Un_Tico · #2 (**permalink**) 18/07/2008, 10:37

Quítale el width de la tabla, con esto la tabla tomará el ancho del texto más largo que contenga en los <td></td>

Código HTML:

<table [B]width="300"[/B] border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><h1>Wordpress 2.6</h1>
    Cumpliendo con el (ya un poco tedioso)

Saludos...

CHILENOCES · #3 (**permalink**) 18/07/2008, 10:40

Hola,
agradezco la respuesta, pero no es lo que esperaba ya que donde necesito mostrar el texto es realmente una tabla con un width establecido, y de todos modos aunque la tabla fuera mas ancha, la palabra no sube.

Espero otras respuestas.

Muchas gracias.

#4 (**permalink**) 18/07/2008, 13:40

El problema es que le estás poniendo al span el display como "block". En lugar de eso, déjalo en blanco.

Código:

function showHide(shID) {
	if (document.getElementById(shID)) {
		if (document.getElementById(shID+'-show').style.display != 'none') {
			document.getElementById(shID+'-show').style.display = 'none';
			document.getElementById(shID).style.display = ''; // o si prefieres prueba poniendo inline
		}
		else {
			document.getElementById(shID+'-show').style.display = 'inline';
			document.getElementById(shID).style.display = 'none';
		}
	}
}

CHILENOCES · #5 (**permalink**) 18/07/2008, 13:56

Hola venkman,
Bueno efectivamente funciono, pero no de inmediato, quite un <br /> que habia luego del link "mas..." y ahi funciono correctamente, sin embargo sin el "br" y con el inline en el script no funcionaba asi que bueno lo importante es que funciono

Ahora se me presenta un nuevo problema

el script funciona bien en IE5.5, 6 y 7, tambien en safari y firefox 3 pero por alguna razon en firefox inferior no funciona bien, osea si muestra el layer oculto pero el de "mas..." no se esconde al clickearlo, y sigue visible junto al de "ocultar"

Alguna idea de como solucionar eso?

Muchas gracias!

Un_Tico · #6 (**permalink**) 18/07/2008, 16:00

Buena sulución la de venkman,no habia captado bien lo que querías con el script, poniendo inline en el display funciona perfecto en FF 3, tambien lo probé en FF2.0.0.16 y IE...

#7 (**permalink**) 21/07/2008, 05:34

A mi me funciona con el inline en Fx2. Pero bueno pon el código tal como lo tienes y si puedes, una imagen de cómo lo ves. Si está "junto al de ocultar" quizá es que tienes algún tag mal cerrado o algo.