Easy SharePoint Newsticker with Jquery

There are many posts already out there in which is described how to make a news ticker with jquery. In this post i would like to share a really easy implementation of a possible solution. You only need to add a content query webpart and configure it. Afterwords you insert jquery into the site and it is working.

Step 1: Add a Content Query Webpart

Configure it for your needs. In my example i configured the query to use only my news list and where the display date is greater than today.

NewsTicker1

The presentation i configured like this: Display only 3 items. Formatting with title and background

NewsTicker2

I’d like to mention, that you can choose different styles for the display of the items. In this post it is described how to define your own style.

And the normal output is now like this:

NewsTicker3

It display 3 news from 4.

Step 2: Add Jquery to your site

Now open SharePoint Designer and open the page in advanced mode. In the placeholder PlaceHolderAdditionalPageHead insert the following scripts and styles:

[sourcecode language=”csharp”]


[/sourcecode]

Afterwords it slides the newsticker. Great thing and i wanna say thanks to this post.

NewsTicker4

This is really cool.

The article or information provided here represents completely my own personal view & thought. It is recommended to test the content or scripts of the site in the lab, before making use in the production environment & use it completely at your own risk. The articles, scripts, suggestions or tricks published on the site are provided AS-IS with no warranties or guarantees and confers no rights.

About Karsten Schneider 312 Articles
Consultant for Microsoft 365 Applications with a strong focus in Teams, SharePoint Online, OneDrive for Business as well as PowerPlatform with PowerApps, Flow and PowerBI. I provide Workshops for Governance & Security in Office 365 and Development of Solutions in the area of Collaboration and Teamwork based on Microsoft 365 and Azure Cloud Solutions. In his free time he tries to collect tipps and worthy experience in this blog.

3 Comments

Leave a Reply to mala Cancel reply

Your email address will not be published.


*