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:



<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.js"></script>
<script type="text/javascript">
setInterval(function(){
$('.dfwp-list li:first').slideUp( function () {
$(this).appendTo($('.dfwp-list')).slideDown();
});
}, 5000);

</script>
<style type="text/css">
/*News **/
.dfwp-list {
height: 110px;
overflow: hidden;

}
.dfwp-list li {
display: block;
border-bottom: 1px dotted #fff;
height: 30px;
}

</style>


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.

Karsten Pohnke About Karsten Pohnke
He is Consultant for SharePoint Solutions for collaboration, communication and business processes. He provides his customers applications based on standard features as well as development or combining the power of several microsoft tools like Dynamics CRM. In his free time he tries to collect tipps and worthy experience in this blog.

3 comments on “Easy SharePoint Newsticker with Jquery

    • Reduce the size of the list container .dfwp-list so it matches the height

  1. or in the webpart properties you can reduce the limit of items to one. in my screenshot there is a part where a “3” is inserted. That’s the point where you should look at.

Submit comment

Allowed HTML tags: <a href="http://google.com">google</a> <strong>bold</strong> <em>emphasized</em> <code>code</code> <blockquote>
quote
</blockquote>

Please fill in the captcha: * Time limit is exhausted. Please reload CAPTCHA.