Disable / Enable Links On A Page

[7079]

I found this nice script that does half of what I need, which is to disable all links on a page. But when I modified the script so that it can enable links, that didn't work out too well for me.

Here is the original script:

function disableLinksByElement(el) {
  if (document.getElementById && document.getElementsByTagName) {
    if (typeof(el) == 'string') {
      el = document.getElementById(el);
    }
    var anchors = el.getElementsByTagName('a');
    for (var i=0, end=anchors.length; i<end; i++) {
      anchors[i].onclick = function() {
        return false;
      };
    }
  }
}

Here's my modified version:

	function disableLinksByElement(el,de) {
	  if (document.getElementById && document.getElementByTagName) {
	    if (typeof(el) == 'string') {
	      el = document.getElementById(el);
	    }
	    var anchors = el.getElementsByTagName('a');
	    for (var i=0, end=anchors.length; i<end; i++) {
	    	if (de == true) {
		      anchors[i].onclick = function() {
		        return false;
		      };
	    	}else{
		      anchors[i].onclick = function() {
		        return true;
		      };
	    	}
	    }
	  }
	}

If anyone can help, that would be greatly appreciated. And I would appreciate it even more if you can tell me what I did wrong so that I can learn from this example, I'm not looking for someone just to fix it, I want to learn from the mistakes.

Thank you in advance!

[jscheuer1]

The original function doesn't necessarily disable all links on a page. It is intended to disable links within an element. That could be the body/document element of the page, in which case it would disable all links on a page. Now if some of these links already had hard coded or directly assigned onclick events, these would also be disabled, but their onclick events would be lost - overwritten. Restoring the links would enable whatever the link's href values are, but not their original onclick events. If onclick events had been assigned to the links via addEventListener() and/or attachEvent(), they wouldn't get disabled or lost.

I'm not sure how complex you need this to be, but at a very simple level - just ordinary links - you could have:

function doLinks(how){
for (var l=document.links, i = l.length-1; i > -1; --i)
if (!how)
l[i].onclick=function(){return false;};
else
l[i].onclick=function(){return true;};
}

Usage - to disable:

doLinks(0);

to enable:

doLinks(1);

If doLinks(1); is the onclick event of a link though, it will be overwritten by doLinks(0); and therefore not work after that. Enabling links would likewise overwrite a link that had doLinks(0); as its onclick event.

You could use buttons to avoid this:

<input type="button" onclick="doLinks(0);" value="Disable Links">
<input type="button" onclick="doLinks(1);" value="Enable Links">

[7079]

The function to disable links will be used on a page that fades out the background and a hidden div will be displayed on top of the page. How about using an image to overlay the entire body which will be transparent and than have the div sit on top of that? So when the user clicks the details button, the div pop ups up and the image is layed on top of the entire page below the div.

I hope that makes sense, it sounds easier than disabling the links and than having to go back and enable them and to attach events etc...

What do you think?

[pman]

Hi 7079,

To me it sounds like you are trying to place a semi-transparent background on entire page and display some sort of message on the screen, and you want the user to interact with that message, instead of clicking on the links behind the message.

Correct me if I'm wrong. But if that's what you want, I think CSS is enough, you don't need any javascript. If you have a div on top of another one with a link, you won't be able to click on the link.

[jscheuer1]

I really haven't looked into the particulars of this specific request, even though I received a PM about it, perhaps I will get to that later. In any case, here is a demo that will work out well in most modern browsers (it includes code to setup the events as well as to disable/enable them - the disabling/enabling code is in red):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.always {
z-index:10;
position:relative;
}
</style>
<script type="text/javascript">
function testAdd(){
alert('test added');
}
window.onload=function(){
for (var l=document.getElementsByTagName('a'), i = 0; i < l.length; i++)
if (l[i].href&&i==0)
if ( typeof window.addEventListener != "undefined" )
    l[i].addEventListener( "click", testAdd, false );
else if ( typeof window.attachEvent != "undefined" )
    l[i].attachEvent( "onclick", testAdd );
else {
    if ( l[i].onclick != null ) {
        var oldOnclick = l[i].onclick;
        l[i].onclick = function ( e ) {
            oldOnclick( e );
            testAdd();
        };
    }
    else
        l[i].onclick = testAdd;
}
}
var doLinks={kill:function(){return;},live:function(){return;}};
if(document.createElement)
doLinks={
el:document.createElement('div'),
kill:function(){
var k=this.el.style;
if(k.position!='absolute'){
k.position='absolute';
k.top=k.left=0;
k.zIndex=9;
k.backgroundColor='gray';
if(typeof k.opacity=='string')
k.opacity='0.01';
else if(typeof k.MozOpacity=='string')
k.MozOpacity='0.01';
else if(typeof k.KhtmlOpacity=='string')
k.KhtmlOpacity='0.01';
else if (document.documentElement.filters){
k.filter='alpha(opacity=1)';
k.backgroundColor='transparent';
}
else
k.backgroundColor='transparent';
k.height=Math.max(document.body.offsetHeight, document.documentElement.offsetHeight)+'px';
k.width=Math.max(document.body.offsetWidth, document.documentElement.offsetWidth)+'px';
}
document.body.appendChild(this.el);
if (document.documentElement.filters&&k.backgroundColor!='gray')
k.backgroundColor='gray';
},
live:function(){document.body.removeChild(this.el);}
};
</script>
</head>
<body>
<input type="button" onclick="doLinks.kill();" value="Kill Links"><br>
<input class="always" type="button" onclick="doLinks.live();" value="Revive Links"><br>
<a href="http://www.google.com/" onclick="alert(this.href);return false;">Test Link with hard coded &amp; 'added/attached' click events</a><br>
<a href="http://www.dynamicdrive.com/">Normal Link</a><br>
<a class="always" href="http://www.dynamicdrive.com/forums/">Always a Link</a>
</body>
</html>

It could fairly easily be adapted to service an element rather than the entire page, as it is currently written to do. But since you can use the always class to exempt any content from the overlay, this hardly seems necessary.