ver mas estilo facebook para contenido dinamico

jer86 · #1 (**permalink**) 05/05/2012, 23:02

Hola. tengo una capa que tiene el contenido de una noticia, tiene titulo, resumen y cuerpo. entonces quiero que al darle clic a un enlace que diga "ver mas" me oculte el el resumen y me muestre el cuerpo de la noticia. lo he intentado hacer con jquery pero como las capas se repiten según el numero de noticias al darle clic en una me oculta todas. es algo así:

Código PHP:

Ver original<script type="text/javascript">
$(function(){
              $(".ver").click( function(){
                  $(".resumen").next().hide('slow');
                  $(".cuerpo").next().show('slow');
              });
            });
</script>
for($i=0;$i<count($num_noticias);$i++){
 <div class="titulo_proy"><?php echo titulo_noticia ?></div>
     <div class="caja_conten" >
<div class="texto_izquierda"> 
<div class="resumen"><?php echo resumen_noticia?></div>
<div class="ver">ver mas..</div>
<div class="cuerpo">echo texto_noticia ?></div>
 </div>
}

me podrian sugerir algo o lo podria hacer de otra forma gracias

Naahuel · #2 (**permalink**) 06/05/2012, 03:31

Mmm. Hay un par de cosas raras ahí. No sólo en el script, sino en tu HTML también. No es semántico y tenés contenido duplicado. Yo haría algo así:

HTML:

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="estilos.css" />
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="ver-mas.js"></script>
 
<title>Test</title>
</head>
<body>
    <div class="noticia-contenedor">
        <h2 class="noticia-titulo">Noticia X</h2>
        <div class="noticia-cuerpo">
            <p>Lorem ipsum dolor sit amet, ephesiorum quod non dum veniens indica enim materiam ad quia. Testare in modo invenit iuvenem patre nihil labore in lucem concitaverunt in. Famulus prope sola habiturus in modo invenit. Neminem habere matrem vel regio hinc Agimus nolo accipies, nescimus de me missam canticis in rei finibus veteres hoc. Africus hortamento laetus moritur ad nomine Stranguillio in, x domum sum ad te sed quod eam est cum!</p>
            <p>Lorem ipsum dolor sit amet, ephesiorum quod non dum veniens indica enim materiam ad quia. Testare in modo invenit iuvenem patre nihil labore in lucem concitaverunt in. Famulus prope sola habiturus in modo invenit. Neminem habere matrem vel regio hinc Agimus nolo accipies, nescimus de me missam canticis in rei finibus veteres hoc. Africus hortamento laetus moritur ad nomine Stranguillio in, x domum sum ad te sed quod eam est cum!</p>
        </div>
    </div>
    
    
    <div class="noticia-contenedor">
        <h2 class="noticia-titulo">Noticia Y</h2>
        <div class="noticia-cuerpo">
            <p>Lorem ipsum dolor sit amet, ephesiorum quod non dum veniens indica enim materiam ad quia. Testare in modo invenit iuvenem patre nihil labore in lucem concitaverunt in. Famulus prope sola habiturus in modo invenit. Neminem habere matrem vel regio hinc Agimus nolo accipies, nescimus de me missam canticis in rei finibus veteres hoc. Africus hortamento laetus moritur ad nomine Stranguillio in, x domum sum ad te sed quod eam est cum!</p>
            <p>Lorem ipsum dolor sit amet, ephesiorum quod non dum veniens indica enim materiam ad quia. Testare in modo invenit iuvenem patre nihil labore in lucem concitaverunt in. Famulus prope sola habiturus in modo invenit. Neminem habere matrem vel regio hinc Agimus nolo accipies, nescimus de me missam canticis in rei finibus veteres hoc. Africus hortamento laetus moritur ad nomine Stranguillio in, x domum sum ad te sed quod eam est cum!</p>
        </div>
    </div>
 
    
    <div class="noticia-contenedor">
        <h2 class="noticia-titulo">Noticia Z</h2>
        <div class="noticia-cuerpo">
            <p>Lorem ipsum dolor sit amet, ephesiorum quod non dum veniens indica enim materiam ad quia. Testare in modo invenit iuvenem patre nihil labore in lucem concitaverunt in. Famulus prope sola habiturus in modo invenit. Neminem habere matrem vel regio hinc Agimus nolo accipies, nescimus de me missam canticis in rei finibus veteres hoc. Africus hortamento laetus moritur ad nomine Stranguillio in, x domum sum ad te sed quod eam est cum!</p>
            <p>Lorem ipsum dolor sit amet, ephesiorum quod non dum veniens indica enim materiam ad quia. Testare in modo invenit iuvenem patre nihil labore in lucem concitaverunt in. Famulus prope sola habiturus in modo invenit. Neminem habere matrem vel regio hinc Agimus nolo accipies, nescimus de me missam canticis in rei finibus veteres hoc. Africus hortamento laetus moritur ad nomine Stranguillio in, x domum sum ad te sed quod eam est cum!</p>
        </div>
    </div>
</body>
</html>

Observá el nuevo enmarcado, nada de contenido duplicado (Excepto los párrafos de ejemplo, obvio, que se supone son diferentes) y mucho más semántico. Además, no tenemos el "ver más". Eso lo agregamos con JS para que haya buena degradación.

El JS:

Código Javascript:

Ver original$(function(){
    // Agregamos la clase js al body para indicar JS activo
    $('body').addClass('js');
    
    // Agregamos el link de ver mas
    $('.noticia-cuerpo').after('<p><a href="#" class="noticia-ver-mas">Ver m&aacute;s...</a></p>');
    
    // Agregamos la funcion al evento click al ver mas
    $('.noticia-ver-mas').click(function(e){
        e.preventDefault();
        var $elem = $(this);
        var $cuerpo_noticia = $elem.parent().siblings('.noticia-cuerpo');
        //obtener los elementos interiores para saber su altura. En este caso los <p>
        var $cuerpo_noticia_elementos = $cuerpo_noticia.find('p');
        var alto_actual = $cuerpo_noticia.outerHeight();
        var alto_nuevo = 0;
        
        $cuerpo_noticia_elementos.each(function(){
            //Sumar las alturas de los elementos interiores para calcular nueva altura
            alto_nuevo += $(this).outerHeight() //Alto del elemento
                        + parseInt($(this).css('margin-top'),10) //Margen superior
                        + parseInt($(this).css('margin-bottom'),10); //Margen inferior
        });
        
        $cuerpo_noticia
            .css({
                maxHeight : 9999,
                height: alto_actual
            })
            .animate({
                height: alto_nuevo
            });
        
        $elem.fadeOut();
    });
});

Primero agregamos la clase js al body, así sabemos cuando JS está activo y por CSS estilizamos los elementos sólo bajo esta condición.

La forma de animar la altura es medio rebuscada. Se podría evitar los cálculos de alturas de los elementos interiores si animáramos el max-height. Pero entonces tendríamos que dar un valor grande, que no conocemos, que podría fallar y que además alteraría la velocidad de nuestra animación.

El CSS:

Código CSS:

Ver original.js .noticia-cuerpo{
    /* Limitamos el alto del cuerpo de la noticia
    cuando JS está activo solamente */
    max-height: 50px;
    overflow: hidden;
}

Básicamente limitamos la altura del elemento (sólo si JS está activo).
Esta parte se puede hacer más bonita, podés usar degradados o algo así (ejemplo: http://css-tricks.com/text-fade-read-more/ )

Demos:

Con JS: http://jsbin.com/uletis
Con JS desactivado: http://jsbin.com/uletis/2

Fijate que sin JS podemos ver la noticia completa, lo cual es óptimo.