[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 481
  • Last Modified:

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

<!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;
}

Open in new window

0
actonwang
Asked:
actonwang
1 Solution
 
CKY092Commented:
http://jsfiddle.net/boisebrewer/LtJn8/

Just had to remove:  jQuery(this).stop();

0
 
actonwangAuthor Commented:
we changed the way we do it on this.
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now