[thelist] Scrolling ticker

[Robert Gormley]

To give everyone an answer as to how we had it prototyped - and to thank everyone for their answers on and offline...

Firstly, thanks for the recommendations for a lot of built tickers - we had a look at them, but in a couple of cases we couldn't use them due to distribution restrictions etc.

In the end...

In JavaScript, the A element has the property "x".

We assembled an array with each elements "x" value (as this would be the same, due to only moving the position) ... because we know the current offset and width of the div, we were able to make the action on the prev/next buttons "jump to the anchor that is smallest (but larger than the right edge of the viewport)" / "jump to the anchor that is largest (but smaller than the left edge)" with of course logic to wrap around.

I should post a link to the final implementation, but without saying too much, I think many of you will actually see it in the course of your daily surfing on 7/7/07. ;)

Robert

-----Original Message-----
From: thelist-bounces at lists.evolt.org [mailto:thelist-bounces at lists.evolt.org] On Behalf Of Robert Gormley
Sent: Thursday, June 07, 2007 10:15 AM
To: thelist at lists.evolt.org
Subject: [thelist] Scrolling ticker

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">&bull;</a> Act 1 - City 1
    <a name="act2">&bull;</a> Act 2 - City 2
    <a name="act3">&bull;</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
-- 

* * Please support the community that supports you.  * *
http://evolt.org/help_support_evolt/

For unsubscribe and other options, including the Tip Harvester 
and archives of thelist go to: http://lists.evolt.org 
Workers of the Web, evolt !