enable/disable links

**Simply Me** · 02-28-2008, 01:41 AM

Hi! Anyone can help in enabling and disabling a hyperlinks?
I found this script but it wont fit my need so it needs to be fix. Any help is much appreciated. Thanks in advance!

Code:

<script language="Javascript">
function disableAnchor(obj, disable){
if(disable){
var href = obj.getAttribute("href");
if(href && href != "" && href != null){
obj.setAttribute('href_bak', href);
}
obj.removeAttribute('href');
obj.style.color="gray";
}
else{
obj.setAttribute('href', obj.attributes
['href_bak'].nodeValue);
obj.style.color="blue";
}
}
</script>


<body>
<a href="testing.html" onclick="javascript:disableAnchor(this, true)">individuals</a>
| <a href="#" onclick="javascript:disableAnchor(this, true)">groups</a>

</body>

Here is the scenario:
I have 5 links namely Home | Pre-test | Lesson | Post-test | About. On load of my page only the following are hyperlink enabled Home, Pre-test and About. When the user will click the Pre-test link, Page will display containing a .swf file where the user will take a test. In that same page is a link going back to Home page. I'd like that when the user clicks the Home link in the Pre-test page, the Home Page will display but the Lesson link is now enabled and the Pre-test link is now disabled.

Now that the Lesson link is enabled. My other concern is after the user had read the lesson, how should i enable the Post-test link and disable the Lesson link.

Summary of links:
First load of the page links enabled are:
Home | Pre-test | Lesson | Post-test | About

After Pre-test's Home link is clicked:
Home | Pre-test | Lesson | Post-test | About

lastly, after reading the lesson:
Home | Pre-test | Lesson | Post-test | About

**Simply Me** · 02-28-2008, 11:46 PM

anyone who has an idea on how to do this?

**zaphod42** · 02-29-2008, 01:37 AM

I ran into a similar problem and solved it by building a function that grabs the innerHTML of the parent, parses out the string so only the child remains, and parses out the href, then resets the innerHTML to the original string less the href...it seems like there should be an easier way, but this is what I ended up using...

**Simply Me** · 02-29-2008, 02:02 AM

can you post code here?

**zaphod42** · 02-29-2008, 09:18 PM

you may consider using your javascript to set the link initially instead of setting it in html and then changing it...it's easier to change anything you set in javascript because you can assign it as an object or property of an object for easier reference to it later(this isn't generally recommended by everyone, but I take Object Oriented very literally in all of my script).
here is something you can mess around with that might help...
thank you DevGuru for this...

myString = new String("DevGuru.com")
document.write (myString.link(www.devguru.com))

**Simply Me** · 03-02-2008, 04:35 AM

this is what i have so far from other forum....The code below partially answers my query. Note that this is used in frameset.

Code:

<html>
<head>
<script language="javascript" type="text/javascript">
window.onload = firstLoad;
function firstLoad() {
document.getElementById("lesson").removeAttribute("href");
document.getElementById("lesson").style.color = "grey";
document.getElementById("posttest").removeAttribute("href");
document.getElementById("posttest").style.color = "grey";
}
function clickHome() {
document.getElementById("pretest").removeAttribute("href");
document.getElementById("pretest").style.color = "grey";
document.getElementById("lesson").href = "lesson.html";
document.getElementById("lesson").style.color = "";
}
function lessonRead() {
document.getElementById("posttest").href = "posttest.html";
document.getElementById("posttest").style.color = "";
document.getElementById("lesson").removeAttribute("href");
document.getElementById("lesson").style.color = "grey";
}
</script>
</head>
<body>
<a href="home.html" id="home" onClick="clickHome()" target="main">Home</a> | 
<a href="pre-test.html" id="pretest" target="main">Pre-test</a> | 
<a href="lesson.html" id="lesson" target="main">Lesson</a> | 
<a href="post-test.html" id="posttest" target="main">Post-test</a> | 
<a href="about.html" id="about" target="main">About</a> | 
</body>
</html>

The code cannot simultaneously remove two href attribute at the same time. Can this be done?

**zaphod42** · 03-02-2008, 06:10 PM

first of all I'm going to assume that you have your function using onLoad for testing purposes... Second why is the third set of your function different from the others? If you set the href to blank " " it may achieve an easier effect, if not, just loop through the function with different elements.

**zaphod42** · 03-02-2008, 06:15 PM

it would also behoove you to consider not changing your hrefs....look into using CSS to set end change all of this rather than altering your html

**jscheuer1** · 03-02-2008, 07:19 PM

You cannot disable a link with css alone, or even in conjunction with javascript, without some pretty tricky maneuvering of stacked elements. However, with javascript alone, and without messing with the href, you can change whether or not the onclick event of a link returns true or false. If it returns true, the href will execute, false, the href will be skipped.

**zaphod42** · 03-02-2008, 09:34 PM

Disabling the link is probably much more work than it's worth, but you absolutely can change the css with javascript. And you seem to be right that you can't DISABLE the link in css at all, but the user doesn't have to know that...and while you can set the return:false, I like to avoid that when possible because it allows you to separate interface from functionality in your javascript.

The changeLinkJavascript goes on page load to check all the links and change link styling for the link that points to the current page, and sets the href to point to said links anchor rather than taking you off the page or reloading it.

The changeLinkCSS function is just an example of how to change your CSS class to mimic turning off the link.

Code:

<head>
<title>Link Test</title>
<script type="text/javascript">
function changeLinkJavascript(){
	A=document.links.length;
	currURL=window.location;
	alert("your current URL is "+currURL);
	for(i=0;i<=A;i++){
test="not this page";
		el=document.links[i];
		currHREF=el.href;
		if(currURL==currHREF){
test="this page";
			el.href=currHREF+"#"+el.id;
			el.style.color="grey";
			el.style.textDecoration="none";
			el.style.cursor="text";
		}
		alert("the "+el.id+" anchor points to "+currHREF+" which is "+test);
	}
}
function changeLinkCSS(el){
alert("change "+el.id+" class from "+el.className)
	var newClass='testLink2';
	if(!(el.className==newClass)){
	el.className=newClass;
	}
}
</script>
<style type="text/css">
.testLink{}
.testLink2{}
a.testLink:link{color:blue;text-decoration:underline;}
a.testLink:active{color:blue;text-decoration:underline;}
a.testLink:visited{color:red;text-decoration:underline;}
a.testLink:hover{color:red;text-decoration:underline;}
a.testLink2:link{color:grey;text-decoration:none;}
a.testLink2:active{color:grey;text-decoration:none;}
a.testLink2:visited{color:grey;text-decoration:none;}
a.testLink2:hover{color:grey;text-decoration:none;}
</style>
</head>
<body onLoad="changeLinkJavascript();">
<a href="home.html" class="testLink" id="home" onClick="changeLinkCSS(this)" target="main">Div Example</a> | 
<a href="pre-test.html" id="pretest" target="main">Pre-test</a> | 
<a href="lesson.html" id="lesson" target="main">Lesson</a> | 
<a href="post-test.html" id="posttest" target="main">Post-test</a> | 
<a href="about.html" id="about" target="main">About</a> | 
</body>

Remember....javascript is OBJECT ORIENTED, so whenever possible you should use it as such.

Thread: enable/disable links

Thread Tools

Search Thread

enable/disable links

Bookmarks

Bookmarks

Posting Permissions