Ads

Friday, 17 February 2017

News Tickers in SharePoint 2013 using JQuery

Lets create a custom list called "News"
We will get news text from title of this list and display in SharePoint page page

VS --> New Project --> SP 2013 empty project --> Deploy as a farm solution
Add new item --> Visual web part
Add jQuery reference to layout folder & add its reference in ascx page of web part

Add script in same page:
< script > $(document).ready(function() {
    $('#NewsTicker').vTicker({
        speed: 500,
        pause: 3000,
        showItems: 1,
        animation: 'fade',
        mousePause: true,
        direction: 'up' /*Text direction*/
    });
}); < /script>

Add style CSS in same page:
<style type="text/css" media="all">
    #NewsTicker
    {
        width: 844px;
        margin: auto;
    }

    #NewsTicker ul li div
    {
        height:30px;
        background: Yellow;
    }

    <div style="width:1310px; height:30px; border-style:solid; border-width:2px; border-color:#FFCB05">
        <div style="float:left;background-color:White; height: 27px; width: 118px;">
            <h2 style="font-family:Arial; font-size:22px; background-color:#FFCB05; color:Black;">News</h2>
        </div>
        <div id="NewsTicker" style="float:left; padding-left:15px; font-size:24px; font-family:Arial; height: 29px;">
            <ul style="width: 920px">
                <asp:Literal ID="ltNews" runat="server" Text=""></asp:Literal>
            </ul>
        </div>
    </div>
</style>

Now write C# code in page load to bind data:
private void BindData()
{
    Guid siteId = SPContext.Current.Site.ID;
    Guid webId = SPContext.Current.Web.ID;
    StringBuilder sb = new StringBuilder();
    SPSecurity.RunWithElevatedPrivileges(delegate
    {
        using(SPSite site = new SPSite(siteId))
        {
            using(SPWeb web = site.OpenWeb(webId))
            {
                SPList list = web.Lists.TryGetList("News"); /*Create the list*/
                if (list != null)
                {
                    foreach(SPListItem item in list.Items)
                    {
                        sb.AppendLine("<li>");
                        sb.AppendLine("<div>");
                        sb.AppendLine(item.Title); /*Get the title column*/
                        sb.AppendLine("</div>");
                        sb.AppendLine("</li>");
                    }
                }

            }
        }
    });
    ltNews.Text = sb.ToString();
}

Finally deploy and add this webpart in page to see the result

No comments:

Post a Comment

Ads