This is the first part it's working on my site in this case im using weebly.com for the design and this code is working:

Code:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
<script language='JavaScript'>
$(function(){
 $("ul#ticker01").liScroll();
});
/*!
 * liScroll 1.0
 * Examples and documentation at:
 * http://www.gcmingati.net/wordpress/wp-content/lab/jquery/newsticker/jq-liscroll/scrollanimate.html
 * 2007-2010 Gian Carlo Mingati
 * Version: 1.0.2.1 (22-APRIL-2011)
 * Dual licensed under the MIT and GPL licenses:
 * http://www.opensource.org/licenses/mit-license.php
 * http://www.gnu.org/licenses/gpl.html
 * Requires:
 * jQuery v1.2.x or later
 *
 */


jQuery.fn.liScroll = function(settings) {
  settings = jQuery.extend({
  travelocity: 0.10
  }, settings);  
  return this.each(function(){
    var $strip = jQuery(this);
    $strip.addClass("newsticker")
    var stripWidth = 1;
    $strip.find("li").each(function(i){
    stripWidth += jQuery(this, i).outerWidth(true); // thanks to Michael Haszprunar and Fabien Volpi
    });
    var $mask = $strip.wrap("<div class='mask'></div>");
    var $tickercontainer = $strip.parent().wrap("<div class='tickercontainer'></div>");        
    var containerWidth = $strip.parent().parent().width(); //a.k.a. 'mask' width  
    $strip.width(stripWidth);   
    var totalTravel = stripWidth+containerWidth;
    var defTiming = totalTravel/settings.travelocity; // thanks to Scott Waye  
    function scrollnews(spazio, tempo){
    $strip.animate({left: '-='+ spazio}, tempo, "linear", function(){$strip.css("left", containerWidth); scrollnews(totalTravel, defTiming);});
    }
    scrollnews(totalTravel, defTiming);    
    $strip.hover(function(){
    jQuery(this).stop();
    },
    function(){
    var offset = jQuery(this).offset();
    var residualSpace = offset.left + stripWidth;
    var residualTime = residualSpace/settings.travelocity;
    scrollnews(residualSpace, residualTime);
    });   
  }); 
};
</script>

<style>
/* liScroll styles */

.tickercontainer { /* the outer div with the black border */
border: 1px solid #000;
background: #fff;
width: 500px;
height: 27px;
margin: auto 0;
padding: 0;
overflow: hidden;
}
.tickercontainer .mask { /* that serves as a mask. so you get a sort of padding both left and right */
position: relative;
left: 10px;
top: 8px;
width: 500px;
overflow: hidden;
}
ul.newsticker { /* that's your list */
position: relative;
left: 500px;
font: bold 10px Verdana;
list-style-type: none;
margin: 0;
padding: 0;

}
ul.newsticker li {
float: left; /* important: display inline gives incorrect results when you check for elem's width */
margin: 0;
padding: 0;
background: #fff;
}
ul.newsticker a {
white-space: nowrap;
padding: 0;
color: #ff0000;
font: bold 10px Verdana;
margin: 0 50px 0 0;
}
ul.newsticker span {
margin: 0 10px 0 0;
}
</style>

<ul id="ticker01">
 <li><span>10/10/2007</span><a href="#">The first thing ...</a></li>
 <li><span>10/10/2007</span><a href="#">End up doing is ...</a></li>
 <li><span>10/10/2007</span><a href="#">The code that you ...</a></li>
 <!-- eccetera -->
</ul>

Now i also added this code but what i get is only the Image/Sign of the Breaking News but the two words hello and hi are out of the nreaking news its under it and there is not animation at all its all static:

Code:
<style>
#oneliner {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    position: relative;
    margin: 80px auto 40px auto;
    width: 900px;
    height: 44px;
    background-color: #fff;
    border-radius: 2px;
}

#oneliner:before, #oneliner:after {
    border-radius: 100px 100px 100px 100px / 10px 10px 10px 10px;
    bottom: 0;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
    content: "";
    left: 10px;
    position: absolute;
    right: 10px;
    top: 50%;
    z-index: -1;
}

#oneliner .header {
    background-color: #ff2e2e;
    display: inline-block;
    width: 180px;
    height: 44px;
    text-transform: uppercase;
    font-weight: 500;
    line-height: 44px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-align: center;
    border-radius: 2px 0 0 2px;
    cursor: pointer;
    -webkit-transition: all .2s ease-in-out;
       -moz-transition: all .2s ease-in-out;
        -ms-transition: all .2s ease-in-out;
         -o-transition: all .2s ease-in-out;
            transition: all .2s ease-in-out;
    -webkit-animation: redPulse 4s infinite;
       -moz-animation: redPulse 4s infinite;
            animation: redPulse 4s infinite;
}

#oneliner:hover .header {
    -webkit-animation: redPulse 1s infinite;
       -moz-animation: redPulse 1s infinite;
            animation: redPulse 1s infinite;
}

#oneliner .header:active {
    background-color: #000;
    margin-left: -12px;
    color: #aaa;
}

#oneliner ul.newsticker {
    display: inline-block;
    height: 44px;
    width: 710px;
    overflow: hidden;
    margin: 0 0 0 -3px;
    padding: 0 0 0 6px;
    line-height: 44px;
    font-weight: 500;
    background-color: #fafafa;
}

#oneliner ul.newsticker > li{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    border-bottom: 1px dotted #888;
}

@-webkit-keyframes redPulse {
    from { background-color: #ff2e2e; -webkit-box-shadow: 0 0 9px #555; }
    50% { background-color: #bd0000; -webkit-box-shadow: 0 0 14px #ff2e2e; }
    to { background-color: #ff2e2e; -webkit-box-shadow: 0 0 9px #555; }
}

@-moz-keyframes redPulse {
    from { background-color: #ff2e2e; -moz-box-shadow: 0 0 9px #555; }
    50% { background-color: #bd0000; -moz-box-shadow: 0 0 14px #ff2e2e; }
    to { background-color: #ff2e2e; -moz-box-shadow: 0 0 9px #555; }
}

@keyframes redPulse {
   from { background-color: #ff2e2e; box-shadow: 0 0 9px #555; }
   50% { background-color: #bd0000; box-shadow: 0 0 14px #ff2e2e; }
   to { background-color: #ff2e2e; box-shadow: 0 0 9px #555; }
}
</style>

<div id="oneliner">
    <div class="header"> Breaking News </div>
    <ul class="newsticker">
        <li>hello</li>
        <li>hi</li>
    </ul>
</div>

This is the demo web site i downloaded the files from and it show also how it should look like the first example with the Breaking News. I see the Breaking News but the words/text is under it in a new line and not moving at all like in the demo.

Like in the working code at the top i dont want to upload the files to my site and use them. Why the oneliner the second code is not working ? Could someone show me the complete code how it should look like ?

http://www.jqueryscript.net/demo/Fle...d-News-Ticker/

I want it to be on my site with the Breaking News in red and the text inside scrolling up.