news ticker tape on sharepoint list SP 2013

Question

At the top of my sharepoint list view, I am wanting to add in a vertical news ticker feed, similar to this:

http://risq.github.io/jquery-advanced-news-ticker/

I have tried four approaches so far without luck - all code has been put into a CEWP, using SP2013

In many cases the text is not displayed on the screen, and when it is displayed, there is no animation.

Approach 1. Adopted from Write items from a SP list to html

Result: text is displayed, no animation.

<div class="title"><p>On:trac News</p></div>
<div class="cont"><ul id="ticker">
<li>News item one.</li>
<li>News item two.</li>
<li>News item three.</li>
<li>News item four.</li>
<li>News item five.</li>
<li>News item six.</li>

</ul></div>        

</asp:Content>

<script src="https://.../jquery-1.11.3.js"></script>

<script src="https://.../jquery.SPServices-2014.02.js"></script>

<script src="https://.../newsticker.js"></script>

<script type=”text/javascript”>
 $(document).ready(function() {
  function tick() {
        $('#ticker li:first').slideUp(function () { $(this).appendTo($('#ticker')).slideDown(); });
    }
    setInterval(function () { tick() }, 5000);
});

Approach 2 adopted from http://blog.sprider.org/2012/08/27/jquery-news-ticker-out-of-the-box/

Result: Nothing is displayed.

<script src="https://.../jquery-1.11.3.js"></script>

<script src="https://.../jquery.SPServices-2014.02.js"></script>

<script src="https://.../newsticker.js"></script>

 <style type=”text/css”>
 .newsticker {
  list-style-type: none;
 }
 </style>

<script type=”text/javascript”>
 $(document).ready(function() {

var liHtml = “<li> Hi</li>”;
 $(“#news”).append(liHtml);

var liHtml = “<li> Hi 2</li>”;
$(“#news”).append(liHtml);

var liHtml = “<li> Hi 3</li>”;
$(“#news”).append(liHtml);

   $(“#news”).newsTicker();
 )}
 </script>

<div id=”newsticker”>
 <ul id=”news”/>
 </div>

Approach 3 adopted from http://risq.github.io/jquery-advanced-news-ticker/

Result: No animation.

<style>
ul#nt-title {
width: 220px;
height: 120px;
overflow: hidden;
}

ul#nt-title  li {
width: 200px;
height: 99px;
padding: 10px;
border-bottom: 1px dashed #ccc;
}

ul#nt-title li a {
color: #666;
}

ul#nt-title li span {
display: block;
color: #06C;
}
</style>
<!-- Fixed navbar -->

                <div id="nt-title-container">
                    <ul id="nt-title" style="list-style: none; ">
                        <li>
                            A powerful, flexible and animated vertical news ticker plugin.
                        </li>
                        <li>
                            Provides hight flexibility thanks to numerous callbacks & methods.
                        </li>
                        <li>
                            Fully customizable to every kind of vertical scrolling need.
                        </li>
                        <li>
                            Light-weight and optimized JQuery plugin.
                        </li>
                    </ul>
                </div>
<script src="https://.../jquery-1.11.3.js"></script>

<script src="https://.../jquery.SPServices-2014.02.js"></script>

<script src="https://.../newsticker.js"></script>

<script type=”text/javascript”>
 $(document).ready(function() {

$('a[href*=#]').click(function(e) {
            var href = $.attr(this, 'href');
            if (href != "#") {
                $('html, body').animate({
                    scrollTop: $(href).offset().top - 81
                }, 500);
            }
            else {
                $('html, body').animate({
                    scrollTop: 0
                }, 500);
            }
            return false;
        });

        // header news ticker
        var nt_title = $('#nt-title').newsticker({
            row_height: 80,
            max_rows: 1,
            duration: 3000,
            pauseOnHover: 0
        });

})

</script>

Approach 4 adopted from http://www.yourinspirationweb.com/en/jquery-how-to-create-a-news-ticker-with-just-a-few-javascript-lines/

Result : No animation.

<style>
ul#nt-title {
width: 220px;
height: 120px;
overflow: hidden;
}

ul#nt-title  li {
width: 200px;
height: 99px;
padding: 10px;
border-bottom: 1px dashed #ccc;
}

ul#nt-title li a {
color: #666;
}

ul#nt-title li span {
display: block;
color: #06C;
}
</style>
<!-- Fixed navbar -->

<div id="nt-title-container">
    <ul id="nt-title" style="list-style: none; ">
                <li>
                A powerful, flexible and animated vertical news ticker plugin.
               </li>
               <li>
        Provides hight flexibility thanks to numerous callbacks & methods.
          </li>
          <li>
                Fully customizable to every kind of vertical scrolling need.
          </li>
          <li>
                Light-weight and optimized JQuery plugin.
              </li>
                  </ul>
        /div>
<script src="https://.../jquery-1.11.3.js"></script>

<script src="https://.../jquery.SPServices-2014.02.js"></script>

<script src="https://.../newsticker.js"></script>

<script type=”text/javascript”>
 $(document).ready(function() {
    var ticker = function()
{
    setTimeout(function(){
        $('#nt-title li:first').animate( {marginTop: '-120px'}, 800, function()
        {
            $(this).detach().appendTo('ul#nt-title').removeAttr('style');
        });
        ticker();
    }, 4000);
};
ticker();
});

ticker();
</script>

Any suggestions on where I am going wrong?

Answer 1

The solution from Danny dannydelott.com/a-recursive-settimeout-v-s-setinterval was great, but ended up picking up some code from

http://www.dynamicdrive.com/dynamicindex2/fadescroll.htm

Seems to be quite a lot of useful effects on this site, and the fadescroll managed to do what I needed. Basically set up the DIV placeholder in a CEWP, then add all the code you need into some Javascript attached to the body of the list. Its easy enough to customise the code you need to product the effects you need in the HTML.