mostrar parte de un texto y luego con un "leer mas" mostrar el resto al instante

pablopgp_lm · #1 (**permalink**) 30/06/2011, 19:26

Hola, tengo una duda enorme que lo estoy buscando por todos lados sin lograr una respuesta. Paso a explicar lo que quiero hacer.

Tengo un texto largo que lo extraigo de una base de datos. Quiero mostrar hasta un cierto numero de caracteres, es decir acortarlo, y colocarle un "LEER MAS" que al hacer clic, muestre EN LA MISMA PAGINA Y DESPLAZANDO TODO HACIA ABAJO, el texto entero, el LEER MAS se trasnforme en un VOLVER o algo asi y que al hacer clic se comprima nuevamente el texto. Aclaro...todo esto se hace en la misma pagina, no pasa a otra pagina se actualiza y se acomoda todo al largo del texto no se si me explico.

Dejo un ejemplo clarisimo de lo que quiero hacer...justamente es exactamente esto quiero hacer! observen en esta pagina la parte donde dice "read more". Es lo mismo que quiero lograr.

http://www.magnumphotos.com/C.aspx?VP3=ViewBox&ALID=2TYRYDBP8258&IT=ThumbImage 01_VForm&CT=Album

Espero una respuesta

maycolalvarez · #2 (**permalink**) 30/06/2011, 19:58

la respuesta es simple: se hace con AJAX

ceSharp · #3 (**permalink**) 01/07/2011, 04:17

hola pablo,

también lo puedes hacer en javascript, eh? mira, un ejemplo sencillito de cómo poder hacerlo:
-------------------------------
(el código JS)
<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>
--------------------------
(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>
-----------------
se puede y se debe mejorar este código, pero es una ejemplo más o menos fácil de hacer el efecto que tu quieres.

prueba si quieres y nos cuentas.

saludos.

pablopgp_lm · #4 (**permalink**) 02/07/2011, 18:14

jeje que grande! ceSharp ...eso justamente queria un ejemplo como para empezar. Recien puedo leer el post pero creo que me va servir ;) . Exelente aporte ya lo voy a probar y les voy a decir como me fue!. Un saludo y gracias!

lea14_9 · #5 (**permalink**) 14/07/2011, 19:54

Hola pablopgp_lm. Hace tiempo que necesitaba hacer algo como lo que planteaste y, antes de ayer, me puse a buscar una solución de una vez por todas y encontré este tema.
Entre tantas páginas que visité y, tomando un poco de cada una, logré hacer lo que necesitaba (con PHP, JavaScript, y consulta a Base de Datos). Te paso algo simplificado de lo que hice (sin consulta a Base de Datos) y espero que te sirva:

Supongamos que tenemos una tabla con un texto muy largo dentro de una de sus celdas y queremos mostrar una parte de él, y al hacer click sobre una imagen expandir y mostrar el texto completo y al final de éste otra imagen para contraer de nuevo al texto mas corto.

En la página incluís este código donde lo necesites.
<table>
<tr>
<td>
<?php
echo "<div id='puntoCortoId'>";
echo truncar($texto, 250)." <a id='puntoEnlaceId' onclick='MostrarOcultar(\"Id\");' style='cursor:pointer'><img src='expandir.png' border='0' /></a>";
echo "</div>";
echo "<div id='Id' style='display:none'>";
echo $texto."<br /><a id='puntoEnlaceId' onclick='MostrarOcultar(\"Id\");' style='cursor:pointer'><img src='contraer.png' border='0' /></a>";
echo "</div>";
?>
</td>
</tr>
</table>

Función PHP que trunca el texto con un mínimo de 250 caracteres y sin cortar ninguna palabra:

function truncar($texto, $limite, $terminacion = '...') {
$subcadena = substr($texto, 0, $limite);
$indiceUltimoEspacio = strrpos($subcadena, " ");
return substr($texto, 0, $indiceUltimoEspacio).$terminacion;
}

Script que se encarga de hacer la expansión y contracción de los divs. Incluilo entre <head> y </head>:

<script language="javascript" type="text/javascript">
function MostrarOcultar(id){
var puntoContraible = document.getElementById(id);
var puntoCorto = document.getElementById("puntoCorto" + id);
if (puntoContraible.style.display == 'none'){
puntoContraible.style.display = 'block';
puntoCorto.style.display = 'none';
}else{
puntoContraible.style.display = 'none';
puntoCorto.style.display = 'block';
}
}
</script>

Consideraciones:
- Si necesitas más de una celda cada Id tiene que ser único e irrepetible.
- $texto = variable que almacena el texto largo (más de 250 caracteres).

Saludos.

refresko · #6 (**permalink**) 30/09/2011, 15:22

Hola Pablopgp_lm, y a todos

anoto esta respuesta por si alguien necesita un codigo similar, de ampliacion de div, pero mucho mas sencillo, con jquey, java y css

esta respuesta la encontre en esta misma comunidad (la posteo Dany_s) y yo la modifique un poco a mi necesidad

Código:

    <html>
    <head>
        <title>Pruebas</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
	<script src="codigojquery.js" > </script>
	
    <script>
    $(function(){
        alturamaxima = $('.descripcion').height() + 'px';
		
		/*! altura cambio */
        alturaMinima = '44px';
        
		$('.descripcion').height(alturaMinima);	
        $('.contenedor .titulo').toggle( function (){
            $(this).prev().animate({height: alturamaxima},1000);
        }, function (){
            $(this).prev().animate({height: alturaMinima},1000);
		
        });
    });
    </script>
    <style>
        body{font-size:12px; font-family:Arial}

		/*! anchura */
        .contenedor{border:1px solid #ccc; background:#E2E2E2; width:150px;}
		
		
        .titulo{background:#CDCDCD; cursor:pointer }
        .contenedor, .titulo, .descripcion{padding:3px}
        .descripcion{background:#F0F0F0; overflow:hidden}
    </style>
    </head>
    <body>
     
        <div class="contenedor">
            
            <div class="descripcion">Esta es una descripcion larga. Esta es una descripcion larga. Esta es  una descripcion larga. Esta es una descripcion larga. Esta es una descripcion larga. TERMINO</div>			
		<div class="titulo">Título  </div>
			
       </div>
	   
	   
     
    </body>
    </html>

como no tengo conocimiento mayor en java, espero que alguien nos colabore para que "titulo" cambie de texto cuando se expanda a algo asi como "cerrar"

ahora imaginese varios div iguales a estos: la idea es que cuando uno "expanda uno" automaticamente se cierre o se "comprima" el ya abierto

espero le sirva a alguien y espero una nueva respuesta