"ver mas" o manejar overflow de texto con jquery.

mayid · #1 (**permalink**) 09/10/2010, 14:50

Como se hace un contenedor de texto con un "ver mas" al estilo youtube? Siempre los hice con PHP, y en este caso quiero hacerlo con jquery.

Supongo que sería algo así:
- definir un tamaño fijo para un div
- hacer un contador de caracteres con javascript
- imprimir "ver mas" si el texto es muy largo
- utilizar .animate() para expandir el contenedor de texto.

Ustedes lo harían así?

mayid · #2 (**permalink**) 09/10/2010, 15:20

Por ahora lo resuelvo así. Pero el efecto es un tanto "tosco":

Código Javascript:

Ver original$("div#word_description").hover(
        function(){     
            $(this).css({"height":"auto", "border-bottom": "3px solid #BFFFFF"});       
        }, 
        function () {
            $(this).css({"height":"1em", "border": "0"});
        });

chicohot20 · #3 (**permalink**) 11/10/2010, 15:29

a mi parecer el metodo slideToggle() de Jquery te funcionaria bien, no necesitas definir una altura

mayid · #4 (**permalink**) 12/10/2010, 08:14

Gracias por ponerme en la pista. Si, eso parece ser lo que necesito. Sin embargo, se ocupa de mostrar lo que está oculto, y mi div está en cierta medida visible, por lo cual en vez de mostrar más, oculta.

Quizas deba usar .animate() o profundizar un poco más.

Como sea, aquí dejo un tutorial de como usar este efecto para un slide Up (cosa que muchos piden).

http://www.learningjquery.com/2009/0...ent-directions

Dany_s · #5 (**permalink**) 13/10/2010, 05:24

solucionaste?

cual es el mostrar más de youtube que quieres?

mayid · #6 (**permalink**) 13/10/2010, 07:29

Aün no solucioné. Por alguna razón no me funciona el animate.

Código Javascript:

Ver original$("div#word_description").hover(
        function(){     
            $(this).addClass("overflow").animate({"height": "auto"},1000);      
        }, 
        function () {
            $(this).removeClass("overflow").animate({"height": "1em"},1000);
        });

Originalmente decía poner un boton como en las descripciones de video de youtube. Pero creo que con mouseover va a ir mejor...

Dany_s · #7 (**permalink**) 13/10/2010, 13:57

No sé si te sirve este, expande con clic en el título

Primero capturo el tamaño del div que contiene la descripción para saber hasta donde ampliar y para comenzar le doy una altura minima para cuando esté contraido

Código HTML:

Ver original<html>
<head>
    <title>Pruebas</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(function(){
    alturamaxima = $('.descripcion').height() + 'px';
    alturaMinima = '14px';
    $('.descripcion').height(alturaMinima);
    $('.contenedor .titulo').toggle( function (){
        $(this).next().animate({height: alturamaxima},1000);
    }, function (){
        $(this).next().animate({height: alturaMinima},1000);
    });
});
</script>
<style>
    body{font-size:12px; font-family:Arial}
    .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="titulo">Título</div>
        <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>
 
</body>
</html>

mayid · #8 (**permalink**) 13/10/2010, 14:13

Si, Dany! Ese es el efecto que necesitaba. En un rato lo estudio y lo aplico. Gracias!

Dany_s · #9 (**permalink**) 13/10/2010, 15:21

Si tenes varios bloques, como una lista de noticias, deberias hacer un bucle para guardar las alturas iniciales de cada bloque.

El tema con el animate es que no sé como decirle que agrande hasta donde termina el contenido, como un tamaño 'auto', por eso primero rescato la altura

mayid · #10 (**permalink**) 13/10/2010, 16:51

El animate() de jquery UI tiene opciones de tomar classes y otras cosas. Pero no quiero UI. Me quedo con el basico, que al parecer no toma "auto" como valor.

Si, tengo varios bloques. Así que mañana o luego vere de tomarles la altura al cargar la pagina. Ahora estoy muy quemado porque ando estudiando CAKEphp.

Gracias Dany!

Dany_s · #11 (**permalink**) 13/10/2010, 17:27

jeje entra en illasaron.com hay un videotutorial de cakephp muy bueno

mayid · #12 (**permalink**) 13/10/2010, 17:29

Ah! Si. Miré varios de esos videos. Son leeentos pero me sirvieron tanto como los textos. Pero bueno, de la teoría a la práctica... llevo 4 días en órbita.

refresko · #13 (**permalink**) 30/09/2011, 14:44

Hola a todos

les cuento que ando muy satisfecho, pues tengo la necesidad de colocar informacion en un DIV y que parte de la misma quede oculta, y que con un boton o texto "leer mas" se expanda dicho div y se muestre el otro

entre mil busquedas llegue a esta respuesta y copie el codigo de Dany_s, luego lo modifique (una pequeñez a la que llegue a la zar) y ya mi codigo esta como lo necesito

Dany_s Gracias

Código:

    <html>
    <head>
        <title>Pruebas</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.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>

Nuevamente Gracias Dany_s