Scrolling Text With User-Configurable Speed (Bit too Complicated for this Newbie)

JimBadger

Hello all,

I have a numeric array, full of text, which I'd like to display to the user one line at a time.

The user will click a start button and the first array item will be displayed, before moving upwards and being replaced by the next, after, say, 3 seconds.

The user will have speed up and slow down buttons which will change the interval at which a new text item appears.

I don't really know how to go about doing this though...and imagine I will need to use something like Ajax?

I envisage a main function (called when the user submits the form containing the start button) which displays an item, waits for whatever period the global $time_interval variable currently says, and then continues the loop...

But...how do I get the speed up and slow down buttons to change the global interval variable without having to resubmit the form, and thus start the whole process again. Ajax is on a long list of things I need to read up on (thanks to other threads I've started here asking for general PHP advice!)...so is it something I should be looking into right now for this problem?

Or is there a much simpler way to do something like this, anyway?

Any advice appreciated! 🙂

Cheers,
James

Rodders

Firstly, what you're after is client-side so PHP won't be able to directly do what you want. You'll need javascript really. I'd suggest trying over on the webdeveloper.com forums where they have a dedicated Javascript board.

Additionally, you might want to look at jQuery for this. I haven't seen much of it but I'd bet there's something that'll do what you want.

JimBadger

Rodders;10936854 wrote:
Firstly, what you're after is client-side so PHP won't be able to directly do what you want. You'll need javascript really. I'd suggest trying over on the webdeveloper.com forums where they have a dedicated Javascript board.

Additionally, you might want to look at jQuery for this. I haven't seen much of it but I'd bet there's something that'll do what you want.

Thanks for the reply. I'll definitely take a look at the forum you mentioned, and find out what jQuery is.

I've got no idea how they'd be able to influence the speed at which I display elements from a PHP array though! Erk! 🙂

In case you're about to say "don't use PHP for the array, because of the reasons I've just mentioned," then I'd better just explain that the outputting of this array of "results" is the culmination of a long PHP-based process, so I'm utterly stuck with the PHP array.

If, after that, your advice remains the same, then sir, I tip my hat to you in gratitude and shall move on to the webdeveloper.com forum forthwith!

🙂

Rodders

Ah yes, it's quite normal that you'll want PHP to process some data and make it available to the page. Now, what you need to do is break down your requirements into individual pieces of work.

I'd be looking to get your data into a javascript array, or hidden elements on the page that you can then load or read the content of (javascript array makes most sense). Or I suppose there is the AJAX approach, but I'm not too familiar with that.

However, regardless of how you get the data, you'll want to workout how to use javascript to do your scrolling effect. So, start with a simple page with a static javascript array and see if you can control the scrolling.

Once you've got that, look into how you could load that data onto the page with PHP. Essentially you can use PHP to write the javascript onto the page for you.

Now, do you want to change the set of data that is available to the scroller? One option would be to reload the page, but if you want to save the scroll speed you could pass that as a querystring ($GET) or $POST variable somehow.

Show us some code....

JimBadger

Thanks again.

I don't have any code for this bit yet. I've got the array, but the displaying of it is purely theoretical at the moment. 🙂 Once I start to hash something together I'll no doubt post it up for comedy value, if nothing else! 😉

In replying to your first reply the idea to convert the PHP array to a javascript one occurred to me and I had actually just googled it when you replied again.

I'm worried about javascript though, because of how many people turn it off!

But then again, this is for a browser game, so anyone wanting to play it is likely going to be okay with javascript, and what have you...

Luckily, I don't have to worry about doing anything with the result data. It doesn't need to change, and, if they refresh the page, I'm fine with the whole thing being reset to the beginning. The users can't modify the result data, either, only view it. So that's all a level of complexity I don't need to consider.

I'll do what you say: Get what I want workin in Javascript, then figure out how to give my PHP array to the Javascript.

Think I'll read up on Ajax (and JQuery for that matter) first, because I get more of a "sexy" feel from it than the good, solid, ole reliable Javascript.

Thanks,
James

Weedpacket

JimBadger wrote:
Think I'll read up on Ajax (and JQuery for that matter) first, because I get more of a "sexy" feel from it than the good, solid, ole reliable Javascript.

Then you'll be disappointed, because it's just JavaScript with some understanding of programming theory behind it.

JimBadger

Ahhh, but it's sexy Javascript, no? 😉

bradgrafelman

JimBadger wrote:
then figure out how to give my PHP array to the Javascript.

But that's the easiest part of all.. depending upon what the structure of your array is. For example, assuming your array is just a 1-dimensional array of sentences:

<script type="text/javascript">
myJavascriptArray = new Array();
<?php
foreach($myArray as $sentence)
    echo "myJavascriptArray[myJavascriptArray.length] = '" . addslashes($sentence) . "'\n";
?>
</script>

EDIT: Woops, completely forgot about using [man]JSON[/man] instead to translate PHP objects into JS ones.

JimBadger

Ah, you're right that is easy!

Ta.

JimBadger

Well, I've got this working in the most basic way possible (thanks to the help given here!)

Currently it just goes through my array and displays a new comment every 5 seconds.

Next, I'll start adding speed up, slow down and jump-to-end buttons.

However, I'd also like to know if anyone can give me advice on how to improve what I've got here. It feels like a hack, and I'd like something a bit more robust and modern feeling.

Here's my code:

<html>
<head>

<script type="text/javascript"> 

var commentsArray = new Array();
var delay = 5000;
var arrayPos = 0;

<?php 
foreach($commentaryOutput as $sentence) 

 echo "commentsArray[commentsArray.length] = '" . addslashes($sentence) . "';\n"; 
?>

var arraySize = commentsArray.length;

function timedOutput() {

if (arrayPos < arraySize) {

    document.getElementById("currentRow").getElementsByTagName('td')[0].innerHTML = commentsArray[arrayPos];

   <!--if (arrayPos > 0)
        document.getElementById("previousRow").getElementsByTagName('td')[0].innerHTML = commentsArray[arrayPos - 1];
    -->
}

arrayPos++;
setTimeout("timedOutput()", delay);
}

</script>
</head>
<body>
    <table id="resultsTable">
        <tr id="previousRow"><td>&nbsp;</td></tr>
        <tr id="currentRow"><td>&nbsp;</td></tr>
    </table>

<script type="text/javascript">timedOutput();</script>
</body>
</html>

Hopefully manipulating the Javascript "delay" variable shouldn't be too hard, although I guess that as soon as, say, someone clicks speed up, the currently running timeout should be stopped so that I don't get in a kerfuffle! 🙂

Thanks in advance for any help making this code less...well...newbie-ish! 🙂

Edit: In an ideal situation, I'd like to start with one row of output, and generate four more, one at a time...so that once there have been 5 or more comments, you can see a "history" of the current comment and the previous 4. But that's waaaay beyond me right now!