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.

visual studio

Step 2

Create a new project and select SharePoint 2013 Empty project.

SharePoint 2013 Empty project

Step 3

Deploy as a Farm Solution.

Deploy as a Farm Solution

Step 4

Add a new item into the empty SharePoint project.

add new item

Step 5

Create a new Visual webpart.

Step 6

Now add the jQuery references into the SharePoint LAYOUTS Folder.

SharePoint LAYOUTS Folder

Step 7

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

Design

Just add a ticker activities into it.

  1. < script > $(document).ready(function() {  
  2.     $('#NewsTicker').vTicker({  
  3.         speed: 500,  
  4.         /*Speed of the feed message*/  
  5.         pause: 3000,  
  6.         /*Pause time*/  
  7.         showItems: 1,  
  8.         /*No of News to display*/  
  9.         animation: 'fade',  
  10.         /*animation styles*/  
  11.         mousePause: true,  
  12.         /* pause when hover */  
  13.         direction: 'up' /*Text direction*/  
  14.     });  
  15. }); < /script>  
Add a simple style for the NewsTicker
  1. <style type="text/css" media="all">  
  2.  
  3.     #NewsTicker  
  4.     {  
  5.         width: 844px;   
  6.         margin: auto;  
  7.     }  
  8.  
  9.     #NewsTicker ul li div  
  10.     {  
  11.         height:30px;  
  12.         background: Yellow;  
  13.     }  
  14.   
  15.     <div style="width:1310px; height:30px; border-style:solid; border-width:2px; border-color:#FFCB05">  
  16.         <div style="float:left;background-color:White; height: 27px; width: 118px;">  
  17.             <h2 style="font-family:Arial; font-size:22px; background-color:#FFCB05; color:Black;">News</h2>  
  18.         </div>  
  19.         <div id="NewsTicker" style="float:left; padding-left:15px; font-size:24px; font-family:Arial; height: 29px;">  
  20.             <ul style="width: 920px">  
  21.                 <asp:Literal ID="ltNews" runat="server" Text=""></asp:Literal>  
  22.             </ul>  
  23.         </div>  
  24.     </div>  
  25. </style>  
Now to bind the list

Add these two namespaces.
  1. using System.Text;  
  2. using Microsoft.SharePoint;  
Code
  1. private void BindData()   
  2. {  
  3.     Guid siteId = SPContext.Current.Site.ID;  
  4.     Guid webId = SPContext.Current.Web.ID;  
  5.     StringBuilder sb = new StringBuilder();  
  6.     SPSecurity.RunWithElevatedPrivileges(delegate   
  7.     {  
  8.         using(SPSite site = new SPSite(siteId))   
  9.         {  
  10.             using(SPWeb web = site.OpenWeb(webId))   
  11.             {  
  12.                 SPList list = web.Lists.TryGetList("News"); /*Create the list*/  
  13.                 if (list != null)   
  14.                 {  
  15.                     foreach(SPListItem item in list.Items)   
  16.                     {  
  17.                         sb.AppendLine("<li>");  
  18.                         sb.AppendLine("<div>");  
  19.                         sb.AppendLine(item.Title); /*Get the title column*/  
  20.                         sb.AppendLine("</div>");  
  21.                         sb.AppendLine("</li>");  
  22.                     }  
  23.                 }  
  24.   
  25.             }  
  26.         }  
  27.     });  
  28.     ltNews.Text = sb.ToString();  
  29. }  

Step 8

Now save and deploy.

solutions 

Step 9

So the solutions have been deployed now.

Go to the site.

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

News

Step 10

The news lists have two feeds.

news lists

Step 11

Add a Newsfeed webpart from the “Custom” tab.

Custom

Add a Newsfeed

webpart

webpart

So we can use this newsfeed dynamically.

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

 

Up Next
    Ebook Download
    View all
    Learn
    View all