If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Returning images

I would like to return an image for my rock paper scissors game. I'm not sure if it is possible, but I have the pictures ready. I want the picture to take up the whole screen and after 4 seconds or a good amount of time, I want a replay button to fade in. Also I was wondering if this is possible.

I'm not sure on everything you want to accomplish, but I will note that your fadeIn() isn't working because the element is already visible. An element must be hidden in order to fade it in.

I guess with the pictures I'm just not following what is being displayed and how it relates to this code. I don't know if this is what you had in mind, but my thoughts on how the concept would take place is: you click a rock, paper or scissors button (or image?), the game hides the choices, decides the winner and then displays this on the screen (as a big image or text?). A few seconds later a 'Replay' button fades in somewhere on the screen. Clicking this hides the giant result from the last game and displays your choices again?

I'm just trying to clarify because it seems to be a bit different from what you already have, thus I don't want to make a bunch of changes and have them be wrong.

"Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

I want the user to click the one of the buttons. Then I want one of the images to come up with an image of rock beating scissors and so on. I want this to block the buttons so the user can't spam. Also a replay button would be nice. I don't want you to do it for me. I just want you to teach me if you have the time. Also how do you hide something?

Alright, so let's start with the simplest part, hiding things. You can inversely use .fadeOut() the same way as you would use .fadeIn(). But that's assuming you want to add the effect as well as hiding it. jQuery also sports a .hide() function which will instantly hide an element, after which you could fade it back in.

So moving on, to display these fullscreen images you will likely want to create a new element on the page. Granted this could be done with jQuery itself but I think it's always easier and a lot safer to manually add a new <div> element to the page and just use that. Give it an ID and use CSS to have it cover the screen. You could use:

So then each time a game has been decided you should see your new <div> fade in, covering up the screen (and the play buttons) while displaying the appropriate image.

The last step would be using setTimeout() each time a game ends to show the replay button. Since this is a global action (not specific to the choices) it doesn't have to be inside of any decision logic. It would just call a .prepend()/.append() and .fadeIn() on that same new <div> to add a button that runs a function you will create. Your new function just has to use .hide() on your new <div> so users can play again.

This is a pretty rough outline and you'll probably want to clean up some of these things (like the large image. It wouldn't be vertically centered). I also didn't really address your results list that shows the text version of each result. I'm not sure what you want to do with that if you are adding images to represent this.

"Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"