Vertical scrolling news ticker/PHP/MySQL

Freeway
1

My first post - hope some one can help!

Does anyone know of a vertical scrolling ticker that work in PHP and that can draw its news items from a MySQL database?

I was thinking of creating something similar to a sports results ticker that has the results scrolling up from the bottom.

Thanks.
John

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

2

I haven’t used it, but pointed others to it here who reported back it was just the thing. So, hope it is.

Cecil

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

3

Well, you’re going to need something in JavaScript to make it scroll in the page. The MySQL/PHP bit will just get the data and put it in your page.

The basics of this trick are to have an outer DIV with its overflow set to hidden, wrapping a much taller inner DIV containing all of the options. Then you use a JavaScript function to manipulate the top margin of the inner DIV over time.

Check this page for some ideas about making it scroll: http://scripty.walterdavisstudio.com/ticker.html

There’s as many ways to get the data out of your database as there are web developers. Please let me know if you need some examples on that end.

Walter

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

4

Thank you, this points me in the right direction.

Is it possible to make the new ticker auto-update, without the user having to press refresh on their browser? (I guess I’d want only that section to auto-update, not the whole browser window).

John

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

5

Yes, but it will take a different approach. If you want to have the
news constantly update, long after the page is initially loaded, then
you want to use an Ajax updater. The simple approach I sketched out
last night will only work if you bring the variables you want to
rotate through into the page at the initial download.

The Prototype.js library has a very useful function for this case,
called the Ajax.PeriodicalUpdater[1]. It polls a page on your server
at a frequency you define, and it also keeps track of the last
response. If the two are the same, then it adds a little decay period
to the next request, gradually widening the gap between requests (so
as to keep your server from being overwhelmed by useless requests for
the same thing). The moment that something new comes along, the check
period tightens back up to the default value.

Try this:

  1. Make a script page on your server (it has to be on the same host
    as your display page, or else it falls afoul of the JavaScript domain
    sandbox) that will return a page fragment of the latest news items.
    Maybe have it return a simple UL of linked headlines or something
    like that.

  2. In Freeway, draw a layer box on your page where you want this list
    to appear. Put some basic text in it like “Watch this space!”. Make
    note of its name in the inspector, which will become its ID.

  3. Apply the Protaculous[2] action to your page and make sure the
    Prototype library is selected.

  4. Click the Function Body button in the Actions palette and enter
    the following, substituting your news box’s ID and the name of your
    server script where appropriate.

    new Ajax.PeriodicalUpdater(‘yourItemId’,
    ‘your_script.php’,
    {method: ‘get’,
    frequency: 3,
    decay: 2
    });

These settings set the updater to poll the server every 3 seconds,
and to widen the interval by doubling it each time the response
matches the previous response. You can tinker with these values
(decay can be any positive decimal number), and you can leave them
out altogether – just include an empty pair of curly braces instead
to get the defaults (which is once a second, no decay, IIRC).

Naturally, this can only be previewed on the server. And further, to
style the contents of your list you will need to create some styles
in your page that target the list using the CSS cascade, or use
inline styles (ick) generated on your server.

Walter

  1. http://prototypejs.org/api/ajax/periodicalUpdater
  2. http://freewaypro.com/actions/downloads/Protaculous.fwactionb.zip

On Jan 24, 2008, at 4:03 AM, johnrob wrote:

Thank you, this points me in the right direction.

Is it possible to make the new ticker auto-update, without the user
having to press refresh on their browser? (I guess I’d want only
that section to auto-update, not the whole browser window).

John

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

6

I can’t get the box to update so must be doing something wrong:

a) have a PHP page called scores.php that has a few echo statements (echo “Line One
LineTwo”:wink: So the page if run just prints some text to the screen.

b) I have an html page called index.html that has an HTML box called ‘box’ with the text “Watch this space” in it.

c) I have added the Protaculus action to the HTML page (prototype selected), with this code:

new Ajax.PeriodicalUpdater(‘box’, ‘scores.php’, {method: ‘get’, frequency: 3, decay: 2 });

When I run index.html the HTML box shows but is never updated with the output of scores.php.

Is the error in the php side?

John

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

7

Could you please post a link to the index.html page? Also, if you
have not installed the Firebug extension in Firefox, run, don’t walk,
to http://getfirebug.com

This interactive debugger lets you see XHR requests (the out-of-band
requests used in Ajax interactions).

Also, if you are previewing this locally with the scores.php being on
a server somewhere, recall that you are breaking the same-domain
sandbox rules, and the request will be denied.

Walter

On Jan 24, 2008, at 9:31 AM, johnrob wrote:

I can’t get the box to update so must be doing something wrong:

a) have a PHP page called scores.php that has a few echo statements
(echo “Line One
LineTwo”:wink: So the page if run just prints some
text to the screen.

b) I have an html page called index.html that has an HTML box
called ‘box’ with the text “Watch this space” in it.

c) I have added the Protaculus action to the HTML page (prototype
selected), with this code:

new Ajax.PeriodicalUpdater(‘box’, ‘scores.php’, {method: ‘get’,
frequency: 3, decay: 2 });

When I run index.html the HTML box shows but is never updated with
the output of scores.php.

Is the error in the php side?

John

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

8

Using Firebug showed me that there was a syntax error in my Javascript, caused by copy/pasting your code above (the single quote marks were not the expected type).

Changing the quote marks got it working!

Walter, thanks so much, I’m sure I can get the exact result I’m looking for now.

John

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

9

Aha. Smart punctuation strikes again!

Walter

On Jan 24, 2008, at 10:10 AM, johnrob wrote:

Using Firebug showed me that there was a syntax error in my
Javascript, caused by copy/pasting your code above (the single
quote marks were not the expected type).

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options