Arkadaşlar veri tabanı ile haber manşet sistemi yapmaya çalışıyorum. Verileri veri tabanından repeater ile çektim.
div id="Alan"> <asp:Repeater ID="RpHaberler" runat="server" >
<ItemTemplate>
<div> <img ID="HaberResim" runat="server" src='<%#Eval("ResimYol") %>' Height="320" Width="564"/> <span class="Baslik">
<asp:Label ID="HaberMetni" runat="server" Text='<%#Eval("Baslik") %>' ></asp:Label></span>
</div> </ItemTemplate>
</asp:Repeater> </div> <asp:PlaceHolder ID="SayfaBas" runat="server"></asp:PlaceHolder>bu şekilde yaptım. sonra css ve jquery
<style type="text/css">
A{text-decoration:none}
#Alan {
height:322px;border:1px solid #ccc;overflow:hidden;}
#Alan div
{
height:320px;border:1px solid #ccc;}
.sayfam
{
position:relative;color:White;border:1px solid #ccc; background-color:Red;font-weight:bold;font-family:Verdana;font-size:10px;padding:10px 10px 8px 16.3px;top:0px; float:left; }
.Baslik
{
position:relative;width:562px;background:url(metin.png);font-family:MS Sans Serif;padding-left:2px;padding-top:15px;top:-59px;height:40px;float:left;font-weight:bold;color:White;}
a:hover .sayfam {
background-color:Green;text-align:center; font-weight:bold;font-family:Verdana;font-size:10px;cursor:pointer; }
</style>
//Resimlerin değiştriği javascript kodu
<script type="text/javascript" language="javascript">function resimdegis(Baslik,ResimYolu){
dizi=Baslik.split("-");document.getElementById('HaberMetni').innerHTML="";
for (i=0;i<dizi.length;i++){
document.getElementById('HaberMetni').innerHTML+=dizi+' ';}
document.getElementByID('HaberResim').src=ResimYolu;}
</script>
<script type="text/javascript">
var aktif = 1; var timer; var adet;$(document).ready(function(){$("#Alan").show(); $("#Alan div").hide();$("#Alan div:first").show();adet=$("#Alan div").length;renk(1);
timer = setInterval(degistir,5000);
});
function degistir(){
$("#Alan div:nth-child("+aktif+")").slideUp(100);aktif = (aktif + 1) % adet;
if(aktif == 0) aktif = adet;$("#Alan div:nth-child("+aktif+")").slideDown(200);renk(aktif);
$("#sayfano").html(aktif);}
function renk(deger){
$(".sayfam").css("background-color","#990099")$(".sayfam span:nth-child("+deger+")").css("background-color","#0033FF");}
</script>kodlarımda bu şekilde
OleDbConnection baglantimr = new OleDbConnection("provider=microsoft.jet.oledb.4.0;data source=" + Server.MapPath("db/Haberler_Lig.mdb"));baglantimr.Open();
OleDbDataAdapter baglar = new OleDbDataAdapter("Select top 15 * FROM Haberler Where Goster=" + true + " order by Haberid desc", baglantimr);DataTable dt = new DataTable();baglar.Fill(dt);
RpHaberler.DataSource = dt;
RpHaberler.DataBind();
baglantimr.Close();
OleDbConnection baglantim = new OleDbConnection("provider=microsoft.jet.oledb.4.0;data source=" + Server.MapPath("db/Haberler_Lig.mdb"));baglantim.Open();
OleDbDataAdapter bagla = new OleDbDataAdapter("Select top 15 * FROM Haberler Where Goster=" + true + " order by Haberid desc", baglantim);DataSet ds = new DataSet();bagla.Fill(ds);
int a = 1;for (int i = 0; i < ds.Tables[0].Rows.Count; i++){
Label Haber = new Label();Haber.ID = Haber + ds.Tables[0].Rows[0].ToString();Haber.Text = "<a href=" + Linkim.LinkDegistir(ds.Tables[0].Rows[1].ToString().Trim() + "_" + ds.Tables[0].Rows[0].ToString().Trim()) + ".html" + " onmouseover=resimdegis('" + ds.Tables[0].Rows[1].ToString().Replace(" ", "-") + "','" + ds.Tables[0].Rows[5].ToString() + "')><span class=sayfam>"+a+++ "</span>"+"</a>";SayfaBas.Controls.Add(Haber);
}
}
arkadaşlar benim yapamadığım class=sayfa olan bölümde sıkıntım var.jquery ile haberler değiştiğinde mesela 2 nci haberde ise span 2 nin background rengi değişsin.Yani onun aktif haber olduğu belli olsun. Haber Sitelerinde olduğu gibi.Yardımlarınızı bekliyorum.Şİmdiden teşekkürler.