Home/ Questions/Q 3792438
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-19T12:37:20+00:00

I want to make a site use wp, and I want add a scroll

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    • 0