scroll ticker on hover question (jquery) ?
I have a ticker which need to sroll up , pause then right ( if item is too long) , pause then up again . I have the scroll kind of working . however , on mouse hover state, the animation doesn't continue right ?
I am looking for any solution for that ?
Here is the code
I am looking for any solution for that ?
Here is the code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>News Ticker with jQuery</title>
<link rel="stylesheet" type="text/css" href="ticker.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var first = 0;
var speed = 2000;
var pause = 10;
var li_Height ;
var li_Width ;
var ticker_Width ;
var end_animate = true;
var position;
$('#navigation a.toplevel').fadeIn(function(){
$('#nextthing').fadeIn(function(){
$('#thenextthing').fadeIn();
});
});
roll();
function roll()
{
try{
if (!end_animate)
return ;
end_animate = false;
var p = $('ul#listticker li:first').css('marginTop');
p = p.replace("px", "");
var s = p /0.02;
if(s <0) s = 0 ;
$('ul#listticker li:first').delay(500).animate({marginTop:0}, s ,function(){
var li_Width = $('ul#listticker li:first a:first').outerWidth(true);
var ticker_Width = 300;
var p = $('ul#listticker li:first ').css('marginLeft');
p = p.replace("px", "");
var dis = li_Width - ticker_Width + 5;
var s = dis/0.04;
if (s < 0) s = 0;
if (dis <0) dis =0;
$('ul#listticker li:first').delay(500).animate({marginLeft:'-'+ dis}, s, "linear",
function(){
var first = $('ul#listticker li:first').html();
var li_Height = $('ul#listticker li:first a:first').outerHeight(true) ;
var s = li_Height/0.02;
$('ul#listticker li:first').delay(1000).animate({marginTop:- (li_Height)},s ,function(){
end_animate = true;
addLast(first);
$(this).remove();
roll();
});
});
});
$('ul#listticker li:first').hover(
function(){
jQuery(this).stop();
// controller.reset();
end_animate = true;
},
function(){
roll();
}
);
}catch(e)
{
alert("roll = " + e.message + e.lineNumber);
}
}
function addLast(first)
{ try{
var last = '<li>'+first+'</li>';
$('ul#listticker').append(last);
$('ul#listticker li:last').animate({opacity: 1}, 2000).fadeIn('slow');
$('ul#listticker li').css("margin",0);
}catch(e) {
alert("addLast error : " + e);
}
}
});
</script>
</head>
<body>
<ul id="listticker">
<li>
<a href="" class="news-title">0=National Geographic Animals</a>
</li>
<li>
<a href="" class="news-title" title="President Obama has announced three bedrock requirements for real health care reform">1=President Obama has announced three bedrock requirements for real health care reform</a>
</li>
<li>
<a href="" class="news-title">2=National Geographic Animals</a>
</li>
<li>
<a href="" class="news-title">3=Spotlight stars</a>
</li>
<li>
<a href="" class="news-title">4=Marilyn Manson is not exactly a conformist. From his music ¿ a meat-grinder...</a>
</li>
</ul>
<br>
<br>
<br>
<br>
</body>
</html>
body{
font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
#listticker{
width: 300px;
height: 27px;
overflow:hidden;
border:solid 1px #000;
padding:0px 10px 0px 0px;
position: relative;
}
#listticker li{
border:0; margin:0; padding:0; list-style:none;
}
#listticker li{
margin-top :5px;
padding:5px;
list-style:none;
}
#listticker a{
color:#000000;
margin-bottom:
}
#listticker .news-title{
font-weight:bold;
margin-bottom:4px;
font-size:11px;
white-space: nowrap;
}
#listticker .news-text{
font-size:11px;
color:#666666;
}
#listticker img{
float:left;
margin-right:14px;
padding:4px;
border:solid 1px #DEDEDE;
}
/* liScroll styles */
.tickercontainer { /* the outer div with the black border */
border: 1px solid #000;
background: #fff;
width: 300px;
height: 27px;
margin-left: 500px;
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: 300px;
/*overflow: hidden;*/
}
ul.newsticker { /* that's your list */
position: relative;
left: 0px;
font: bold 10px Verdana;
list-style-type: none;
margin: 0;
padding: 0;
overflow:hidden;
}
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;
}ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER