<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("
");
var $tickercontainer = $strip.parent().wrap("
");
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>
<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>
The first part is working but the second part where start with the <style> and with oneliner is not working. Why the second part is not working ?