newsticker-jquery

**madu** · 09-15-2010, 08:23 PM

hi,
i was looking for a effect like http://twitter.com/. finally i found it.

this is the demo which i found http://woorktuts.110mb.com/newstickerjq/index.html

but i have massive problem, that it is not smoother like twitter.
when top image disappear, other images are come-up. may this move up be smooth like twitter, it'll great. this is the javascript

Code:

<script type="text/javascript">
$(document).ready(function(){
	
	var first = 0;
	var speed = 700;
	var pause = 3500;
	
		function removeFirst(){
			first = $('ul#listticker li:first').html();
			$('ul#listticker li:first')
			.animate({opacity: 0}, speed)
			.fadeOut('slow', function() {$(this).remove();});
			addLast(first);
		}
		
		function addLast(first){
			last = '<li style="display:none">'+first+'</li>';
			$('ul#listticker').append(last)
			$('ul#listticker li:last')
			.animate({opacity: 1}, speed)
			.fadeIn('slow')
		}
	
	interval = setInterval(removeFirst, pause);
});
</script>

can any one help me? Grateful for any help!

**M rosi** · 09-16-2010, 05:47 AM

may be you found it through my thread

anyway why don't you use

Code:

<script type="text/javascript">
$(document).ready(function(){
	
	var speed = 700;
	var pause = 3500;
	
	function newsticker()
	{
	    last = $('ul#listticker li:last').hide().remove();
	    $('ul#listticker').prepend(last);
        $('ul#listticker li:first').slideDown("slow");
	}
	
	interval = setInterval(newsticker, pause);
});
</script>

**madu** · 09-16-2010, 06:01 AM

Sorry!!!

i found it from http://woork.blogspot.com/

and thank you for alternative solution

but it is not sufficient. would you mine telling me how to change this code to "images move up smoothly".

thank you

**madu** · 09-16-2010, 07:03 AM

is it a problem with this jquery

<script type="text/javascript" src="jquery.js"></script>

please someone help me..........

**M rosi** · 09-16-2010, 09:23 AM

ah! it's OK.
may jscheuer1 will help you as he helped me....

**jscheuer1** · 09-16-2010, 03:46 PM

Note: I've updated the version of jQuery used. You can download a copy of it and host it yourself if you like (right click and 'save as'):

http://ajax.googleapis.com/ajax/libs.../jquery.min.js

This update is required.

There were also numerous changes, several to style, several to the markup, use of CDATA comment delimiters, etc. to make the page valid for its DOCTYPE and efficiency.

Looks just like the Twit version now, only a little better in IE:

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>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
jQuery(function($){

	var slideSpeed = 700;
	var fadeInSpeed = 1000;
	var fadeOutSpeed = 'normal';
	var pause = 3500;
	var start = true;

	function newsticker(){
		$('ul#listticker li').last().fadeOut(fadeOutSpeed, function(){
			$('ul#listticker').prepend($(this).remove());
			
		});
		if(!start){
			$('ul#listticker li').first().css({opacity: 0}).slideDown(slideSpeed, function(){
				$(this).animate({opacity: 1}, fadeInSpeed, function(){
					if(this.style.removeAttribute){
						this.style.removeAttribute('filter');
					}
				});
			});
		}
		start = false;
	}

	newsticker();
	var interval = setInterval(newsticker, pause);
});
/* ]]> */
</script>
<style type="text/css">
body{
	font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
}
#listticker{
	height:200px;
	width:400px;
	overflow:hidden;
	border:solid 1px #dedede;
	padding:6px 10px 14px 10px;;
}
#listticker li{
	border:0; margin:0; padding:0; list-style:none;
}

	#listticker li{
		height:60px;
		padding:5px;
		list-style:none;
	}
		#listticker a{
			color:#000;
		}
		#listticker .news-title{
			display:block;
			font-weight:bold;
			margin-bottom:4px;
			font-size:11px;
		}
		#listticker .news-text{
			display:block;
			font-size:11px;
			color:#666;
		}
		#listticker img{
			float:left;
			margin-right:14px;
			padding:4px;
			border:solid 1px #dedede;
		}
</style>

</head>

<body>
<ul id="listticker">
	<li>
		<img src="1.png" alt="" />
		<a href="" class="news-title">Health care reform</a>
		<span class="news-text">President Obama has announced three bedrock requirements for real health care reform</span>
	</li>
	<li>
		<img src="2.png" alt="" />
		<a href="" class="news-title">National Geographic Animals</a>
		<span class="news-text">Killer whales, Bengal tigers, crocs, more</span>
	</li>
	<li>
		<img src="3.png" alt="" />
		<a href="" class="news-title">Spotlight stars</a>
		<span class="news-text">Marilyn Manson is not exactly a conformist. From his music — a meat-grinder...</span>
	</li>
	<li>
		<img src="4.png" alt="" />
		<a href="" class="news-title">Lost: the new serie is coming</a>
		<span class="news-text">Watch full episodes online. The final season begins early 2010</span>
	</li>
</ul>
</body>
</html>

Demo:

http://home.comcast.net/~jscheuer1/side/news_ticker/

**madu** · 09-16-2010, 05:07 PM

WOW. it's working nicely. thank you jscheuer1.
but there is two problems.

In the original script by changing the css
Code:
```
#listticker{
	height:200px;
	width:400px;
	overflow:hidden;
	border:solid 1px #dedede;
	padding:6px 10px 14px 10px;;
}
```
it can be change the number of rows.
but in this modified script it is showing only 3 rows.it can not be change the number of rows.
.
can it be rotate to up side(not down)

billion thanx jscheuer1.

**jscheuer1** · 09-16-2010, 05:26 PM

Works fine here, just change it to 133px for 2 items seen at once. If you want it bigger though, you need more items.
Almost certainly, after a bit of work, even an option for either and/or a button to toggle.

**madu** · 09-16-2010, 09:36 PM

yes jscheuer 1st one is OK. thanx.

and still i'm fighting to success. but this is seems to be never rotate to upward for me.

help will be needed

**jscheuer1** · 09-22-2010, 03:26 PM

This turned out to be more difficult in some ways than I imagined, and I got distracted.

I realized that limiting the size of the ul lost the effect on the items entering from the bottom, so fixed that.

I added more of a parity to items entering and leaving visa vis a sort of mirror image of the transitions' appearance. I think it looks smoother this way. Hope you like it. Also added is a mouseover pause.

I still can't figure out how to have a reverse function as the code for the two directions is still very different. But I'll be working on that.

Demo

Thread: newsticker-jquery

Thread Tools

Search Thread

newsticker-jquery

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions