How to make a scroll news like Top Tweets in twitter homepage? (php)

2 Views

I want to make a site use wp, and I want add a scroll news like Top Tweets in twitter homepage. when the custom post a new replys in every part of my page, the new topics will disply in this scroll news part. they all come from latest 10 items of database. How to do that? Thanks

Post Views: 2

Related posts

Leave a Reply

1 comment

  1. Using Jquery you can make a div slide in and slide out of view.
    http://docs.jquery.com/UI/Effects/Slide#overview.

    Then you give each div a unique id each containing a comment from your database. Initialize div 0,1,2 as visible and 3-9 as hidden. Here the javascript structure:

    echo <<<CONTENT
<html>
<head>
       <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
       <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js">       
       </script>
       <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 
       <script type="text/javascript">
        k=1;
        setInterval("livefeed(k++)",1000);
        function livefeed(i){
        slide(i);
        }

        function slide(i){
                 addTop((i+3)%10);
                removeBottom(i%10);
                 var j=((i-1)%10);
                 $('.livefeed').prepend($("#"+j));

        }

        function addTop(i){
                  var e=document.getElementById(i);
                  $("#"+i).fadeIn(1000);  
        }
        function removeBottom(i){
                  $("#"+i).fadeOut(1000);   
         }
</script>

</head>
<body>
CONTENT;

     echo "<div class='livefeed'>";
     for($i=9;$i>=0;$i--){
         if($i<4&&$i>0){
        echo "<div id='".$i."' >This is comment $i from the database</div>";
         }else{
        echo "<div style='display:none' id='".$i."'  >This is comment ".$i." from the database</div>";      
          }
     }
     echo "</div>";

    THis updates every second.. which is a bit fast … so you should set it to something like 7000 milliseconds.
    demo