[thelist] Scrolling ticker
Robert Gormley
robert at pennyonthesidewalk.com
Thu Jun 7 12:15:21 CDT 2007
First, a caveat, no "JS is evil, mmmkay" style comments, please.
I'm trying to work out a garden variety scrolling ticker, you know the kind:
| < | text here scrolls in from right out to left ... text here | > |
Easy enough to do, so far.
onMouseOver stops scroll, mouseOut starts...
still simple.
Content of ticker is in div and named elements for "dynamic injection"
<div id="tickerbody">
<a name="act1">•</a> Act 1 - City 1
<a name="act2">•</a> Act 2 - City 2
<a name="act3">•</a> Act 3 - City 3
</div>
Now, as the ticker scrolls, behavior for buttons should be |>| to jump
to next item, and |<| for previous. This in itself is doable in JS -
walk the DOM tree for <A> children of #tickerbody. Display next, if at
end, go to 1, and vice versa.
But how do we know which is next, I hear you ask, and this is my problem.
Because of course it's easy if the buttons are the only way to advance
things, but the thing is scrolling of its own accord too.
My vague theorizing thus far:
The DIV is much bigger than its viewport, and we're scrolling by
adjusting its position, pulling it through x pixels every x msec.
If I could walk the DOM tree and get left value for each A (can't do it
on char count, because of proportional fonts, etc), then I could
determine which is "next" by finding which one is just outside of the
right of the viewport, and previous by the one which is just outside of
the left of the viewport, because I know the current offset of the DIV,
as I'm using it for scrolling.
Is this feasible? Is it possible? I'm utterly sure that I've seen
implementations like this, though of course now I can't find any having
been put on the spot.
Anyone able to confirm? Deny? Point me to an example? Show a simple
implementation, even a line or two of JS that'd need to be plugged into
a bigger "engine"? Offer alternate theory as to how this could be made
to work?
Help as always greatly appreciated.
Robert
More information about the thelist
mailing list