Help! Still can't find a helpful code!

[Eric Scull]

Hello,
For the past few months I've been searching forums like these, trying to find somebody who can help me with a simple-seeming (aren't they always) code for a contest I run on my website, MuggleNet.com. It's called the Caption Contest, where people send in funny ideas as to what the people in the pictures (which I choose) are saying. I pick the funniest and most original, traditionally, and usually there's about 30 winners in all.
Well, thirty caption winners make quite a long list, as you can imagine. Pretty soon the list is so expansive that one may forget what the picture even is, or start to notice characters being brought in that they didnt' recall being in the picture but were. My solution: Keep the entries in one place!
Here's what I've been trying to find out how to do:
I'd like to create two buttons, labelled Next and Previous. There should be a box below the buttons, visible or invisible once the page loads doesn't matter. By clicking Next, I would like to have it display each caption winner, and keep going. The number of spaces and lines that each caption will take up is random, so it'd need to be able to handle from anywhere between 1-5 lines.
Apart from that, I'd like to be able to store the caption winners in the coding of the page itself, so it would decrease loading time and be easier to edit the captions. I was actually a few inches away from snagging a code directly like this one, but it was lost and never found again. I'm going to attempt a sample of what the code would resemble. The actual code-words used to control things on Java aren't the same, I'm sure, I'm just trying to be basic and give an idea of what I'm asking for.

The Next button's code could be "Onclick=NextCaption"
and each caption could be stored into the coding with something like this:

Caption1="Harry: WOAH! A GIANT SHARK!<p>Hermione:Look out!<p>Ron:Duck!<p>-Jerry"
Caption2="Snape: And I thought we were alone!"

and so forth.. so that I could easily edit what it calls forth. We don't even need a previous button actually, if it would make it easier for someone to create I just need to get this to work.
If this makes any sense or if you have further questions, please email me at SiriusBlack423@aol.com. I would really like to get this to work, as my contest is needing the code more and more, as the number of entries I get is up to 1,100 a week. Please help if you know how!

[Vincent Puglia]

Hi,

I'm not positive I know what you want, but here a few ideas:

1) use alerts:

var nextCaption = 0;
var captions = new Array();
captions[0] = "Harry: Sometimes I think my Nimbus thinks it's a Cirrus";
captions[1]................
captions[2]................

<input type='button' name='next' onClick="alert(captions[nextCaption]);nextCaptions++">Next

2) a textarea:
var nextCaption = 0;
var captions = new Array();
captions[0] = "Harry: Sometimes I think my Nimbus thinks it's a Cirrus";
captions[1] = '...';
function fillArea(formObj)
{
formObj.nextCap.value = captions[nextCaption++]
}

<form name='someName'>
<input type='button' name='next' onClick="fillArea(this.form)">Next
<textarea name='nextCap' size='5'></textarea>
</form>

3) divs/layers:

see the dHTML tutorials/scripts at my site (GrassBlade); then post back here if you have trouble

Vinny

[Eric Scull]

Vinny,
I have a feeling you know exactly what needs to be done, because your sample codes seemed to be uncannily close to what I needed! However, the codes, just, didn't work. I'd like something along the lines of the second code (using a text area and filling it with each new entry). I fuond particularly that the button wasn't stable either, perhaps it was a typo.
I apologise for my lack of knowledge in this field, which limits me to only pointing you in the right direction. If you have any free time that you could devote to this, please do so at your most conveniant moment. I am taking a small trip to Ocean City, MD for the weekend with some friends of the family. I will be able to return on Sunday, so if you'd like to work on this you won't be able to hear from me until Sunday, unless you receive this message within the next ten hours (It is currently 8:34pm EST) which I will be online and be able to correspond.
Hopefully we can work something out.

[Eric Scull]

I'm back, how's it going? It isn't giving out too much trouble is it?

[n8thegreat]

this should work
in the <head> section

<script type="text/javascript">
var captions = new Array();
captions[0] = "I am a giant rubber chicken";
captions[1] = "Chicken pot pie...";
captions[2] = "Chicken Boo, what's the matter with you?";
captions[3] = "Eat moR cHiken";
captions[4] = "The white meat!";
index = 0;
total = captions.length - 1;
function nextCaption() {
target_id = document.getElementById( "caption" );
if ( index == total ) {
index = 0;
} else {
index++;
}
target_id.innerHTML = captions[ index ];
}
function previousCaption() {
target_id = document.getElementById( "caption" );
if ( index == 0 ) {
index = total;
} else {
index--;
}
target_id.innerHTML = captions[ index ];
}
</script>

and then in the body, do something along the lines of...

<input type="button" value="Prev" onclick="previousCaption()" />
<input type="button" value="Next" onclick="nextCaption()" />
<span id="caption">click next and previos to view the captions</span>


now you can format that anyways you want, just make where ever the captions appear have the attribute id="caption"

[Vincent Puglia]

Hi Eric,


It isn't giving out too much trouble is it?

Not at all, especially since I haven't bothered with it; I figured since I wasn't invited to go to Ocean City....

n8, though, provided a dHTML solution that will work with today's standards-compliant browsers (but crash with older versions).

n8: hope you don't mind, but I took it one step further:


function getCaption(isNext)
{
if (isNext)
index = ( index == total ) ? 0 : ++index
else
index = ( index == 0 ) ? total : --index;

target_id = document.getElementById( "caption" );
target_id.innerHTML = captions[index ];

}
<input type="button" value="Prev" onclick="getCaption(0)" />
<input type="button" value="Next" onclick="getCaption(1)" />

[n8thegreat]

boy you just like to make me look bad, dont you!! :D

[Vincent Puglia]

Hi n8,

Nah, because then I would have done something like this:)

target_id.innerHTML = captions[((isNext) ?( ( index == total ) ? 0 : ++index ) : ( index == 0 ) ? total : --index)]

but, it's buggy and I'm not in the mood to figure out why.

Vinny

[Eric Scull]

Actually, I think 'n8thegreat's code works the easiest! There's just one tiny flaw in it: I can't have more than one line of text for those captions! <p> in the middle of the code on the individual ones doesn't work quite the way it should, though if there was some way to put paragraph spaces within the captions (in the head code n8 gave), please let me know and it'll be perfect!

[n8thegreat]

what are you talking about, i can put more than one line of text, i can use any html in those captions...

[Eric Scull]

I mean, if I had a caption that was more than one line, ex:

Harry: Hey!
Ron: What?!
Hermione: Wazupeee!!!

I can't space them like that, it can only put it on one line, <p> doesn't work with it either... Everything's stuck on the first line. Actually I need to put whoever the winner is below it so I need to be able to have more than one line!

[n8thegreat]

...i know exactly what you mean by more than one line
try this, it will display on more than one line. you can put any html in those captions, line breaks, <p>'s, whatever


captions[1] = "<b>Bob:</b> Yo wassup!<br /><b>Bill:</b>Watchin the game, havin a bud.<br /><b>Bob:</b>True...true...";
captions[2] = "Chicken Boo, <br />what's the matter with you?";
captions[3] = "Eat moR <br />cHiken";
captions[4] = "The<br /> white meat!";
index = 0;
total = captions.length - 1;

function getCaption(isNext)
{
if (isNext)
index = ( index == total ) ? 1 : ++index
else
index = ( index == 1 || index == 0 ) ? total : --index;

target_id = document.getElementById( "caption" );
target_id.innerHTML = captions[index ];

}

displays on more than one line


also, there was a bug in the script before, so start with captions[1] instead of 0

[Eric Scull]

Hey thanks! It works! HURRAY! HURRAH! MONTHS OF SEARCHING! erm.. ahem.. anyway thanks alot both of you, I'm glad I finally got it. If you want me to credit you for it let me know, I'll be updating the entire contest with this stuff, you can find it at http://www.mugglenet.com/captioncontest.shtml, it'll be completed in the near future. Thanks!

[Vincent Puglia]

Credit??? Yea ok, but I'd much rather have Fawkes or Norbet. :D


Vinny