Results 1 to 5 of 5

Thread: Disable / Enable Links On A Page

  1. #1
    Join Date
    Jun 2006
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Disable / Enable Links On A Page

    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:
    Code:
    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:
    Code:
    	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!

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    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:

    Code:
    doLinks(0);
    to enable:

    Code:
    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:

    HTML Code:
    <input type="button" onclick="doLinks(0);" value="Disable Links">
    <input type="button" onclick="doLinks(1);" value="Enable Links">
    Last edited by jscheuer1; 02-01-2008 at 10:15 PM. Reason: spelling
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jun 2006
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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?

  4. #4
    Join Date
    May 2007
    Location
    Canada
    Posts
    85
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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):

    Code:
    <!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.
    Last edited by jscheuer1; 02-02-2008 at 04:25 PM. Reason: upgrade code
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •