ver mas y ver menos

polarubi · #1 (**permalink**) 27/07/2011, 23:23

hola que tal me ayudarian con esto?

lo que quiero ahcer es lo siguiente

yo pongo un texto largo, pero no quiero que aparesca todo por eso quiciera poner el famosito "VER MAS" y que debajo me ponga el texto que le sigue y luego poder ocultarlo con "VER MENOS"

seria posible eso?

muchas gracias y espero sus ayudas =)

IsaBelM · #2 (**permalink**) 28/07/2011, 04:04

sólo se trata de mostrar y ocultar un div. usa la propiedad display con los valores block y none

ceSharp · #3 (**permalink**) 28/07/2011, 05:16

no hace mucho respondí a un tema similar:

http://www.forosdelweb.com/f13/mostr...stante-925757/

saludos.

polarubi · #4 (**permalink**) 28/07/2011, 11:37

gracias, pero ese codigo tiene para ocultarlo tmb?

ceSharp · #5 (**permalink**) 29/07/2011, 00:59

si te refieres con ocultar a volver a comprimir si, claro. si mal no recuerdo, pone 'ver mas' y cuando le das, el texto se despliega y el 'ver más' se convierte en 'volver', y cuando le das vuelve a comprimir el texto.
si lo que quieres es ocultar del todo el texto, pues con un sencillo .style.display.none, no?

saludos.

IsaBelM · #6 (**permalink**) 29/07/2011, 05:52

Cita:

Iniciado por ceSharp

si lo que quieres es ocultar del todo el texto, pues con un sencillo .style.display.none, no?

saludos.

de eso se trata, de ocultar o mostrar los bloques. esto lo digo para corregir

Cita:

.style.display.none

ha de ser

Cita:

.style.display = 'none';

ceSharp · #7 (**permalink**) 29/07/2011, 07:01

uy! que descuido... pues sí, toda la razón IsabelM

style.display = 'none'

me lo grabo 'a fuego' en el brazo, para no volver meter la pata, jejejeje.

saludos.

polarubi · #8 (**permalink**) 31/07/2011, 17:11

no logre hacerlo funcionar, el texto LEER MAS aparece pero como texto solamente, si quiero clickearlo no hace nada :/

ceSharp · #9 (**permalink**) 01/08/2011, 00:49

polarubi,
si quieres muestra tú código, y vemos a ver en qué está fallando.

saludos.

polarubi · #10 (**permalink**) 01/08/2011, 19:20

ok, ahora cuando llego a mi casa se los muestro, muchas gracias por sus ayudas :D

polarubi · #11 (**permalink**) 01/08/2011, 21:50

Cita:

Iniciado por ceSharp

polarubi,
si quieres muestra tú código, y vemos a ver en qué está fallando.

saludos.

asi se me ve el codigooo

ceSharp · #12 (**permalink**) 02/08/2011, 00:01

mmmmm, quería decir las funciones javascript que hacen que funcione lo que has puesto, y el HTML. con lo que me has puesto no puedo hacer nada... :)

polarubi · #13 (**permalink**) 02/08/2011, 01:10

Cita:

Iniciado por ceSharp

mmmmm, quería decir las funciones javascript que hacen que funcione lo que has puesto, y el HTML. con lo que me has puesto no puedo hacer nada... :)

claro tenes razon ajaj

y mira en mi index.php puse esto

Código HTML:

<script type="text/javascript">
var texto_original = '';
function gestionarTexto(div)
{
//aquí valoramos si hay que expandir o contraer el texto, en función de lo que ponga en el <DIV>
if(div.innerHTML == 'Volver')
{contraer();div.innerHTML='Leer más';}
else
{expandir();div.innerHTML='Volver'}
}
function contraer()
{
//vamos a limitar el texto a 50 caracteres y guardamos el texto original
texto_original = document.getElementById('el_div').innerHTML;
document.getElementById('el_div').innerHTML = texto_original.substring(0,50) + '...';
}
function expandir()
{
document.getElementById('el_div').innerHTML=texto_ original;
}
</script>

y donde quiero que aparesca lo que quiero

lo puse en cualquier lado (dentro de <html>) esto

Código HTML:

<body onload="contraer();">

<table width="200px">
<tr>
<td>
<div id="el_div">
uno dos tres cuatro cinco seis siete ocho nueve diez once doce trece catorce quince
dieciseis diecisiete dieciocho diecinueve veinte</div>
<br />
<div style="font-family:Courier New;font-size:8pt;color:Blue;cursor:hand" onclick="gestionarTexto(this);" id="mas">Leer más</div>
</td>
</tr>
</table>

</body>

saludos

ceSharp · #14 (**permalink**) 02/08/2011, 01:36

vale, ya he visto qué pasaba...

dentro de la funcion expandir() la variable texto_original tenía un espacio que separaba la variable, y se estaba volviendo loco, jejejeje

Código HTML:

Ver originalfunction expandir()
{
document.getElementById('el_div').innerHTML=texto_original; //comprueba que esta variable no tiene ningún espacio
}

es posible que cuando copiaste el codigo del enlace que te puse se copien espacios sin querer. Pero vamos, que borrando dicho espacio se soluciona.

saludos.

polarubi · #15 (**permalink**) 02/08/2011, 03:49

Cita:

Iniciado por ceSharp

vale, ya he visto qué pasaba...

dentro de la funcion expandir() la variable texto_original tenía un espacio que separaba la variable, y se estaba volviendo loco, jejejeje

Código HTML:

Ver originalfunction expandir()
{
document.getElementById('el_div').innerHTML=texto_original; //comprueba que esta variable no tiene ningún espacio
}

es posible que cuando copiaste el codigo del enlace que te puse se copien espacios sin querer. Pero vamos, que borrando dicho espacio se soluciona.

saludos.

muchas gracias por tu respuesta pero sigue igual, mira te dejo el codigo de como esta ahora

Código HTML:

function expandir()
{
document.getElementById('el_div').innerHTML=texto_original;}

ceSharp · #16 (**permalink**) 02/08/2011, 04:29

me dejas loco, jejejeje.

mira prueba esto tal cual te lo pongo en un archivo independiente HTML

Código HTML:

Ver original<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
<script type="text/javascript">
var texto_original = '';
function gestionarTexto(div)
{
//aquí valoramos si hay que expandir o contraer el texto, en función de lo que ponga en el <DIV>
if(div.innerHTML == 'Volver')
{contraer();div.innerHTML='Leer más';}
else
{expandir();div.innerHTML='Volver'}
}
function contraer()
{
//vamos a limitar el texto a 50 caracteres y guardamos el texto original
texto_original = document.getElementById('el_div').innerHTML;
document.getElementById('el_div').innerHTML = texto_original.substring(0,50) + '...';
}
function expandir()
{
document.getElementById('el_div').innerHTML=texto_original;
}
</script>
</head>
<body onload="contraer();">
        <div>
           <table width="200px">
<tr>
<td>
<div id="el_div">
uno dos tres cuatro cinco seis siete ocho nueve diez once doce trece catorce quince
dieciseis diecisiete dieciocho diecinueve veinte</div>
<br />
<div style="font-family:Courier New;font-size:8pt;color:Blue;cursor:hand" onclick="gestionarTexto(this);" id="mas">Leer más</div>
</td>
</tr>
</table>
        </div>
</body>
</html>

así tal cual te lo he puesto y guardado en un archivo html me funciona bien en IE, FF y Chrome. La verdad no sé qué puede estar dándote error...

bueno, pruébalo eso si quieres y nos cuentas.

saludos

polarubi · #17 (**permalink**) 02/08/2011, 14:21

Cita:

Iniciado por ceSharp

me dejas loco, jejejeje.

mira prueba esto tal cual te lo pongo en un archivo independiente HTML

Código HTML:

Ver original<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
<script type="text/javascript">
var texto_original = '';
function gestionarTexto(div)
{
//aquí valoramos si hay que expandir o contraer el texto, en función de lo que ponga en el <DIV>
if(div.innerHTML == 'Volver')
{contraer();div.innerHTML='Leer más';}
else
{expandir();div.innerHTML='Volver'}
}
function contraer()
{
//vamos a limitar el texto a 50 caracteres y guardamos el texto original
texto_original = document.getElementById('el_div').innerHTML;
document.getElementById('el_div').innerHTML = texto_original.substring(0,50) + '...';
}
function expandir()
{
document.getElementById('el_div').innerHTML=texto_original;
}
</script>
</head>
<body onload="contraer();">
        <div>
           <table width="200px">
<tr>
<td>
<div id="el_div">
uno dos tres cuatro cinco seis siete ocho nueve diez once doce trece catorce quince
dieciseis diecisiete dieciocho diecinueve veinte</div>
<br />
<div style="font-family:Courier New;font-size:8pt;color:Blue;cursor:hand" onclick="gestionarTexto(this);" id="mas">Leer más</div>
</td>
</tr>
</table>
        </div>
</body>
</html>

así tal cual te lo he puesto y guardado en un archivo html me funciona bien en IE, FF y Chrome. La verdad no sé qué puede estar dándote error...

bueno, pruébalo eso si quieres y nos cuentas.

saludos

ahora si funciona perfecto, podria ser que cuando situo el mouse en LEER MAS se ponga la manito como si fuera un link

te agradesco =)

ceSharp · #18 (**permalink**) 02/08/2011, 23:54

ok me alegro de que te funcione! :)

para que el cursor sea una manita, en firefox se usa cursor:pointer. Yo es que como practicamente solo IE me olvido del resto de navegadores (en mi trabajo solo usamos IE). deberías de modificar el <div> del 'leer mas' de esta manera:

Código HTML:

Ver original<div style="font-family:Courier New;font-size:8pt;color:Blue;cursor:pointer" onclick="gestionarTexto(this);" id="mas">Leer más</div>

saludos

polarubi · #19 (**permalink**) 03/08/2011, 14:20

Cita:

Iniciado por ceSharp

ok me alegro de que te funcione! :)

para que el cursor sea una manita, en firefox se usa cursor:pointer. Yo es que como practicamente solo IE me olvido del resto de navegadores (en mi trabajo solo usamos IE). deberías de modificar el <div> del 'leer mas' de esta manera:

Código HTML:

Ver original<div style="font-family:Courier New;font-size:8pt;color:Blue;cursor:pointer" onclick="gestionarTexto(this);" id="mas">Leer más</div>

saludos

OHH muchas gracias amigooooooooooooo, me sirviooooooooooo te agradesco muchooo =)