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">
  3. #NewsTicker
  4. {
  5. width: 844px;
  6. margin: auto;
  7. }
  9. #NewsTicker ul li div
  10. {
  11. height:30px;
  12. background: Yellow;
  13. }
  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. }
  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).