Dispalying a message after displaying an animated GIF

Question

The following is my code, and I already have the animated GIF working but I need a message or another picture to be displayed after 5 seconds when the GIF is disabled. Thanks in advance

JavaScript

<script type= "text/javascript">
function show() {
  document.getElementById("processing").style.display="block";
  setTimeout("hide()", 5000);  // 5 seconds
}

function hide() {
  document.getElementById("processing").style.display="none";
}
</script>

HTML

<p>
  <input type="button"  id = "submit" value="Make Transfer" class="submit_button" onclick= "show()" />
</p>
 <div id="processing" style="display:none;"><img src="images/processing.gif" id= "processing" alt="Processing transaction!" /></div>

Your code contains enough information for you to do this already. Just add it to the hide() function. Use a different ID and show the element. — Diodeus - James MacFarlane, Feb 25 '13 at 17:34
It's unclear what your question is. What are you having a hard time with? What did you try? — Ruan Mendes, Feb 25 '13 at 17:39
Thanks Diodeus, but how do I do it with the hide function? I just need the animated GIF to disaapear (which it does already after 5 seconds) then I want it to be replaced with a message saying the form has been submitted — Kaos, Feb 25 '13 at 17:43

isherwood · Answer 1 · 2013-02-25T17:54:39.960

1

http://jsfiddle.net/V4UU2/4

<style>
#processing, #message {
    display: none;
}
</style>

<p>
    <input type="button" id="submit" value="Make Transfer" class="submit_button" onclick="show()" />
</p>

<div>
    <img src="http://placehold.it/150x150" id="processing" alt="Processing transaction!"
    />
    <div id="message">My message.</div>
</div>

<script>
  function hide() {
    document.getElementById("processing").style.display = "none";
    document.getElementById("message").style.display = "block";
    }

</script>

edited Feb 25 '13 at 17:54

answered Feb 25 '13 at 17:48

isherwood

58,414
16
114
157

Thanks guys, I'm glad I could sort this out. I was displaying as a block and that was why it wasn't working. But it's working perfectly now – Kaos Feb 25 '13 at 18:03
Let me clarify... Be sure to select the first correct answer and/or the one with a working demo. ;-) – isherwood Feb 25 '13 at 18:57
Not to pick nits, but my answer was one minute earlier. I only mention it because the answers don't always appear in chrono order, depending on several factors. No big deal. I'm not on SO for points. – isherwood Feb 25 '13 at 22:13

score 0 · Accepted Answer · answered Feb 25 '13 at 17:49

First, you have two items with the same id processing. Change the id from the image, and add a div with a message in it

<p>
  <input type="button"  id = "submit" value="Make Transfer" class="submit_button" onclick= "show()" />
</p>
<div id="processing" style="display:none;">
  <img src="images/processing.gif" id="processing-img" alt="Processing transaction!" />
  <div id="processed-msg" style="display:none">Finished processing </div>
</div>



function hide() {
  document.getElementById("processing-img").style.display="none";
  document.getElementById("processing-msg").style.display="block";
}

Dispalying a message after displaying an animated GIF

2 Answers2