PDA

View Full Version : 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

<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 :D
anyway why don't you use

<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!!! :p
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/1.4.2/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:


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


#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. :mad:

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 (http://home.comcast.net/~jscheuer1/side/news_ticker/up.htm)

madu
09-27-2010, 03:32 AM
sorry for very late reply. thank you very much. it seems to be my problem tired you lot. for for that. this modification is much more sufficient for me.
million thanx jscheuer :)

inderjeetsinghsethi
09-29-2010, 11:34 AM
perfect ticker dude,
nice work jscheuer1.

can u please suggest me something
can we control this ticker by button , like two button one above and other to bottom, on click ticker move to upside and downward. and pause on to the mouse over.

ur replies would be appreciable.
thanks and regards
Inderjeet Singh Khalsa

jscheuer1
09-29-2010, 12:53 PM
Already pauses onmouseover. I'm working on change direction.

inderjeetsinghsethi
09-29-2010, 01:47 PM
pause not working on mouse over, here is what i am using



<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</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>
<script type ="text/javascript">

var slideSpeed = 700;
var fadeInSpeed = 1000;
var fadeOutSpeed = 1000;
var pause = 5500;
var start = true;
var end = false;

function ClickMeTicker(){


$('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;
}


</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>
<form runat="server" id="frm">

<ul id="listticker">
<li>

<a href="" class="news-title">Health care reform----1</a>
<span class="news-text">President Obama has announced three bedrock requirements for real health care reform</span>
</li>
<li>

<a href="" class="news-title">National Geographic Animals----2</a>
<span class="news-text">Killer whales, Bengal tigers, crocs, more</span>
</li>
<li>

<a href="" class="news-title">Spotlight stars----3</a>
<span class="news-text">Marilyn Manson is not exactly a conformist. From his music — a meat-grinder...</span>
</li>
<li>

<a href="" class="news-title">Lost: the new serie is coming----4</a>
<span class="news-text">Watch full episodes online. The final season begins early 2010</span>
</li>

<li>

<a href="" class="news-title">National Geographic Animals----5</a>
<span class="news-text">Killer whales, Bengal tigers, crocs, more</span>
</li>
<li>

<a href="" class="news-title">Spotlight stars----6</a>
<span class="news-text">Marilyn Manson is not exactly a conformist. From his music — a meat-grinder...</span>
</li>
<li>

<a href="" class="news-title">Lost: the new serie is coming----7</a>
<span class="news-text">Watch full episodes online. The final season begins early 2010</span>
</li>

</ul>


<input id="Button2" type="button" value="Click" onclick="ClickMeTicker();" />
</form>
</body>
</html>

jscheuer1
09-29-2010, 02:18 PM
Latest version (so far) from post #10 in this thread:

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

Use your browser's 'view source' to get the code.

inderjeetsinghsethi
09-30-2010, 11:17 AM
hello john,
u help me a lot,

solve out one more problem

i want to manage the news at the click event

like if one news has been passed, than if u click on down button,
ur news move down a step.


this is the edited code u sent....

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</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;
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>



<style type="text/css">
.listticker {
width: 400px;
overflow: hidden;
border: 1px solid #dedede;
}
.listticker li {
margin: 0;
padding: 5px;
border: none;
list-style-type: none;
}
.listticker a {
color: #000;
}
.listticker .news-title {
display: block;
font-weight: bold;
margin-bottom: 4px;
background-color: #fff;
}
.listticker .news-text {
color: #444;
background-color: #fff;
}
.listticker img {
float: left;
margin-right: 14px;
padding: 4px;
border: 1px solid #dedede;
}
</style>
<script type="text/javascript">
/* News Ticker Up Script (c)2010 John Davenport Scheuer
as first seen in http://www.dynamicdrive.com/forums/
username: jscheuer1 - This Notice Must Remain for Legal Use
*/
jQuery(function($){

alert('coming');
var fadeInSpeed = 1300;
var fadeOutSpeed = 1000;
var pause = 3500;
var visibleItems = 4; // must be at least one less than toatal number of items, adjust height of the ticker ul element accordingly or use
var autoCalHeight = true; // true here to have the script do it (requires all items be of the same height), use false to set ul height in style


/* No need to edit below this line */


//This Region Named (animated-div ) region is worked becoz of the animate function
//animate(Properties,Duration,Easing,CallBackFunction)
//height: $('ul.listticker li').first().outerHeight(true) * visibleItems :-this line
// calculate the height of the ul and perform animation on to the calculated height in time 1300 time interval
//Thanks and Regards
//Inderjeet Singh Sethi

//Region animated-div Start
if(autoCalHeight){
$('ul.listticker').animate({height: $('ul.listticker li').first().outerHeight(true) * visibleItems}, 1300);
alert($('ul.listticker li').first().outerHeight(true) * visibleItems);
}
//Region animated-div End


var isPaused = false, overflow, ie7 = 0, removeFilter;
/*@cc_on @*/
/*@if(@_jscript_version >= 5)
ie7 = $.browser.version < 8? 16 : 0;
@end @*/



// Region Pause on to the Mouse Over Button Start
if(
$("#Button2").mouseover
(
function()
{
isPaused = true;
}
).mouseout
(
function()
{
isPaused = false;
}
)
.find('li').size() > visibleItems + 1
)

// Region Pause on to the Mouse Over Button End


// Region Pause on to the Mouse Over On to the News Starts from here

{
overflow = $('<div>');
while($('ul.listticker li').size() > visibleItems + 1)

{
overflow.append
(
$('ul.listticker li').last()
);
}
}




if($('ul.listticker').hover(function(){isPaused = true;}, function(){isPaused = false;}).find('li').size() > visibleItems + 1){
overflow = $('<div>');
while($('ul.listticker li').size() > visibleItems + 1){
overflow.append($('ul.listticker li').last());
}
}

removeFilter = document.body.style.removeAttribute? function(){
this.style.removeAttribute('filter');
} : function(){};


// Region Pause on to the Mouse Over On to the News Ends here



function newsticker(){

// Region Check the Pause action Fired or not Starts
if(isPaused){
return;}
// Region Check the Pause action Fired or not Ends


$('ul.listticker li').first().css({position: ie7? 'relative' : ''}).animate({opacity: 0, paddingTop: 0, paddingBottom: 0, height: 0, marginTop: -ie7, top: ie7}, fadeOutSpeed, function(){
if(overflow){

overflow.prepend(this);

$('ul.listticker').append(overflow.find('li').last());
//alert(overflow.find('li').last());
} else {
$('ul.listticker').append(this);
}
}).end().last().css({opacity: 0, padding: '', height: '', margin: '', position: '', top: ''}).delay(300).animate({opacity: 1}, fadeInSpeed, removeFilter);
}

var interval = setInterval(newsticker, pause);
});
</script>
</head>
<body>
<form runat="server" id="frm">

<input id="Button1" type="button" value="Click" />
<ul id="listticker" class="listticker">
<li>

<a href="" class="news-title">Health care reform----1</a>
<span class="news-text">President Obama has announced three bedrock requirements for real health care reform</span>
</li>
<li>

<a href="" class="news-title">National Geographic Animals----2</a>
<span class="news-text">Killer whales, Bengal tigers, crocs, more</span>
</li>
<li>

<a href="" class="news-title">Spotlight stars----3</a>
<span class="news-text">Marilyn Manson is not exactly a conformist. From his music — a meat-grinder...</span>
</li>
<li>

<a href="" class="news-title">Lost: the new serie is coming----4</a>
<span class="news-text">Watch full episodes online. The final season begins early 2010</span>
</li>

<li>

<a href="" class="news-title">National Geographic Animals----5</a>
<span class="news-text">Killer whales, Bengal tigers, crocs, more</span>
</li>
<li>

<a href="" class="news-title">Spotlight stars----6</a>
<span class="news-text">Marilyn Manson is not exactly a conformist. From his music — a meat-grinder...</span>
</li>
<li>

<a href="" class="news-title">Lost: the new serie is coming----7</a>
<span class="news-text">Watch full episodes online. The final season begins early 2010</span>
</li>

</ul>


<input id="Button2" type="button" value="Click" />


<script type ="text/javascript">

// var slideSpeed = 700;
// var fadeInSpeed = 1000;
// var fadeOutSpeed = 1000;
// var pause = 3500;
// var start = true;
// var end = false;

var fadeInSpeed = 1300;
var fadeOutSpeed = 1000;
var pause = 3500;
var visibleItems = 4; // must be at least one less than toatal number of items, adjust height of the ticker ul element accordingly or use
var autoCalHeight = true; // true here to have the script do it (requires all items be of the same height), use false to set ul height in style
var interval=0;
var timeout=1;


var isPaused = false, overflow, ie7 = 0, removeFilter;



$('#Button2').click(function() {
//alert('i am Called');

// $('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;


while(timeout!=1)
{
timeout=timeout-1;
}


if(timeout==1) {
alert('clicked');
clearTimeout(timeout);
timeout = null;


$('ul.listticker li').last().css({position: ie7? 'relative' : ''}).animate({opacity: 0, paddingTop: 0, paddingBottom: 0, height: 0, marginTop: -ie7, top: ie7}, fadeOutSpeed, function(){

if(overflow){

overflow.append(this);

$('ul.listticker').prepend(overflow.find('li').first());
//alert(overflow.find('li').last());
} else {
$('ul.listticker').prepend(this);
}
}).end().first().css({opacity: 0, padding: '', height: '', margin: '', position: '', top: ''}).delay(300).animate({opacity: 1}, fadeInSpeed, removeFilter);


}

timeout = setTimeout(function(){$('#Button2').click()}, 5000)
//while(timeout==0)
//{
// timeout=timeout-1;
//}
//alert(timeout);

});





</script>


</form>
</body>
</html>

thanks and regards
Inderjeet