none
implement a news ticker on sp 2013 home page RRS feed

  • Question

  • Hello,

    I want to implement a horizontal scrolling news ticker on our home page in sp 2013 site. Basically i was planning to store news in announcement section ( title column ) and on the home page the news should scroll left to right or any direction is fine.

    Would you be kind enough to help with the jquery or js code to implement this ? we only have SCA access on the site and can only do front end development. We don't have access to central admin nor the server.

    Thank you.

    Monday, August 28, 2017 11:24 AM

Answers

  • Hi,

    We can use REST API with jQuery Ajax to get the data from announcement list, and using jQuery plugin to achieve news ticker.

    Here is an example for your reference:

    1. Create an announcement list("News") and add some items.

    2. Download the jquery.ticker.js file and ticker-style.css file from GitHub:

    https://github.com/rhodimus/jQuery-News-Ticker

    3. Upload the jquery.ticker.js file and ticker-style.css file  into Site Assets document library(path: "/sites/team/SiteAssets").

    4. Add the code below into a Script Editor web part in home page.

    <div id="NewsTicker">
    </div>
    <link href="/sites/team/SiteAssets/ticker-style.css" rel="stylesheet" type="text/css"/>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js" type="text/javascript"></script>
    <script src="/sites/team/SiteAssets/jquery.ticker.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function(){
    	initNews("News");
    	$('#js-news').ticker({
    		speed: 0.10,
                    titleText: 'News' 
    	});
    });
    function initNews(listName){
    	var selectedItems=new Array();
    	// begin work to call across network
    	var requestUri = _spPageContextInfo.webAbsoluteUrl +
    				  "/_api/web/lists/getbytitle('"+listName+"')/items";
    	// execute AJAX request
    	$.ajax({
    		url: requestUri,
    		type: "GET",
    		async: false,
    		headers: { "ACCEPT": "application/json;odata=verbose" },
    		success: function (data) {
    			var html="<ul id='js-news'>";
    			var items=data.d.results;				
    			for(var i=0;i<items.length;i++){
    				var item=items[i];
    				html+="<li><div>"+item.Title+"</div></li>";
    			}
    			html+="</ul>"
    			$('#NewsTicker').html(html);
    		},
    		error: function () {
    			//alert("Failed to get details");
    		}
    	});
    }
    </script>

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com



    Tuesday, August 29, 2017 4:42 AM
    Moderator
  • Take a look at the following:

    https://blog.sprider.org/2012/08/27/jquery-news-ticker-out-of-the-box/


    Paul Stork SharePoint Server MVP
    Owner/Principal Architect: Don't Pa..Panic Consulting
    Blog: http://dontpapanic.com/blog
    Twitter: Follow @pstork
    Please remember to mark your question as 'answered' if this solves your problem.

    • Marked as answer by John.P.Smith Tuesday, August 29, 2017 8:21 AM
    Monday, August 28, 2017 11:41 AM

All replies

  • Take a look at the following:

    https://blog.sprider.org/2012/08/27/jquery-news-ticker-out-of-the-box/


    Paul Stork SharePoint Server MVP
    Owner/Principal Architect: Don't Pa..Panic Consulting
    Blog: http://dontpapanic.com/blog
    Twitter: Follow @pstork
    Please remember to mark your question as 'answered' if this solves your problem.

    • Marked as answer by John.P.Smith Tuesday, August 29, 2017 8:21 AM
    Monday, August 28, 2017 11:41 AM
  • Hi,

    We can use REST API with jQuery Ajax to get the data from announcement list, and using jQuery plugin to achieve news ticker.

    Here is an example for your reference:

    1. Create an announcement list("News") and add some items.

    2. Download the jquery.ticker.js file and ticker-style.css file from GitHub:

    https://github.com/rhodimus/jQuery-News-Ticker

    3. Upload the jquery.ticker.js file and ticker-style.css file  into Site Assets document library(path: "/sites/team/SiteAssets").

    4. Add the code below into a Script Editor web part in home page.

    <div id="NewsTicker">
    </div>
    <link href="/sites/team/SiteAssets/ticker-style.css" rel="stylesheet" type="text/css"/>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js" type="text/javascript"></script>
    <script src="/sites/team/SiteAssets/jquery.ticker.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function(){
    	initNews("News");
    	$('#js-news').ticker({
    		speed: 0.10,
                    titleText: 'News' 
    	});
    });
    function initNews(listName){
    	var selectedItems=new Array();
    	// begin work to call across network
    	var requestUri = _spPageContextInfo.webAbsoluteUrl +
    				  "/_api/web/lists/getbytitle('"+listName+"')/items";
    	// execute AJAX request
    	$.ajax({
    		url: requestUri,
    		type: "GET",
    		async: false,
    		headers: { "ACCEPT": "application/json;odata=verbose" },
    		success: function (data) {
    			var html="<ul id='js-news'>";
    			var items=data.d.results;				
    			for(var i=0;i<items.length;i++){
    				var item=items[i];
    				html+="<li><div>"+item.Title+"</div></li>";
    			}
    			html+="</ul>"
    			$('#NewsTicker').html(html);
    		},
    		error: function () {
    			//alert("Failed to get details");
    		}
    	});
    }
    </script>

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com



    Tuesday, August 29, 2017 4:42 AM
    Moderator
  • Thanks so much Dennis !! Works like a charm. I really appreciate your kind help. 

    Thanks agian. :)

    Tuesday, August 29, 2017 8:21 AM
  • Thank You Paul, for sending this pointer. This was very helpful to understand the concept. I wasn't able to get it working on my machine, but that's probably because i was doing something wrong at my end. I will try to debug that. Meanwhile I was able to replicate the solution given by Dennis below. 


    Tuesday, August 29, 2017 8:27 AM
  • <div id="NewsTicker">
    </div>
    <link href="../SiteAssets/News%20Ticker/ticker-style.css" rel="stylesheet" type="text/css"/>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js" type="text/javascript"></script>
    <script src="../SiteAssets/News%20Ticker/jquery.ticker.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function(){
    initNews("News");
    $('#js-news').ticker({
    speed: 0.10,
                    titleText: 'News' 
    });
    });
    function initNews(listName){
    var selectedItems=new Array();
    // begin work to call across network
    var requestUri ="http://intra.works.gov.bh/DirectoratesUnits/Minister/UndersecretaryPublic/AUS%20Human%20%20Financial%20Resources/Human%20Resources%20Directorate/_api/web/lists/getbytitle('Circular and Announcements')/items";
    // execute AJAX request
    $.ajax({
    url: requestUri,
    type: "GET",
    async: false,
    headers: { "ACCEPT": "application/json;odata=verbose" },
    success: function (data) {
    var html="<ul id='js-news'>";
    var items=data.d.results;
    for(var i=0;i<items.length;i++){
    var item=items[i];
    html+="<li><div>"+item.Title+"</div></li>";
    }
    html+="</ul>"
    $('#NewsTicker').html(html);
    },
    error: function () {
    //alert("Failed to get details");
    }
    });
    }
    </script>

    The following Error i get when script runs:

    SCRIPT438: Object doesn't support property or method 'ticker'

    Monday, November 5, 2018 8:07 AM