none
Asp.net yukarı kayan yazı RRS feed

  • Soru

  • Merhaba,

    Ekteki resimde belirttiğim gibi bir işlemi nasıl yapabilirim acaba?

    Şu anda o alanı aşağıdaki kodlar ile dolduruyorum.

    <section id="contentArea">
            <asp:Repeater ID="rpDuyurular" runat="server">
                <ItemTemplate>
                    <div id="newsSlideArea" class="gradient1">
                        <div id="newsSlideHead">RST Haber Duyuru / Bülteni</div>
                        <div id="newsSlidePublish">
                            <a href="Duyurular.aspx?Id=<%#Eval("ID") %>" style="display: block;"><%#Eval("BASLIK") %></a>
                        </div>
                        <a id="newsSlideAllLink" href="Duyurular.aspx">Tümümünü Gösterin</a>
                    </div>
                </ItemTemplate>
            </asp:Repeater>
        </section>


    Oğuz KURTCUOĞLU | Professional Software Developer http://www.oguzkurtcuoglu.com oguz[at]oguzkurtcuoglu[dot]com

    23 Temmuz 2013 Salı 13:02

Yanıtlar

  • Düşündüğüm gibi total değişkeninde sorun olmuş. Ben boş sayfada test etmiştim, sayfam hızlı açıldığı için problem olmamıştı. Ama sizin sayfanız dolu olup geç açıldığı için total e hemen değer atayamıyor. Bu yüzden js kodlarını şöyle değiştirin:

        <script type="text/javascript">
            var index = -1;
            var total = 0;
    
            function slide() {
                $('#slider div').fadeOut(100);
                $('#slider div').eq(index).fadeIn(600);
    
                if (++index === total) {
                    index = 0;
                }
            }
    
            $(document).ready(function () {
                total = $('#slider div').length;
                slide();
                setInterval('slide()', 3000);
            });
        </script>



    26 Temmuz 2013 Cuma 11:54

Tüm Yanıtlar

  • Html marquee tagi kullan.

    <marquee behavior="scroll" direction="left" width="300">Kayan yazi</marquee> <marquee behavior="scroll" direction="right" width="300">Kayan yazi</marquee> <marquee behavior="scroll" direction="up" height="100">Kayan yazi</marquee> <marquee behavior="scroll" direction="down" height="100">Kayan yazi</marquee>
    23 Temmuz 2013 Salı 14:22
  • Hocam marque ile yapmaya çalışıyorum ama olmadı bir türlü marqueyi yukarda belirttiğim kodun neresine koymak lazım bir türlü beceremedim.

    Oğuz KURTCUOĞLU | Professional Software Developer http://www.oguzkurtcuoglu.com oguz[at]oguzkurtcuoglu[dot]com

    23 Temmuz 2013 Salı 14:23
  • <%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
        CodeBehind="Default.aspx.cs" Inherits="MarqueeSample._Default" %>
    
    <asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    </asp:Content>
    <asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
        <h2>
            Welcome to ASP.NET!
        </h2>
        <asp:Literal runat="server" ID="m1" Text="<marquee behavior='scroll' direction='left' width='300px'>Kayan yazi</marquee>"></asp:Literal>
        <p>
            To learn more about ASP.NET visit <a href="http://www.asp.net" title="ASP.NET Website">www.asp.net</a>.
        </p>
        <p>
            You can also find <a href="http://go.microsoft.com/fwlink/?LinkID=152368&amp;clcid=0x409"
                title="MSDN ASP.NET Docs">documentation on ASP.NET at MSDN</a>.
        </p>
    </asp:Content>
    

    23 Temmuz 2013 Salı 14:56
  • Hocam marque ile yapmaya çalışıyorum ama olmadı bir türlü marqueyi yukarda belirttiğim kodun neresine koymak lazım bir türlü beceremedim.

    Oğuz KURTCUOĞLU | Professional Software Developer http://www.oguzkurtcuoglu.com oguz[at]oguzkurtcuoglu[dot]com

    Repeater ı kapsayacak şekilde kullanmalısınız.
    23 Temmuz 2013 Salı 14:59
  • repeater'ın dışından başlıyorum marque koduna ama bu seferde tüm yapıyı kaydırıyor olduğu gibi.

    Oğuz KURTCUOĞLU | Professional Software Developer http://www.oguzkurtcuoglu.com oguz[at]oguzkurtcuoglu[dot]com

    23 Temmuz 2013 Salı 15:08
  • repeater'ın dışından başlıyorum marque koduna ama bu seferde tüm yapıyı kaydırıyor olduğu gibi.

    Oğuz KURTCUOĞLU | Professional Software Developer http://www.oguzkurtcuoglu.com oguz[at]oguzkurtcuoglu[dot]com

    Repeater yapısı biraz tuhaf görünüyor. Şu ifadeyi kapsayacak şekilde deneyin:

    <div id="newsSlidePublish">
                            <a href="Duyurular.aspx?Id=<%#Eval("ID") %>" style="display: block;"><%#Eval("BASLIK") %></a>
    </div>

    23 Temmuz 2013 Salı 15:28
  • Hocam şimdi biraz saçmalamışım ben o kodu yazarken :) Şu şekilde değiştirdim şimdi nasıl kullanabilirim bu marque kodunu ben bir kaç yol denedim yapamadım.

    <section id="contentArea">
            <div id="newsSlideArea" class="gradient1">
                <div id="newsSlideHead">RST Haber Duyuru / Bülteni</div>
                <asp:Repeater ID="rpDuyurular" runat="server">
                    <ItemTemplate>
                        <div id="newsSlidePublish">
                            <a href="Duyurular.aspx?Id=<%#Eval("Id") %>" style="display: block;"><%#Eval("Baslik") %></a>
                        </div>
                    </ItemTemplate>
                </asp:Repeater>
                <a id="newsSlideAllLink" href="Duyurular.aspx">Tümümünü Gösterin</a>
            </div>
        </section>


    Oğuz KURTCUOĞLU | Professional Software Developer http://www.oguzkurtcuoglu.com oguz[at]oguzkurtcuoglu[dot]com

    23 Temmuz 2013 Salı 15:34
  • İşte şimdi Repeater ı kapsayacak şekilde kullandığınız zaman olması gerekiyor.
    23 Temmuz 2013 Salı 15:46
  • Aşağıdaki şekilde kullandım ama hiçbir kayma olmuyor ayrıca Tümünü Gösterin yazısı da görünmüyor.

    <section id="contentArea">
            <div id="newsSlideArea" class="gradient1">
                <div id="newsSlideHead">RST Haber Duyuru / Bülteni</div>
                <marquee behavior="scroll" direction="up">
                <asp:Repeater ID="rpDuyurular" runat="server">
                    <ItemTemplate>
                        <div id="newsSlidePublish">
                            <a href="Duyurular.aspx?Id=<%#Eval("Id") %>" style="display: block;"><%#Eval("Baslik") %></a>
                        </div>
                    </ItemTemplate>                
                </asp:Repeater>    
                    </marquee>
                <a id="newsSlideAllLink" href="Duyurular.aspx">Tümümünü Gösterin</a>
            </div>
        </section>


    Oğuz KURTCUOĞLU | Professional Software Developer http://www.oguzkurtcuoglu.com oguz[at]oguzkurtcuoglu[dot]com

    23 Temmuz 2013 Salı 15:54
  • Kayma olması için marquee içerisinde olan verilerin marquee boyutlarını aşması gerekiyor. İsterseniz marquee koduna width ve height ölçüleri ekleyebilirsiniz. Bu linki de incelerseniz size yardımcı olacaktır:

    http://www.quackit.com/html/codes/html_marquee_code.cfm

    23 Temmuz 2013 Salı 16:03
  • Aydın bey kodu aşağıdaki şekilde düzenledim ama yine olmadı. Sabit duruyor son gelen yazı.

    <section id="contentArea">
            <div id="newsSlideArea" class="gradient1">
                <div id="newsSlideHead">RST Haber Duyuru / Bülteni</div>
                <marquee onmouseover=this.stop() onmouseout=this.start() align="left" scrollamount="1" height="30px" width="70px" direction="up"scrolldelay="10" >
                <asp:Repeater ID="rpDuyurular" runat="server">
                    <ItemTemplate>
                        <div id="newsSlidePublish">
                            <a href="Duyurular.aspx?Id=<%#Eval("Id") %>" style="display: block;"><%#Eval("Baslik") %></a>
                        </div>
                    </ItemTemplate>                
                </asp:Repeater>    
                    </marquee>
                <a id="newsSlideAllLink" href="Duyurular.aspx">Tümümünü Gösterin</a>
            </div>
        </section>


    Oğuz KURTCUOĞLU | Professional Software Developer http://www.oguzkurtcuoglu.com oguz[at]oguzkurtcuoglu[dot]com

    23 Temmuz 2013 Salı 20:45
  • Sizde başka bir sorun var Oğuz Bey,

    Denediğiniz bu kodları aynen uyguladım ve gayet sağlıklı çalıştı. Belki div lere uyguladığınız stiller problem çıkarıyor olabilir. Repeater içerisinde direkt Eval("Baslik") şeklinde yazdırma yapıp deneyin isterseniz.

    23 Temmuz 2013 Salı 21:04
  • Aydın bey sanırım stillerde bir sıkıntı var o yüzden olmuyor stilleri uygulamadan yaptım oldu. Benim yapmak istediğim aslında www.rst.com.tr adresinde slider'ın altında olan kısım. Bunu nasıl yapabilirim ben? Veritabanından çekeceğim ve slider tarzında göstermem lazım. 

    Oğuz KURTCUOĞLU | Professional Software Developer http://www.oguzkurtcuoglu.com oguz[at]oguzkurtcuoglu[dot]com

    25 Temmuz 2013 Perşembe 06:59
  • jQuery ile yaparsanız daha kolay olur. Sizin için küçük bir örnek hazırladım:

            <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>        

    <div id='slider' style="height:20px; "> <asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1"> <ItemTemplate> <div style="display:none;"> <span><%# Eval("Ad") %></span> </div> </ItemTemplate> </asp:Repeater> </div>

        <script type="text/javascript">
            var index = 0;
            var total = $('#slider div').length;
    
            function slide() {
                $('#slider div').fadeOut(100);
                $('#slider div').eq(index).fadeIn(600);
    
                if (++index === total) {
                    index = 0;
                }
            }
    
            $(document).ready(function () {
                slide();
                setInterval('slide()', 5000);
            });
        </script>

    İsterseniz stilleri ayrı bir css dosyasından çağırabilirsiniz. Ben kısa olması için inline olarak yazdım.
    25 Temmuz 2013 Perşembe 17:23
  • Aydın bey teşekkür ederim çok güzel bir şekilde çalışıyor sadece. Lakin Repeater içinde 2 tane kayıt var mesela bu iki kayıt gösterildikten sonra tekrar baştan gösterilmiyor. Yani 2 tane gösteriliyor ve sonra duruyor animasyon. Bun nasıl sürekli tekrar ettirebilirim?


    Oğuz KURTCUOĞLU | Professional Software Developer http://www.oguzkurtcuoglu.com oguz[at]oguzkurtcuoglu[dot]com

    26 Temmuz 2013 Cuma 06:55
  • Sanırım js deki total değişkeninizde sorun var. Bu değişken repeater içerisindeki div sayısını göstermeli. Göstermezse dediğiniz şekilde bir problem ortaya çıkabilir. Gönderdiğim kodları denedim, animasyonlar bitince index total e denk oluyor, index değeri 0 oluyor ve başa dönüyor. Sizde tam bu kısımda problem var sanırım. index 0 a dönmüyor. Yazım hatasından dolayı olabilir veya repeater item template içerisinde birden fazla div kullanıyor da olabilirsiniz.
    • Düzenleyen Aydın AKAN 26 Temmuz 2013 Cuma 11:02 Ek bilgi
    26 Temmuz 2013 Cuma 11:01
  • Aydın bey kodları aşağıdaki şekilde ekledim ben. Bir hata var mı bakabilir misiniz ?
    <%@ Page Title="" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
    
    <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
        <link href="slider/engine1/style.css" rel="stylesheet" />
        <script src="slider/engine1/jquery.js"></script>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
        <script type="text/javascript">
            var index = 0;
            var total = $('#slider div').length;
    
            function slide() {
                $('#slider div').fadeOut(100);
                $('#slider div').eq(index).fadeIn(600);
    
                if (++index === total) {
                    index = 0;
                }
            }
    
            $(document).ready(function () {
                slide();
                setTimeout('slide()', 3000);
            });
        </script>
    
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
        <div id="wowslider-container1">
            <div class="ws_images">
                <ul>
                    <li>
                        <img src="slider/data1/images/1.jpg" alt="1" title="1" id="wows1_0" /></li>
                    <li>
                        <img src="slider/data1/images/2.jpg" alt="2" title="2" id="wows1_1" /></li>
                    <li>
                        <img src="slider/data1/images/3.jpg" alt="3" title="3" id="wows1_2" /></li>
                    <li>
                        <img src="slider/data1/images/4.jpg" alt="4" title="4" id="wows1_3" /></li>
                </ul>
            </div>
            <div class="ws_bullets">
                <div>
                    <a href="#" title="1">
                        <img src="slider/data1/tooltips/1.jpg" alt="1" />1</a>
                    <a href="#" title="2">
                        <img src="slider/data1/tooltips/2.jpg" alt="2" />2</a>
                    <a href="#" title="3">
                        <img src="slider/data1/tooltips/3.jpg" alt="3" />3</a>
                    <a href="#" title="4">
                        <img src="slider/data1/tooltips/4.jpg" alt="4" />4</a>
                </div>
            </div>
            <span class="wsl">></span>
            <div class="ws_shadow"></div>
        </div>
        <script type="text/javascript" src="slider/engine1/wowslider.js"></script>
        <script type="text/javascript" src="slider/engine1/script.js"></script>
        <section id="contentArea">
            <div id="newsSlideArea" class="gradient1">
                <div id="newsSlideHead">RST Haber Duyuru / Bülteni</div>
                <div id='slider' style="height: 20px; overflow: hidden;">
                    <asp:Repeater ID="rpDuyurular" runat="server">
                        <ItemTemplate>
                            <div id="newsSlidePublish">
                                <a href="Duyurular.aspx?Id=<%#Eval("Id") %>" style="display: block;"><%#Eval("Baslik") %></a>
                            </div>
                        </ItemTemplate>
                    </asp:Repeater>
                </div>
                <a id="newsSlideAllLink" href="Duyurular.aspx">Tümümünü Gösterin</a>
            </div>
        </section>
    </asp:Content>
    


    Oğuz KURTCUOĞLU | Professional Software Developer http://www.oguzkurtcuoglu.com oguz[at]oguzkurtcuoglu[dot]com

    26 Temmuz 2013 Cuma 11:34
  • 2 kez jquery eklemişsiniz, problem olabilir, şu satırın silin:

    <script src="slider/engine1/jquery.js"></script>

    Repeater içindeki div e id vermeniz doğru olmaz. Çünkü tekrarlanacağı için sonuçta aynı sayfada birden fazla aynı id ye sahip div olmuş olur ki kurallara aykırı bir durum (Çalışmaması bununla ilgili değildir tabiki)

    Slide fonksiyonundaki if bloğunun altına:

    alert(index); kodunu ekleyin ve her fonksiyon çalıştığında index değeri ne oluyor gözleyin. Aynı şeyi total değişkeni için de yapın.

    26 Temmuz 2013 Cuma 11:42
  • alert 2 kez çalışıyor. İkisinde de total 0. İndex değeri de ilkinde 1 ikinci de 2 oluyor sonra slide duruyor. Dediğiniz gibi jquery.js kısmını sildim. Ama yine 2 taneden sonra duruyor.

    Oğuz KURTCUOĞLU | Professional Software Developer http://www.oguzkurtcuoglu.com oguz[at]oguzkurtcuoglu[dot]com

    26 Temmuz 2013 Cuma 11:48
  • Düşündüğüm gibi total değişkeninde sorun olmuş. Ben boş sayfada test etmiştim, sayfam hızlı açıldığı için problem olmamıştı. Ama sizin sayfanız dolu olup geç açıldığı için total e hemen değer atayamıyor. Bu yüzden js kodlarını şöyle değiştirin:

        <script type="text/javascript">
            var index = -1;
            var total = 0;
    
            function slide() {
                $('#slider div').fadeOut(100);
                $('#slider div').eq(index).fadeIn(600);
    
                if (++index === total) {
                    index = 0;
                }
            }
    
            $(document).ready(function () {
                total = $('#slider div').length;
                slide();
                setInterval('slide()', 3000);
            });
        </script>



    26 Temmuz 2013 Cuma 11:54
  • Tamamdır çok güzel oldu şimdi :) çok teşekkür ederim Aydın bey elinize sağlık. Son olarak setTimeout'u ben yazmıştım bunu setInterval olarak tekrar değiştirdim şimdi sorunsuz çalışıyor. Çok saolun.

    Oğuz KURTCUOĞLU | Professional Software Developer http://www.oguzkurtcuoglu.com oguz[at]oguzkurtcuoglu[dot]com

    26 Temmuz 2013 Cuma 11:59
  • Rica ederim. setInterval kısmını değiştirdim tekrar :)
    26 Temmuz 2013 Cuma 12:03