...

View Full Version : enable links after set amount of clicks



bvdman89
01-23-2007, 03:33 AM
After the user clicks a required amount of links, I want this to enable another button to be clicked (which was previously disabled).

ConnorB
01-23-2007, 05:14 AM
Provide more information of what you're trying to do. Or, show me a Web site that does it. (I doubt you do it with HTML and/or CSS though.)

bvdman89
01-24-2007, 02:57 AM
I want to require users to click 3 links. After they do so, I will allow them to be able to click a new link. If they don't click the required 3 links, they cannot click this new link. A bit confusing, I know. Please ask more if you don't understand. Thanks.
Also, html/javascript will work.

bvdman89
01-25-2007, 01:27 AM
Anyone?

ConnorB
01-25-2007, 04:53 AM
Is this anything relative to a terms of service check box or something? They check all the check boxes and then a link shows up? Will that work or do you need a text link?

bvdman89
01-25-2007, 09:45 PM
That may work.

bvdman89
01-26-2007, 12:11 AM
Kind of when you're installing a program and the user needs to check a box before they can continue. Except, instead of checking a box, I need them to click a certain amount of links before continuing.

BroChris
01-26-2007, 02:19 PM
I think we still need a bit more information. When the user clicks these 3 links, will they stay on the same page each time, or will each of these 3 links send them to a new page each time?

If they transport to a new page each time, I would use some sort of server side scripting to log session variables.

If not transporting to a new page each time, you can probably still use the checkbox method, but hide the checkboxes and use the label tag to associate text with the checkbox, styling it as if it were a link.

bvdman89
01-26-2007, 11:06 PM
It actually sends them to a point lower down on the page. How could I do it with checkboxes?

bvdman89
01-26-2007, 11:45 PM
Also, I would need to have multiple text boxes since the user needs to click multiple links in order to continue.

If anyone knows how to make the code requiring users to check off multiple checkboxes in order to continue, this would be very helful.

Something like this, but I need multiple check boxes:

<SCRIPT language="JavaScript" type="text/javascript">
<!--
function checkCheckBoxAgree(c){
if (c.agree_text.checked == false )
{
alert("Please check the box to continue");
return false;
}else
return true;
}
//-->
</SCRIPT>

<form name="agreeform" action="#">
I accept: <input name="agree_text" type="checkbox" value="0">
<a href="index.html" onclick="return checkCheckBoxAgree(document.forms['agreeform'])">

Arbitrator
01-27-2007, 02:03 AM
Try this: It does this as you originally requested (with hyperlinks). I added a few unnecessary decorations to the code since I was experimenting.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html lang="en-US">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="Author" content="Patrick Garies">
<title>HTML 4.01 Strict Document</title>

<style type="text/css">
ul { list-style-type: decimal; }
a { color: gray; cursor: default; }
a:link, a:visited { color: blue; text-decoration: underline; }
a:link:hover, a:visited:hover { color: navy; cursor: pointer; }
li::before, li::before { content: "★ "; visibility: hidden; color: navy; }
li:hover::before, li:hover::before { visibility: visible; }
li#special:hover::before { visibility: hidden; }
</style>

<script type="text/javascript">
var counter = 0;
document.defaultView.addEventListener("load", basic, false);
function basic() {
var anchors = document.getElementsByTagName("a");
for (var i = 0; i < anchors.length - 1; i++) {
anchors[i].addEventListener("click", verify, false);
}
}
function verify() {
if (!this.nextSibling) {
this.parentNode.appendChild(document.createTextNode(" ✓"));
counter++;
}
if (counter == 3) {
var special = document.getElementById("special");
special.lastChild.data = " ☺";
special.firstChild.setAttribute("href", "http://edition.cnn.com/");
document.styleSheets[0].deleteRule(document.styleSheets[0].cssRules.length - 1);
}
}
</script>

<!--[if IE]>
<script type="text/javascript">
window.onload = basicIE;
function basicIE() {
var anchors = document.getElementsByTagName("a");
for (var i = 0; i < anchors.length - 1; i++) {
anchors[i].onclick = verifyIE;
}
}
function verifyIE() {
if (!this.className) {
this.className = "clicked";
this.parentNode.appendChild(document.createTextNode("✓"));
counter++;
}
if (counter == 3) {
var special = document.getElementById("special");
special.lastChild.data = " ☺";
special.firstChild.setAttribute("href", "http://edition.cnn.com/");
}
}
</script>
<![endif]-->

</head>
<body>

<ul>
<li id="intro"><a href="#inner">Hyperlink</a></li>
<li id="inner"><a href="#final">Hyperlink</a></li>
<li id="final"><a href="#special">Hyperlink</a></li>
<li id="special"><a>Hyperlink</a> (Disabled)</li>
</ul>

</body>
</html>


<SCRIPT language="JavaScript" type="text/javascript">
<!--
function checkCheckBoxAgree(c){
if (c.agree_text.checked == false )
{
alert("Please check the box to continue");
return false;
}else
return true;
}
//-->
</SCRIPT>

<form name="agreeform" action="#">
I accept: <input name="agree_text" type="checkbox" value="0">
<a href="index.html" onclick="return checkCheckBoxAgree(document.forms['agreeform'])">The code in red should be avoided:


The language attribute is deprecated (obsolete) in favor of the type attribute. Unless youíre coding for ancient browsers, itís pointless and redundant.
ďcommenting outĒ your scripts is only necessary for ancient browsers that donít understand what a script element is. Thatís also unnecessary.
Unless you intend to use the action attribute or something else specific to the form element, you can leave it out or replace it with a simple div since itís pointless.
The name attribute is deprecated on the form element in favor of the id attribute.


<script type="text/javascript">
/* (IE‐compatible) */
function checkCheckBoxAgree(c) {
if (!document.getElementById(c).checked) {
alert("Please check the box to continue");
return false;
}
else return true;
}
</script>

Ö

I accept: <input type="checkbox" id="agree_text" value="0">
<a href="index.html" onclick="return checkCheckBoxAgree('agree_text');">Ö

I would also move the onclick attribute to an embedded or external script so that you keep the JavaScript and HTML markup separate; this makes things easier to maintain.

bvdman89
01-27-2007, 02:26 AM
WOW!!! Thanks a lot. It works PERFECTLY:thumbsup:

Just one thing: if I wish to add more required links, how would I do that?

Arbitrator
01-27-2007, 02:55 AM
Add the links and change both instances of counter == 3 to match the number of links that must be clicked. The script is pretty specific, so if you intend to do anything more than basic with it, itíll need some modification.

bvdman89
01-27-2007, 03:03 AM
Great! It still works perfectly. Thanks a lot!

bvdman89
01-27-2007, 06:16 PM
Just one thing: is it hard to make the links images instead of text links?
And also, is it possible to get rid of the numbering (I tried both but it messed everything up)

Arbitrator
01-27-2007, 09:17 PM
Just one thing: is it hard to make the links images instead of text links?Replacing the text with images shouldnít break anything. It will probably make the part of the style sheet that shows the star stop working though since usage of the ::before pseudo‐element is officially undefined for replaced elements.


And also, is it possible to get rid of the numberinglist-style-type: none. Might want to brush up a bit on your CSS skills.

bvdman89
01-28-2007, 02:13 AM
Thanks again. I'm new to all this :confused:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum