Tema: ver mas estilo facebook para contenido dinamico
Ver Mensaje Individual
  #2 (permalink)  
Antiguo 06/05/2012, 03:31
Avatar de Naahuel
Naahuel
 
Fecha de Ingreso: marzo-2011
Ubicación: localhost
Mensajes: 796
Antigüedad: 13 años, 9 meses
Puntos: 192
Respuesta: ver mas estilo facebook para contenido dinamico
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
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <link rel="stylesheet" href="estilos.css" />
  6.  
  7. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  8. <script type="text/javascript" src="ver-mas.js"></script>
  9.  
  10. <title>Test</title>
  11. </head>
  12. <body>
  13.     <div class="noticia-contenedor">
  14.         <h2 class="noticia-titulo">Noticia X</h2>
  15.         <div class="noticia-cuerpo">
  16.             <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>
  17.             <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>
  18.         </div>
  19.     </div>
  20.     
  21.     
  22.     <div class="noticia-contenedor">
  23.         <h2 class="noticia-titulo">Noticia Y</h2>
  24.         <div class="noticia-cuerpo">
  25.             <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>
  26.             <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>
  27.         </div>
  28.     </div>
  29.  
  30.     
  31.     <div class="noticia-contenedor">
  32.         <h2 class="noticia-titulo">Noticia Z</h2>
  33.         <div class="noticia-cuerpo">
  34.             <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>
  35.             <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>
  36.         </div>
  37.     </div>
  38. </body>
  39. </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
  1. $(function(){
  2.     // Agregamos la clase js al body para indicar JS activo
  3.     $('body').addClass('js');
  4.     
  5.     // Agregamos el link de ver mas
  6.     $('.noticia-cuerpo').after('<p><a href="#" class="noticia-ver-mas">Ver m&aacute;s...</a></p>');
  7.     
  8.     // Agregamos la funcion al evento click al ver mas
  9.     $('.noticia-ver-mas').click(function(e){
  10.         e.preventDefault();
  11.         var $elem = $(this);
  12.         var $cuerpo_noticia = $elem.parent().siblings('.noticia-cuerpo');
  13.         //obtener los elementos interiores para saber su altura. En este caso los <p>
  14.         var $cuerpo_noticia_elementos = $cuerpo_noticia.find('p');
  15.         var alto_actual = $cuerpo_noticia.outerHeight();
  16.         var alto_nuevo = 0;
  17.         
  18.         $cuerpo_noticia_elementos.each(function(){
  19.             //Sumar las alturas de los elementos interiores para calcular nueva altura
  20.             alto_nuevo += $(this).outerHeight() //Alto del elemento
  21.                         + parseInt($(this).css('margin-top'),10) //Margen superior
  22.                         + parseInt($(this).css('margin-bottom'),10); //Margen inferior
  23.         });
  24.         
  25.         $cuerpo_noticia
  26.             .css({
  27.                 maxHeight : 9999,
  28.                 height: alto_actual
  29.             })
  30.             .animate({
  31.                 height: alto_nuevo
  32.             });
  33.         
  34.         $elem.fadeOut();
  35.     });
  36. });

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
  1. .js .noticia-cuerpo{
  2.     /* Limitamos el alto del cuerpo de la noticia
  3.     cuando JS está activo solamente */
  4.     max-height: 50px;
  5.     overflow: hidden;
  6. }

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.
__________________
nahueljose.com.ar