Create News Ticker in SharePoint 2013 Using jQuery

This article explains how to create a SharePoint 2013 News Ticker using JQuery. Look at the following procedure.

Step 1

Open Visual Studio.



Step 2

Create a new project and select SharePoint 2013 Empty project.



Step 3

Deploy as a Farm Solution.



Step 4

Add a new item into the empty SharePoint project.



Step 5

Create a new Visual webpart.

Step 6

Now add the jQuery references into the SharePoint LAYOUTS Folder.



Step 7

Add a reference into the page "Ticker.ascx".

Design

Just add a ticker activities into it.

< script > $(document).ready(function() {
    $('#NewsTicker').vTicker({
        speed: 500,
        /*Speed of the feed message*/
        pause: 3000,
        /*Pause time*/
        showItems: 1,
        /*No of News to display*/
        animation: 'fade',
        /*animation styles*/
        mousePause: true,
        /* pause when hover */
        direction: 'up' /*Text direction*/
    });
}); < /script>

Add a simple style for the NewsTicker

<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 to bind the list

Add these two namespaces.

using System.Text;
using Microsoft.SharePoint;

Code

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();
}

Step 8

Now save and deploy.

 

Step 9

So the solutions have been deployed now.

Go to the site.

Here I am have created a list named “News”.



Step 10

The news lists have two feeds.



Step 11

Add a Newsfeed webpart from the “Custom” tab.









So we can use this newsfeed dynamically.

Regards: Vinodh.N(SharePoint developer/administrator).