Jquery - Contenedor de noticias

En este post vamos a explicar como podríamos tener un contenedor que se fuera actualizando con las últimas noticias, eventos, lo que sea.

Para empezar creamos un simple fichero css:

html, body {
 font-family: Helvetica, Arial, sans-serif;
 font-size: 12px;
 line-height: 16px;
 padding: 0;
 margin: 0;
 color: #333;
}

a { color: #141478; text-decoration: none; }
a:hover { color: #0099ff; }

#page {
 width: 500px;
 margin: 0 auto;
 background-color: #FFF;
 margin-bottom: 50px;
}

h1, h2 {
 font-family: 'IM Fell DW Pica SC', Helvetica, Arial, sans-serif;
 font-weight: normal;
}

h1 {
 font-size: 35px;

}
.highlight {
 font-size: 50px;
 color: #0099ff;
}
h1, h2 {
 color: #333;
 text-align: center; 
}
h2{
 text-align: right;
 padding: 10px 0px;
}

.bar {
 background-color: #111;
 color: #f0f0f0;
 box-shadow: 0px 0px 2px #333;
 line-height: 25px;
 padding: 0px 20px;
}
.bar a {
 color: #DDD;
}
.bar a:hover {
 color: #FFFFFF;
}

.ticker {
 width: 500px;
 height: 40px;
 overflow: hidden;
 border: 1px solid #DDD;
 margin: 0;
 padding: 0;
 list-style: none;
 border-radius: 5px;
 box-shadow: 0px 0px 5px #DDD;
}

#ticker_02 {
 height: 120px;
}

.ticker li {
 height: 30px;
 border-bottom: 1px dotted #DDD;
 padding: 5px;
 margin: 0px 5px;
}

#ticker_04 {
 height: 150px;
}
#ticker_04 li {
 height: 40px;
 overflow: hidden;
} 
#ticker_04 img {
 float: left;
 height: 40px;
 width: 40px;
 margin-right: 10px;
} 

#example_4 { display: none;}

Seguidamente añadiriamos el código html dentro del body.

<div id="page">
 <h2>Example 01 [show only one news at the time]</h2>
 <ul id="ticker_01" class="ticker">
  <li>
   Noticia número 1
  </li>
  <li>
   Noticia número 2
  </li>
  <li>
   Noticia número 3
  </li>
  <li>
   Noticia número 4
  </li>
 </ul>

 <h2>Example 02 [3 news always visible]</h2>
 <ul id="ticker_02" class="ticker">
  <li>
   Noticia número 1
  </li>
  <li>
   Noticia número 1
  </li>
  <li>
   Noticia número 1
  </li>
  <li>
   Noticia número 1
  </li>
 </ul>

 <h2>Example 03 [changing opacity of first news]</h2>
 <ul id="ticker_03" class="ticker">
  <li>
   Noticia número 1
  </li>
  <li>
   Noticia número 1
  </li>
  <li>
   Noticia número 1
  </li>
  <li>
   Noticia número 1
  </li>
 </ul>

 <span id="example_4">
  <h2>Example 04 [live twitter data for #javascript]</h2>
  <ul id="ticker_04" class="ticker">
  </ul>
 </span>

</div>


<script>

 function tick(){
  $('#ticker_01 li:first').slideUp( function () { $(this).appendTo($('#ticker_01')).slideDown(); });
 }
 setInterval(function(){ tick () }, 5000);


 function tick2(){
  $('#ticker_02 li:first').slideUp( function () { $(this).appendTo($('#ticker_02')).slideDown(); });
 }
 setInterval(function(){ tick2 () }, 3000);


 function tick3(){
  $('#ticker_03 li:first').animate({'opacity':0}, 200, function () { $(this).appendTo($('#ticker_03')).css('opacity', 1); });
 }
 setInterval(function(){ tick3 () }, 4000); 

 function tick4(){
  $('#ticker_04 li:first').slideUp( function () { $(this).appendTo($('#ticker_04')).slideDown(); });
 }


 /**
  * USE TWITTER DATA
  */

  $.ajax ({
   url: 'http://search.twitter.com/search.json',
   data: 'q=%23javascript',
   dataType: 'jsonp',
   timeout: 10000,
   success: function(data){
    if (!data.results){
     return false;
    }

    for( var i in data.results){
     var result = data.results[i];
     var $res = $("<li />");
     $res.append('<img src="' + result.profile_image_url + '" />');
     $res.append(result.text);

     console.log(data.results[i]);
     $res.appendTo($('#ticker_04'));
    }
   setInterval(function(){ tick4 () }, 4000); 

   $('#example_4').show();

   }
 });


</script>

Se tiene que importar las librerías de Jquery en el html.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>