Help me for Fade in/Out in Dynamic Table.

deden · 10-22-2009, 12:54 AM

Hello,

I am Deden from Indonesia. New in PHP.
I have a problem. I have data in Mysql. I need it can run with fade in/out.
I hope, I am not wrong post this thread to MySql and Database Thread because need Jquery.

===========
Here is the script :

?>
<div align="center"></div>
<table border="1" bordercolor="#0000FF" bgcolor="#FFFF00">
<tr>
<td class="style10"><div align="center" class="style9 style11 style29">NOMOR</div></td>
<td class="style10"><div align="center" class="style12 style29">NOMOR SURAT </div></td>
<td class="style10"><div align="center" class="style16 style29">NAMA/INSTANSI</div></td>
<td class="style10"><div align="center" class="style30">ALAMAT</div></td>
<td class="style10"><div align="center" class="style30">JENIS PELAYANAN </div></td>
<td class="style10"><div align="center" class="style30">STATUS</div></td>
</tr>
<?php do { ?>
<tr>
<td class="style10"><div align="center" class="style33"><?php echo $row_Recordset1['nm']; ?></div></td>
<td class="style33"><?php echo $row_Recordset1['nosrt']; ?></td>
<td class="style17"><span class="style32"><?php echo $row_Recordset1['nama']; ?></span></td>
<td class="style10"><span class="style33"><?php echo $row_Recordset1['alamat']; ?></span></td>
<td class="style10"><div align="center" class="style18 style21"><?php echo $row_Recordset1['jenis']; ?></div></td>
<td class="style10"><div align="center" class="style32 style55"><?php echo $row_Recordset1['status']; ?></div></td>
</tr>
<?php } while ($row_Recordset1 = mysql_fetch_assoc($Recordset1)); ?>
</table>
<p> </p>
</body>
</html>
<?php
mysql_free_result($Recordset1);
?>

==========

I want it like this :

===========

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>News Ticker with jQuery</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){

var first = 0;
var speed = 700;
var pause = 3500;

function removeFirst(){
first = $('ul#listticker li:first').html();
$('ul#listticker li:first')
.animate({opacity: 0}, speed)
.fadeOut('slow', function() {$(this).remove();});
addLast(first);
}

function addLast(first){
last = '<li style="display:none">'+first+'</li>';
$('ul#listticker').append(last)
$('ul#listticker li:last')
.animate({opacity: 1}, speed)
.fadeIn('slow')
}

interval = setInterval(removeFirst, pause);
});
</script>
<style type="text/css">
body{
font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
#listticker{
height:200px;
width:400px;
overflow:hidden;
border:solid 1px #DEDEDE;
padding:6px 10px 14px 10px;;
}
#listticker li{
border:0; margin:0; padding:0; list-style:none;
}

#listticker li{
height:60px;
padding:5px;
list-style:none;
}
#listticker a{
color:#000000;
margin-bottom:
}
#listticker .news-title{
display:block;
font-weight:bold;
margin-bottom:4px;
font-size:11px;
}
#listticker .news-text{
display:block;
font-size:11px;
color:#666666;
}
#listticker img{
float:left;
margin-right:14px;
padding:4px;
border:solid 1px #DEDEDE;
}
</style>

</head>

<body>
<ul id="listticker">

<li>
<img src="img/1.png" />
<a href="" class="news-title">Health care reform</a>
<span class="news-text">President Obama has announced three bedrock requirements for real health care reform</span>
</li>
<li>
<img src="img/2.png" />
<a href="" class="news-title">National Geographic Animals</a>

<span class="news-text">Killer whales, Bengal tigers, crocs, more</span>
</li>
<li>
<img src="img/3.png" />
<a href="" class="news-title">Spotlight stars</a>
<span class="news-text">Marilyn Manson is not exactly a conformist. From his music — a meat-grinder...</span>
</li>

<li>
<img src="img/4.png" />
<a href="" class="news-title">Lost: the new serie is coming</a>
<span class="news-text">Watch full episodes online. The final season begins early 2010</span>
</li>
</ul>

<p>
More tutorials on <a href="http://woork.blogspot.com/">Woork.blogspot.com</a></p>

</body>
</html>

==================

Sorry I dont attach the jquery.js and images. Would you like to help me please......

Thanks for your attention.

Deden