Onclick Show Hide JavaScript with Timer - Pinwire
 In Sci & Tech

onclick-show-with-timer

I was recently adding a new ‘feature’ to Pinwire with the intention of increasing donations to the site. My goal was to guilt people into clicking a donation button when instead, they may rather click a download button, and then after a few harmless requests, present them with the ‘real’ download button. This was of course to be piggy-backed onto another previous enhancement which required a downloader to enter a valid email address in order to gain access to the file. The latter project was more about protecting content from remote linking.

My intent with this tutorial is for you to eventually grasp the concept of how this JavaScript works and to be able to use it for other projects. This is by no means specialized code, the possibilities are endless.

[blockquote]Give a man a fish and you feed him for a day.
Teach a man to fish and you feed him for a lifetime.[/blockquote]

Being that I am not a ‘Javascript Person’ I went on the hunt for bits of code and eventually came up with this mashup, which works quite well.

Here was my logic I wanted to implement:

  1. Visitor clicks the download button
  2. Hide the download button
  3. Display encouraging message to lubricate the donation process
  4. Wait a few seconds and display the download button.

I think I Googled for ‘show image after a click with delay’ or something like that.

Eventually this turned into a loop of running through #3 and #4 several times.

I needed a way to display and hide messages, and to do a time delay with show and hide on the download button.

This can all be done with JavaScript and a little bit of brain power. Below you can see that each of the DIV’s have an ID and most of them are set with a ‘display:none’ style. The display style attribute is the key to the whole thing because we can manipulate that with JavaScript. Also, you will see the super super important onclick code added to each of the images with an attached javascript function name.

<div>
<div id="button1"> <img onclick="comment1()" src="/dl.jpg"></div>
<div id="button2" style="display: none;"><img onclick="comment2()" src="/dl.jpg"></div>
<div id="button3" style="display: none;"><img onclick="comment3()" src="/dl.jpg"></div>
<div id="scolding1" style="display: none;">Seriously? Not even $1? Throw us a bone :)</div>
<div id="scolding2" style="display: none;">Click the BIG GREEN BUTTON above to donate.</div>
<div id="scolding3" style="display: none;">Be sure to click our FaceBook like button. (like button code)</div>
<div id="scolding4" style="display: none;">Pretty Please....click the LIKE button.</div>
<div id="button4" style="display: none;">OK. Here's the REAL download button.<a href="#"><img src="/dl-file.jpg"></a></div>
</div>

Here are the three basic JavaScript components that control the code above.

When the image with the onclick=comment1 is clicked do the following:
Modify the display style of the div element with the button1 ID.
Modify the display style of the div element with the scolding1 ID.
Start a countdown timer which will hide scolding1 and show button2.

function comment1() {
document.getElementById("button1").style.display="none"; // hide it
document.getElementById("scolding1").style.display="block"; // show it
setTimeout("scolding1()",4000); // 4 sec delay until we run the scolding1 function below
setTimeout("button2()",4000); // 4 sec delay until we run the button2 function below.
}

function scolding1() {
document.getElementById("scolding1").style.display="none"; // hide it
}

function button2() {
document.getElementById("button2").style.display=""; // show it
}

You can see above the real power is in triggering a function from within a function. And after you get the basic components built you can turn things on and off at will. What I do is run through the various DIV elements using variations of these functions to show and hide the DIV’s several times. Your brain may sizzle a bit from sorting out the triggers if you have too many iterations of showing and hiding content…but for a basic setup. It’s sweet.

Recommended Posts

Leave a Comment

Start typing and press Enter to search

Pinwire