Marquee Etiketi İle Kayan Makale Listesi

Şu sıralar bir web projesiyle ilgilendiğim için web tarafındaki açığımı kapatmak adına sürekli arayış içerisindeyim. Mevcut projede kullanmak üzere kayan bir blok içerisinde haber ya da makalelerin yer alacağı bir bölüm yapma fikri aklıma geldi. Bunun nasıl yapıldığını bir web cahili olarak bilmediğim için hemen araştırmalara başladım 🙂 Ve ilaç gibi bir html etiketi buldum : marquee. Hem unutmamak hem de size faydalı olması açısından bu konuyu da derli toplu bir makale haline getirmeye karar verdim. Şimdi ufak bir uygulama yapıp marquee etiketinden yararlanarak neler yapabiliriz bir bakalım.

Öncelikle bir web projesi açıyoruz. Projemize makalelerin gösterildiği Default.aspx, bir makaleye tıklandığında içeriğini gösterecek olan MakaleGoster.aspx sayfaları ile makalelerimizi okumak için bir XML dökümanı ekleyelim ve dökümanın yapısını aşağıdaki gibi oluşturalım.

3 <Makale ID=”1“>

4 <Yazar>Canan Gümrükçüoğlu</Yazar>

5 <Baslik>Asp.Net PopupMessageBox</Baslik>

6 <Icerik>

7 Web projeleri yaparken hepimizin aklından şu masaüstü uygulamalarındaki MessageBox keşke web’de de olsa diye geçmiştir. Özellikle benim gibi web projelerinden ve javascript gibi bir can simidinden uzak olanlar. İşte yine böyle düşündüğüm bir gün Burak Hoca’nın paylaştığı A Customize MessageBox, ConfirmBox and FrameBox Control for ASP.NET adlı makaleyi görünce işte aradığım işey dedim. Ancak makaledeki kodları uygularken Ajax Control Toolkit versiyonu yüzünden hata aldım (Makalede kullanılan versiyon 3.0, ben projede 3.5 kullanıyorum.) ve iş başa düştü diyerek bir User Control yazmaya başladım.

8

9 Kodlamaya başlamadan önce eğer Ajax Control Toolkit bilgisayarınızda yüklü değilse buradan yükleyebilirsiniz. Ajax Control Toolkit’in yüklenmesi makalemizin konusu olmadığı için burada bu konuya değinmiyorum. Şimdi bir web projesi açıyoruz ve projeye PopupMessageBox adında bir Web User Control ekliyoruz. Kontrolün Design tarafına geçerek öncelikle Ajax Control Toolkit’i kullanabilmek için Register anahtar kelimesi ile kontrole tanıtıyoruz.

10 </Icerik>

11 <Resim>Canan.png</Resim>

12 </Makale>

Sonra makaleleri XML’den okuyup yayınlayacağımız Default.aspx sayfamızın tasarımını da aşağıdaki gibi yapalım.


Css’i de aşağıdaki gibi oluşturalım. Makalelerimiz gözümüze hoş görünsün 🙂

Marquee etiketinde yer alan özellikleri kısaca inceleyelim.

Scrollamount: Kaydırılan yazının her hareketinde bir önceki yerleştirildiği konum ile yeni yerleştirileceği konum arasındaki piksel cinsinden farkı belirler. Sıfırdan büyük tamsayı bir değer alarak yazının bir önceki yerleştirildiği konum ile yeni yerleştirileceği konum arasındaki farkı belirtir. Varsayılan değer 6 piksel.

Direction: Yazının sağa, sola, aşağı ve yukarı olmak üzere kaydırılacağı yönü belirler.
• Left: Sağdan sola doğru kaydırır. Varsayılandır.
• Right: Soldan sağa doğru kaydırır.
• Up: Aşağıdan yukarı kaydırır.
• Down: Yukarıdan aşağı kaydırır.

ScrollDelay: Kaydırılan yazının her hareketinde bir önceki yerleştirildiği zaman ile sonraki yerleştirileceği zaman arasındaki milisaniye cinsinden farkı belirler.

OnMouseOver Eventi: Elementin kapladığı alana girildiğinde tetiklenir.

OnMouseOut Eventi: Elementin kapladığı alandan çıkıldığında tetiklenir.

Burada marquee etiketini tablo içerisine koyup tabloya boyut vermemizin belli bir sebebi var : Bunu yapmadığımız taktirde makalerimiz ekranda kayarken mouse’u bu makalelerin üstüne değil  sağ tarafta aynı hizaya getirdiğimiz taktirde makalelerimiz sanki üstüne gelmiş gibi duruyor.
Marquee etiketinin içerisine XML’den okuduğumuz makalelerin Başlık, Yazar bilgisi ve Yazar Resmi’ni gösterecek bir DataList kontrolü atıyoruz ve ItemTemplate’ini buna göre uygun kontrolleri yerleştiriyoruz. Bu işlemden sonra sıra geldi sayfamızın kod tarafına geçip XML’i okuyan ve DataList kontrolünde gösteren kodlarımızı yazmaya.

39 private void ReadFromXML()

40 {

41 XDocument document = XDocument.Load(Server.MapPath(“Makaleler.xml”));

42 dt.Columns.Add(“ID”, typeof(int));

43 dt.Columns.Add(“Baslik”, typeof(string));

44 dt.Columns.Add(“Yazar”, typeof(string));

45 dt.Columns.Add(“Resim”, typeof(string));

46

47 foreach (XElement element in document.Root.Elements(“Makale”))

48 {

49 dt.Rows.Add(int.Parse(element.Attribute(“ID”).Value), element.Element(“Baslik”).Value, element.Element(“Yazar”).Value, element.Element(“Resim”).Value);

50 }

51

52 dtMakale.DataSource = dt;

53 dtMakale.DataBind();

54 }

Yazdığımız ReadFromXML metodunu Page_Load eventinde aşağıdaki gibi çağırıyoruz.

18 if (!Page.IsPostBack)

19 {

20 ReadFromXML();

21 }

Bu işlemden sonra, datalist kontrolünün Item_DataBound eventini tetikleyerek makalelerin başlık bilgisine tıklandığında MakaleGoster.aspx sayfasına gidilmesini sağlıyoruz.

protected void dtMakale_ItemDataBound(object sender, DataListItemEventArgs e)

{

if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)

{

LinkButton lnk = e.Item.FindControl(“lnk”) as LinkButton;

lnk.PostBackUrl = string.Format(“~/MakaleGoster.aspx?ID={0}”, dt.Rows[e.Item.ItemIndex].Field<int>(“ID”).ToString());

 

Image img = e.Item.FindControl(“imgResim”) as Image;

img.ImageUrl = string.Format(“~/images/{0}”, dt.Rows[e.Item.ItemIndex].Field<string>(“Resim”));

}

}

Şimdi de MakaleGoster.aspx sayfamızın tasarım ve CSS’ini oluşturalım.

Son olarak da kod tarafına geçip seçilen makaleyi gösteren kodumuzu MakaleGoster.aspx sayfamızın Page_Load eventine yazıyoruz.

string id=string.Empty;

if(Request.QueryString[“ID”]!=null)

{

id=Request.QueryString[“ID”];

}

if (!Page.IsPostBack)

{

XDocument document = XDocument.Load(Server.MapPath(“Makaleler.xml”));

 

XElement element = document.Root.Elements(“Makale”).SingleOrDefault(elm => elm.Attribute(“ID”).Value == id);

lblBaslik.Text = element.Element(“Baslik”).Value;

lblIcerik.Text = element.Element(“Icerik”).Value;

lblYazar.Text = element.Element(“Yazar”).Value;

imgResim.ImageUrl = string.Format(“~/images/{0}”, element.Element(“Resim”).Value);

 

}

Projemizi çalıştırdığımızda aşağıdaki gibi bir ekran görüntüsü elde ediyoruz.

Marquee Hakkında :www.mynotlar.com

Reklamlar

Marquee Etiketi İle Kayan Makale Listesi’ için 14 yanıt

  1. Bu isler icin en guzeli javascript kullanmak. Marquee (her ne kadar kullanimi kolay da olsa) eskidi artik. Ajaxrain.com sitesinde cesitli javascript eklentileri var. Incelemenizi tavsiye ederim.

  2. Okadar yazım kodları hiç birşey çıkmadı projenin son halini vermisiniz… herhalde projeyi yapmadan yazdınız kodları çok eksik var

    1. Hayır ilkay yaptığım her örneğin kodunu yazar önce kendim denerim. Kendim yapamadığım şeyi başkasına anlatmam. Orada yazan kodlar zaten tamamen bu işi yapabilmeni sağlayan kodlar arada eksik bir kod yok. Benim projenin tamamını vermek gibi bir adetim yoktur. Yardım isteyenlere örnek kod gösteririm ancak projeyi vermem bu ezberden öte birşey olmaz, yapan kişiye de yararı olmaz.

  3. Merhaba
    verdiğiniz çeşitli örnekleri inceliyor,makalelerinizi de takip ediyorum. öncelikle çalışmalarınızı paylaştığınız için teşekkür ederim.
    bir sorun olacak konu ile ilgili: asp:datalist taglarını marquee tagı olmadan yazdığımızda datalist içeriğini sayfaya basıyor fakat marquee içinde göstermeye çalıştığımızda design alanında marque içinde datalist kodları görünüyor.
    özetle marque tagı içerisinde datalisti gösteremedim. sorun ne olabilir?

  4. default.aspx de marquee içinde datalist ile xml okuduğunuzu görüyorum ve projenin son halini gösteren resimde de bu görülüyor. bir şekilde çözmüşsünüz fakat ben de o noktada takıldım 😀
    eğer hatırlarsanız benide bilgilendirirseniz inanın çok sevinirim.
    teşekküler,iyi çalışmalar.

  5. designer tarafında patlıyor marque’nun içinde datalist’i göstermiyor sadece yazı olarak görüyorsun ama çalıştırdığında derlenip istediğin sonucu veriyor ilginç bi şekilde 🙂

  6. designer tarafını geçtim şimdilik,patlasın o orada 😀
    aşağıda default.aspx ve cs kodları var, bir göz atmanız mümkün mü? cs tarafında :The name ‘dt’ does not exist in the current context hatası alıyorum.

    default.aspx

    .style1 {
    width: 100%;
    }

    <asp:Label ID="lblYazar" runat="server" Text='’>

     

    devamında da cs tarafında itemdatabounda olayını işlemeye çalıştm;

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Xml.Linq;
    using System.Data.SqlClient;

    public partial class _Default : System.Web.UI.Page
    {
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void dtMakale_ItemDataBound(object sender, DataListItemEventArgs e)

    {

    if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)

    {

    LinkButton lnk = e.Item.FindControl(“lnk”) as LinkButton;

    lnk.PostBackUrl = string.Format(“MakaleGoster.aspx?ID={0}”, dt.Rows[e.Item.ItemIndex].Field(“ID”).ToString());

    Image img = e.Item.FindControl(“imgResim”) as Image;

    img.ImageUrl = string.Format(“~/images/{0}”, dt.Rows[e.Item.ItemIndex].Field(“Resim”));

    }

    }

    }

  7. kusura bakmayın uğraştırıyorum sizi fakat verdiğiniz örneğe göre düzenleme yapmaya çalıştım fakat hata alıyorum.muhtemelen küçük bir hata. asp.net ile yeni uğraşmaya başladım,acemiyim. eğer mümkünse, dosyaları size iletsem bir gözatmanız mümkün mü? sizden düzenleme de istemiyorum,sadece şurada hatan var demeniz yeterli olur benim için.

Bir Cevap Yazın

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Google fotoğrafı

Google hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Connecting to %s