Hi all.
What's wrong with this?
$(function(){
var timing = 5000;
var stripWidth;
var $strip;
$strip = $("#mask p");
stripWidth = $strip.width();
containerWidth = $("#mask").width();
var totalTravel = stripWidth+containerWidth;
function scrollnews(param){
$strip.animate({left: '-='+ param}, timing, "linear", function()
{$strip.css("left", containerWidth); scrollnews(param)});
}
scrollnews(totalTravel);
$("#tickercontainer").hover(function(){
$strip.stop();
},
function(){
var offset = $strip.offset();
scrollnews(offset.left + totalTravel);
});
I was experimenting with the new stop() method to see if i could built
a simple newsticker from a paragraph and most of all with just few
lines of code (i'm not an expert anyway).
Basically i know how much is wide my p#strip and at the loading of my
document i put it at the right corner of the visible area ( $
("#mask")). So my "travel" in pixel is equal to my P width + my #mask
width.
So far so good. When the animation in scrollnews > animate ends, i use
a callback to the same function and it restarts.
OK.
Now i tried with the stop() method. it works, of course, but
restarting is pretty difficult: or better, it restarts from where it
ended but calculate the amount of pixels to scroll (from this new
position) is not easy at all.
In fact when i mouseout my newsticker contanier i call again
scrollnews() passing as a parameter the difference between the total
amount of pixels and the left offset of my P (the amount of pixel it
already covered) but it does not work well. What am i missing?
Try yourself.
Requires jquery 1.2.1 and that's the markup:
<div id="gnb">
<div id="tickercontainer">
<div id="mask">
<p id="strip"><span>10/10/2007</span> <a
href="#/ogt/content/news/
News183.complete">Premio per il Capitale Intellettuale</
a><span>10/10/2007</span> <a href="#/ogt/content/news/
News175.complete">Lamanda biography and interview</a><span>10/10/2007</
span> <a href="#/ogt/content/news/News177.complete">Interview with
Federico Ghizzoni</a><span>08/10/2007</span> <a href="#/ogt/content/
news/News176.complete">2007 Gift Matching Program</a><span>08/10/2007</
span> <a href="#/ogt/content/news/News178.complete">European Tennis
Champion 2007 - UniCredit</a><span>05/10/2007</span> <a href="#/ogt/
content/news/News173.complete">UniCredit Group: The First Partner For
Italian Exporters </a><span>04/10/2007</span> <a href="#/ogt/content/
news/News172.complete">Piergiorgio Peluso appointed Head of IB Italy</
a><span>03/10/2007</span> <a href="#/ogt/content/news/
News167.complete">First Meeting of The European Works Council</
a><span>02/10/2007</span> <a href="#/ogt/content/news/
News166.complete">UniCredit-Capitalia integration</a><span>01/10/2007</
span> <a href="#/ogt/content/news/News165.complete">Welcome to New
OneGate</a></p>
</div>
</div>
</div>
CSS:
#gnb {
width: 740px;
overflow: hidden;
margin: 10px 0 3px 0;
padding-top: 15px;
background: transparent;
}
#gnb #tickercontainer {
border: 1px solid #000;
background: transparent;
width: 738px;
height: 27px;
margin: 0;
padding: 0
}
#gnb #tickercontainer #mask {
position: relative;
left: 10px;
top: 8px;
width: 718px;
overflow: hidden;
}
p#strip {
position: relative;
left: 750px;
display: inline;
font: bold 10px Verdana;
white-space: nowrap;
margin: 0;
padding: 0;
border-right: 5px solid red;
}
p#strip a {
margin: 0;
color: #ff0000;
font: bold 10px Verdana;
padding: 0 52px 0 6px;
display: inline;
}
p#strip span {margin: 0; padding: 0; font: bold 10px/1em Verdana;}
Of course if you got time, in the meantime i'll keep investigating.
P.S. I already have a longer (more lines of code) of a news scroller
wich works with setTimeout and changing the .css("left") value. But i
wanted to use the new animate and stop methods because .... well
because it is always challenging to play with jquery.
GC
