HTML and CSS

Clicked Link Countdown

Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Aug 2005

Posts: 102

Reputation: martinkorner is an unknown quantity at this point

Solved Threads: 0

martinkorner martinkorner is offline

Offline

Junior Poster

Clicked Link Countdown

Feb 15th, 2006

Is it possible to have a script on my site which says something like:
"Please click on at least 3 of the links below to continue to the download."

Then, when the user clicks one of the specified links it opens in a new window and this page says:
"Please click on at least 2 more of the links below."

Then, when the user clicks another of the specified links it opens in a new window and this page says:
"Please click on at least 1 more of the links below."

Then, when the user clicks on a third of the specified links it opens in a new window and this page says:
"Thank you, you may now click here to download the file"

Would it also be possible for the script to only count clicks on certain links?

Hope you can help!
Martin

•

Join Date: Dec 2004

Posts: 1,655

Reputation: tgreer is an unknown quantity at this point

Solved Threads: 35

tgreer

Offline

Made Her Cry

Re: Clicked Link Countdown

Feb 15th, 2006

Of course. Set the onclick attribute of these links to run a script. That script can increment a counter, alter the text within a control, open windows, etc.

•

Join Date: Aug 2005

Posts: 102

Reputation: martinkorner is an unknown quantity at this point

Solved Threads: 0

martinkorner martinkorner is offline

Offline

Junior Poster

Re: Clicked Link Countdown

Feb 15th, 2006

Where could I get a script that would do that (I'm not advanced enough to write my own yet)?

Thanks
Martin

•

Join Date: Dec 2004

Posts: 1,655

Reputation: tgreer is an unknown quantity at this point

Solved Threads: 35

tgreer

Offline

Made Her Cry

Re: Clicked Link Countdown

Feb 15th, 2006

I have no idea. Let me politely urge you to BECOME advanced enough. This isn't the "where can I download scripts" forum, it's the "how do I write scripts" forum. You'll get plenty of help, from me and others. Let's start by defining the tasks your script needs to accomplish:

maintain a counter
alter the contents of an element
open a new window

There. The task seems more managable, now, doesn't it?

Let's write some HTML markup as a test harness. We just need some simple hyperlinks. When the user clicks a link, all we want to do is task #1, increment a counter.

First, the HTML:

 Help with Code Tags 
 HTML and CSS Syntax (Toggle Plain Text) 
<html>
<head>
</head>
<body>
 
<a href="#" id="link_01">Hyperlink 1</a><br />
<a href="#" id="link_02">Hyperlink 2</a><br />
<a href="#" id="link_03">Hyperlink 3</a>
 
</body>
</html>
<html>
<head>
</head>
<body>

<a href="#" id="link_01">Hyperlink 1</a><br />
<a href="#" id="link_02">Hyperlink 2</a><br />
<a href="#" id="link_03">Hyperlink 3</a>

</body>
</html>

Simple enough. We don't want these links to go anywhere... the script will eventually do that for us. So, we set the HREF property to a hash-mark, which is essentially the top of the page.

Now, let's implement a counter, by adding to our HTML:

 Help with Code Tags 
 HTML and CSS Syntax (Toggle Plain Text) 
<html>
<head>
<script type="text/javascript">
 
var counter = 0;
function link_click()
{
  counter++;
  alert(counter);
 
}
 
</script>
</head>
<body>
 
<a href="#" id="link_01" onclick="link_click();">Hyperlink 1</a><br />
<a href="#" id="link_02" onclick="link_click();">Hyperlink 2</a><br />
<a href="#" id="link_03" onclick="link_click();">Hyperlink 3</a>
 
 
</body>
</html>
<html>
<head>
<script type="text/javascript">

var counter = 0;
function link_click()
{
  counter++;
  alert(counter);

}

</script>
</head>
<body>

<a href="#" id="link_01" onclick="link_click();">Hyperlink 1</a><br />
<a href="#" id="link_02" onclick="link_click();">Hyperlink 2</a><br />
<a href="#" id="link_03" onclick="link_click();">Hyperlink 3</a>


</body>
</html>

When the user clicks a link, it runs the script. The script increments the counter and displays the current value of the counter via an alert.

Digest that, ask any questions you have, and let me know when you're ready to move onto step #2.

•

Join Date: Aug 2005

Posts: 102

Reputation: martinkorner is an unknown quantity at this point

Solved Threads: 0

martinkorner martinkorner is offline

Offline

Junior Poster

Re: Clicked Link Countdown

Feb 16th, 2006

Right - that's all digested!

To make the counter start at 3 would I change:

Help with Code Tags

HTML and CSS Syntax (Toggle Plain Text)

var counter = 0;

Help with Code Tags

HTML and CSS Syntax (Toggle Plain Text)

var counter = 3;

And to make the counter count down from 3 change:

Help with Code Tags

HTML and CSS Syntax (Toggle Plain Text)

  counter++;

Help with Code Tags

HTML and CSS Syntax (Toggle Plain Text)

  counter--;

And to change the message:

Help with Code Tags

HTML and CSS Syntax (Toggle Plain Text)

  alert(counter);

Help with Code Tags

HTML and CSS Syntax (Toggle Plain Text)

  alert("Please click on at least " + (counter) + " more links to continue to your download.");

I've tried all these changes and they do work! :lol:

Then to make the script write it on the page I would put in:

Help with Code Tags

HTML and CSS Syntax (Toggle Plain Text)

  document.write("Please click on at least " + (counter) + " more links to continue to your download.");

under the "alert" command - but this overwrites the links.

So I could put:

 Help with Code Tags 
 HTML and CSS Syntax (Toggle Plain Text) 
<script type="text/javascript">
<!--
  document.write("Please click on at least " + (counter) + " more links to continue to your download.");
// -->
</script>
<script type="text/javascript">
<!--
  document.write("Please click on at least " + (counter) + " more links to continue to your download.");
// -->
</script>

in the body of the page - but this stays at 3 when I click on a link.

How do I do this bit???

???

Thanks for the help so far...
Martin

•

Join Date: Dec 2004

Posts: 1,655

Reputation: tgreer is an unknown quantity at this point

Solved Threads: 35

tgreer

Offline

Made Her Cry

Re: Clicked Link Countdown

Feb 16th, 2006

You're on the right track... "document.write()" is deprecated, meaning, it's old and newer browsers may eventually stop supporting it. I doubt it, frankly, but it's best to use a newer method. So, onward to step 2.

One such method is to use the .innerHTML property of an element. Note, this works in all major browsers, but isn't technically part of an HTML specification. I'm showing it to you because it makes the concept very clear. In the final script, it should be changed to one of the DOM methods. Just file that away for "stuff to learn later".

Consider this version of our test page:

 Help with Code Tags 
 HTML and CSS Syntax (Toggle Plain Text) 
<html>
<head>
<script type="text/javascript">
 
var counter = 3;
function link_click()
{
  counter--;
  if (counter != 0)
  {
	document.getElementById("myMessage").innerHTML = "Please click on at least " + counter + " of the links below.";
  }
  else
  {
	document.getElementById("myMessage").innerHTML = "Proceed to download.";
  }
}
 
</script>
</head>
<body>
 
<p id="myMessage">Please click on at least 3 of the links below.</p>
 
<a href="#" id="link_01" onclick="link_click();">Hyperlink 1</a><br />
<a href="#" id="link_02" onclick="link_click();">Hyperlink 2</a><br />
<a href="#" id="link_03" onclick="link_click();">Hyperlink 3</a><br />
 
</body>
</html>
<html>
<head>
<script type="text/javascript">

var counter = 3;
function link_click()
{
  counter--;
  if (counter != 0)
  {
	document.getElementById("myMessage").innerHTML = "Please click on at least " + counter + " of the links below.";
  }
  else
  {
	document.getElementById("myMessage").innerHTML = "Proceed to download.";
  }
}

</script>
</head>
<body>

<p id="myMessage">Please click on at least 3 of the links below.</p>

<a href="#" id="link_01" onclick="link_click();">Hyperlink 1</a><br />
<a href="#" id="link_02" onclick="link_click();">Hyperlink 2</a><br />
<a href="#" id="link_03" onclick="link_click();">Hyperlink 3</a><br />

</body>
</html>

We've added a paragraph. Our script decrements the counter, and dynamically changes the text of the paragraph, using the value of our counter inside the text.

If the counter reaches zero, we change the paragraph completely.

You should research "document.getElementById()" and ".innerHTML", as they are the keys to this functionality.

Digest that, and we'll move on to step 3.

Last edited by tgreer; Feb 17th, 2006 at 5:36 pm.

•

Join Date: Aug 2005

Posts: 102

Reputation: martinkorner is an unknown quantity at this point

Solved Threads: 0

martinkorner martinkorner is offline

Offline

Junior Poster

Re: Clicked Link Countdown

Feb 17th, 2006

Right...next:lol:

Martin

•

Join Date: Dec 2004

Posts: 1,655

Reputation: tgreer is an unknown quantity at this point

Solved Threads: 35

tgreer

Offline

Made Her Cry

Re: Clicked Link Countdown

Feb 17th, 2006

Next is to open a window. In this version, we add back our HREF's so the links actually go somewhere.

Notice the new onclick attributes. It now looks like:

return link_click(this);

What that does is tell the link that we expect the function to "return" a true or false. If a "false" is returned, then we "cancel" the click. Why? Because we will do the navigation in our script, we don't want the actual hyperlink to do what it would normally do: navigate to the page.

We also pass in a parameter called "this". "This" is a special keyword that passes in the current object, which is our hyperlink. Notice the function? It will store "this" in a variable, "x".

We added a "window.open()" statement. You need to research that. We pass in a URL. What URL? x.href, the URL value from the hyperlink's HREF attribute.

That will open the page in a new window.

Lastly, we return false, to cancel the hyperlink click. If we didn't do that, our main page would ALSO navigate, which we don't want to do.

 Help with Code Tags 
 HTML and CSS Syntax (Toggle Plain Text) 
<html>
<head>
<script type="text/javascript">
 
var counter = 3;
function link_click(x)
{
  counter--;
  if (counter != 0)
  {
	document.getElementById("myMessage").innerHTML = "Please click on at least " + counter + " of the links below.";
  }
  else
  {
	document.getElementById("myMessage").innerHTML = "Proceed to download.";
  }
 
  window.open(x.href,'');
  return false;
}
 
</script>
</head>
<body>
 
<p id="myMessage">Please click on at least 3 of the links below.</p>
 
<a href="http://www.tgreer.com" id="link_01" onclick="return link_click(this);">T.Greer's Site</a><br />
<a href="http://www.daniweb.com" id="link_02" onclick="return link_click(this);">Daniweb</a><br />
<a href="http://www.google.com" id="link_03" onclick="return link_click(this);">Search Engine</a><br />
 
</body>
</html>
<html>
<head>
<script type="text/javascript">

var counter = 3;
function link_click(x)
{
  counter--;
  if (counter != 0)
  {
	document.getElementById("myMessage").innerHTML = "Please click on at least " + counter + " of the links below.";
  }
  else
  {
	document.getElementById("myMessage").innerHTML = "Proceed to download.";
  }

  window.open(x.href,'');
  return false;
}

</script>
</head>
<body>

<p id="myMessage">Please click on at least 3 of the links below.</p>

<a href="http://www.tgreer.com" id="link_01" onclick="return link_click(this);">T.Greer's Site</a><br />
<a href="http://www.daniweb.com" id="link_02" onclick="return link_click(this);">Daniweb</a><br />
<a href="http://www.google.com" id="link_03" onclick="return link_click(this);">Search Engine</a><br />

</body>
</html>

•

Join Date: Aug 2005

Posts: 102

Reputation: martinkorner is an unknown quantity at this point

Solved Threads: 0

martinkorner martinkorner is offline

Offline

Junior Poster

Re: Clicked Link Countdown

Feb 17th, 2006

WOW - Thanks alot for all the help so far!!! :lol:

So I would put:

 Help with Code Tags 
 HTML and CSS Syntax (Toggle Plain Text) 
document.getElementById("myMessage").innerHTML = "Thank you, You may now click " + "<a href='download.html'>here</a>" + " to proceed to the " + "<a href='download.html'>download</a>" + ".";
document.getElementById("myMessage").innerHTML = "Thank you, You may now click " + "<a href='download.html'>here</a>" + " to proceed to the " + "<a href='download.html'>download</a>" + ".";

to make a link to the downloads page.

A few more questions:
1) How do I make the script write the "proceed to download" text even when there are -1 clicks needed or -2 etc.

2) Would it be possible to open the new windows in the background - so my page will stay on top until the user clicks on the tab at the bottom of the screen to view the page.

3) Will this script work in all browsers, or will I have to provide another link directly to the download for certain browsers?

Thanks
Martin

•

Join Date: Dec 2004

Posts: 1,655

Reputation: tgreer is an unknown quantity at this point

Solved Threads: 35

tgreer

Offline

Made Her Cry

Re: Clicked Link Countdown

#10

Feb 17th, 2006

•

Originally Posted by martinkorner

WOW - Thanks alot for all the help so far!!! :lol:

So I would put:
Help with Code Tags

HTML and CSS Syntax (Toggle Plain Text)
document.getElementById("myMessage").innerHTML = "Thank you, You may now click " + "<a href='download.html'>here</a>" + " to proceed to the " + "<a href='download.html'>download</a>" + ".";
document.getElementById("myMessage").innerHTML = "Thank you, You may now click " + "<a href='download.html'>here</a>" + " to proceed to the " + "<a href='download.html'>download</a>" + ".";
to make a link to the downloads page.

That should work. Test it. You can place any string as the value of ".innerHTML", so play with your tags etc. until you get what you want.

•

1) How do I make the script write the "proceed to download" text even when there are -1 clicks needed or -2 etc.

You would alter this line if (counter != 0) . The part inside the parantheses is called an "expression". Right now the expression tests to see if counter is not equal to 0. You would change the expression to test to see if counter is less than or equal to 0: if (counter <= 0) .

•

2) Would it be possible to open the new windows in the background - so my page will stay on top until the user clicks on the tab at the bottom of the screen to view the page.

Maybe, but don't. Users don't expect that, and doing anything contrary to what users expect irritates them. Research the "onblur" event handler and the "focus()" method. It might be possible to add something to your body tag:

<body onblur="self.focus();">

I haven't tested that, you'll need to experiment.

•

3) Will this script work in all browsers, or will I have to provide another link directly to the download for certain browsers?

All modern browsers, yes.

To further enhance your script, research JavaScript arrays. As each link is clicked, you could store it's ID in an array. Then, check to see if the current ID (x.id) is alreadly in the array. If it is, they've already clicked that link. Change the text to read "please click a different link" or something like that.

You can also remove links they've already clicked. Check into "CSS visibility".