PDA

For continued disscussion on this topic : Controlling action buttons


DONCORLEON78
06-21-2000, 08:47 PM
FIRST I WANT TO GIVE MUCH THANKS TO John Pollock for helping me out, and others who attempted to help me. You guys are great. Your information was very helpful, and gave me a jumpstart on my animated space shuttle.

I do, however, have another question. After I have all my action buttons how to I make the buttons not work at certain times. For example, It's obvious that a shipt cannot land before it is launched. And it cannot be launched before the engines are started. I would like some kind of prompt to come up that says system failure or something. How do I write script to have this kind of control over my action buttons.
John Pollock
06-21-2000, 09:59 PM
Interesting, I'm pretty sure it can be done, I need to brush up on how though as I can't recall of the top of my head (all this Perl and PHP lately has my head in a spin!).

I've just about got an idea, I'll go grab the script and if I get it I'll repost with the changes. :)
gzazJim
06-21-2000, 10:32 PM
Don,

Something you may be able to try would involve Cascading Style Sheets. CSS has a function wherein you're able to set an object's visibility. Perhaps by setting up an "onClick()" event, you could click button "A" which would in turn make itself invisible, and also make the NEXT button visible...

Some pseudo-code follows:

<script>
function toggleVisible(currentElement)
{
dom = eval(docObj) + ',' + currElem + styleObj);
state = dom.visibility;
if (state == "visible" || state == "show")
{
dom.visibility = "hidden";
}
else
{
dom.visibility = "visible";*
}
}
</script>

then your body information...

<form action="" method="get">
<div id="whatever" style="position: relative; visibility: hidden;">
<input type=button value="button 2">
</div>
<input type=button value="button 1" onClick="toggleVisible('whatever')">
</form>

I would suggest picking up a book like Peachpit Press' "Visual Quickstart Guide - DHTML for the World Wide Web" by Jason Teague (which is where the above code originally came from).

Good Luck!

Jim
John Pollock
06-21-2000, 10:54 PM
I ..think.. this will do it, but if I have a typo in here it could mess it up. All you should need to change are the same parts as before, as long as you keep it at 5 steps.

<HEAD>
<SCRIPT language="JavaScript">
<!--
if (document.images)
{
pic1on= new Image(100,25);
pic1on.src="shuttle1.gif";
pic2on= new Image(100,25);
pic2on.src="shuttle2.gif";
pic3on= new Image(100,25);
pic3on.src="shuttle3.gif";
pic4on= new Image(100,25);
pic4on.src="shuttle4.gif";
pic5on= new Image(100,25);
pic5on.src="shuttle5.gif";
}

var countnum=1;

function lightup(imgName,img2)
{
var picnum= parseInt(imgName);

if (picnum==countnum)
{
if (document.images)
{
imgOn=eval(imgName + "on.src");
document[img2].src= imgOn;
}
if (countnum==5)
{
countnum=0;
}
countnum+=1;
}
else
{
alert("The shuttle has to launch in the right order!");
}
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<IMG SRC="suttle0.gif" name="pic0" width="100" height="25">
<BR>
<FORM>
<INPUT TYPE="button" onClick="lightup('pic1','pic0');" value="Step 1">
<INPUT TYPE="button" onClick="lightup('pic2','pic0');" value="Step 2">
<INPUT TYPE="button" onClick="lightup('pic3','pic0');" value="Step 3">
<INPUT TYPE="button" onClick="lightup('pic4','pic0');" value="Step 4">
<INPUT TYPE="button" onClick="lightup('pic5','pic0');" value="Step 5">
</FORM>
</BODY>

Again, if anyone sees a typo or mistake let me know, I wasn't able to test it out just yet. :)


[Edited by John Pollock on 06-26-2000 at 05:17 PM]
DONCORLEON78
06-22-2000, 06:26 PM
Thanks John and Jim for the help.

I could not seem to get it to work either way. Also,
I am looking for a code that will allow the user to see all of the buttons at once, but they can still only go in a certain order. I would like to also be able to control the prompts instead of giving them the same prompt every time.
For example, if they try to launch the ship before they turn the engines on, the prompt might say, "you must turn engines on." Or if they try to land the ship before they lanch the ship it might say, "you must launch the ship before you can land it." I want to have 3 or 4 different prompts if that is possible
John Pollock
06-22-2000, 07:11 PM
For some reason the parseInt didn't work, the fix below should work as long as you don't add extra images (beyond 9 anyway).

The custom alerts have way too many options to try to code one for any user response. They could be on the second button, but then try to click the first.. or click the fifth when they should be on the third.. etc...

Of course if you just want 4 messages we can include an array and use it..

<HEAD>
<SCRIPT language="JavaScript">
<!--
if (document.images)
{
pic1on= new Image(100,25);
pic1on.src="shuttle1.gif";
pic2on= new Image(100,25);
pic2on.src="shuttle2.gif";
pic3on= new Image(100,25);
pic3on.src="shuttle3.gif";
pic4on= new Image(100,25);
pic4on.src="shuttle4.gif";
pic5on= new Image(100,25);
pic5on.src="shuttle5.gif";
}

var countnum=1;

function lightup(imgName,img2)
{
var picnum= imgName.charAt(3);
picnum*=1;

if (picnum==countnum)
{
if (document.images)
{
imgOn=eval(imgName + "on.src");
document[img2].src= imgOn;
}
if (countnum==5)
{
countnum=0;
}
countnum+=1;
}
else
{
alert("The shuttle has to launch in the right order!");
}
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<IMG SRC="suttle0.gif" name="pic0" width="100" height="25">
<BR>
<FORM>
<INPUT TYPE="button" onClick="lightup('pic1','pic0');" value="Step 1">
<INPUT TYPE="button" onClick="lightup('pic2','pic0');" value="Step 2">
<INPUT TYPE="button" onClick="lightup('pic3','pic0');" value="Step 3">
<INPUT TYPE="button" onClick="lightup('pic4','pic0');" value="Step 4">
<INPUT TYPE="button" onClick="lightup('pic5','pic0');" value="Step 5">
</FORM>
</BODY>

:)


[Edited by John Pollock on 06-26-2000 at 05:18 PM]
DONCORLEON78
06-26-2000, 03:58 PM
JOHN, I tried your Script and I can't seem to get it to work. I keep getting script error messages and none of the buttons will work. Also, I was wondering how writting it this way would alow a different prompt to the user when they hit different buttons instead of the same "You have to launch the shuttle in the right order" prompt.
John Pollock
06-26-2000, 04:09 PM
Hmm.. I actually tested the last one I gave you. It was working with IE5 at least..?

I didn't add the extra alert options because it has way too many options to try to code one for any user response. They could be on the second button, but then try to click the first.. or click the fifth when they should be on the third.. etc...

Of course if you just want 4 messages we can include an array and use it..

Oh, do you have a test url we could look at? Maybe if I see the errors etc. I can figure out what to fix. :)




[Edited by John Pollock on 06-26-2000 at 10:12 AM]
DONCORLEON78
06-26-2000, 06:51 PM
I tried to write the code just like you showed me but it didn't seem to work. If you say you tested it I guess I will look at my code closer. I am doing all of this on a local site so I'm sorry I don't have a url right now.
4 action prompts/reponses would be fine. Could you show me how to incorporate an array in the code for 4 of the buttons?.
John Pollock
06-26-2000, 11:16 PM
OK, I added the array for the different messages. I also put it up online so it can be tested easily, try the page out at:

http://www.javascriptcity.com/zzztest/testdc.htm

It works for me in IE5 at least, didn't try NS yet.

If it works you can grab the source code and make changes to it that way, you'll change the quote[0] etc. bits to have the quotes you want. :)
DONCORLEON78
06-28-2000, 03:41 PM
Is it possible to do this by using an if then statement.
Mabye I have some spaces wrong or someting because I can't get it to work this way.

You think you could show me how to make someone do it in the correct order using an if then statement?