Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    Regular Coder
    Join Date
    Jan 2006
    Posts
    116
    Thanks
    0
    Thanked 0 Times in 0 Posts

    disable link on load **help**

    right now i have a link that i want disabled on load and enabled when a checkbox is clicked. Currently i'm using "disable" which only grays out the link but it can still be clicked. My code for that is as follows

    Code:
    <script>
    function start() {
    document.getElementById('OnDate1_link').disabled = true;
    }
    
    onload = start;
    </script>
    i would like it to be grayed but also have the link removed so it can't be clicked. any help would be great.

    ~Jamie

  • #2
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Do I take it that the link is a button (rather than a regular text link)?

    css
    Code:
    .hide {
    	display: none; /* or visibility: hidden; */
    }
    js
    Code:
    <script type="text/javascript">
    
    function preHide() {
    	document.getElementById('OnDate1_link').className = 'hide';
    }
    
    window.onload = preHide;
    
    </script>
    To 'unhide' it, simply set the object's className to nothing…

    e.g.
    Code:
    document.getElementById('OnDate1_link').className = '';
    (It's generally more reliable than using removeAttribute().)

  • #3
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    You may play with return false, return true


    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
    <
    html>
    <
    head>
    <
    title>Untitled Document</title>
    <
    meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <
    meta http-equiv="Content-Style-Type" content="text/css">
    <
    meta http-equiv="Content-Script-Type" content="text/javascript">
    <
    script type="text/javascript">
    function 
    activLink(b){
    document.getElementById('mylink').onclick=function(){return b}
    }
    </script>
    </head>
    <body>
    <input type="checkbox" onclick="activLink(this.checked)">
    <a id="mylink" href="http://www.google.com" onclick="return false">link</a>
    </body>
    </html> 
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #4
    Regular Coder
    Join Date
    Jan 2006
    Posts
    116
    Thanks
    0
    Thanked 0 Times in 0 Posts
    it is in fact a text link and not a button. The code you posted looked like it would work but it would remove the link all together. I'm looking for the Text of the link to still stay there.. but the link itself to be disable (meaning grayed out and unclickable) it that makes any sence.

  • #5
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
    <
    html>
    <
    head>
    <
    title>Untitled Document</title>
    <
    meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <
    meta http-equiv="Content-Style-Type" content="text/css">
    <
    meta http-equiv="Content-Script-Type" content="text/javascript">
    <
    script type="text/javascript">
    function 
    activLink(b){
    document.getElementById('mylink').onclick=function(){return b}
    document.getElementById('mylink').disabled=!b
    }
    </script>
    </head>
    <body>
    <input type="checkbox" onclick="activLink(this.checked)">
    <a id="mylink" href="http://www.google.com" onclick="return false" disabled="true">link</a>
    </body>
    </html> 
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #6
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Moz will not take the disabled attribute, but you may use a style color, something like that, to make it look the same in all browsers
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #7
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Quote Originally Posted by Kor
    Moz will not take the disabled attribute…
    Fwiw, neither will the validator, if you get my drift.
    I'd recommend against using it at all, even if IE does support that attribute on anchors.

    you may use a style color, something like that, to make it look the same in all browsers
    (rough) e.g.
    Code:
    a.disabled {
    	cursor: default;
    	color: #ccc;
    	text-decoration: none;
    }
    
    …
    
    window.onload = function() {
    		
    	activLink(false);
    
    }
    
    function activLink(b) {
    
    	var thisLink = document.getElementById('mylink');
    
    	thisLink.onclick = function() { return b }
    	thisLink.className = (b == true) ? '' : 'disabled';
    
    }
    
    …
    
    <input type="checkbox" onclick="activLink(this.checked)"> Activate link<br>
    <a href="http://www.google.com" id="mylink" onclick="return false;">link</a>

  • #8
    Regular Coder
    Join Date
    Jan 2006
    Posts
    116
    Thanks
    0
    Thanked 0 Times in 0 Posts
    worked great... thanks guys!

  • #9
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Exactly, Bill, this is why I have posted the last one, to indicate an on-the-fly solution instead of disabled, but I was too lazy to write the code... :-)
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #10
    Regular Coder
    Join Date
    Sep 2005
    Location
    Chicago, IL
    Posts
    160
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You could try using the removeAttribute feature.

    Code:
    document.getElementById(id).removeAttribute("href");
    and then use setAttribute to bring it back.

    Code:
    document.getElementById(id).setAttribute("href","http://www.google.com");
    Last edited by boxxer03; 05-25-2006 at 11:08 PM.
    I'm only telling you how I would do it, not how its supposed to be done. ;)


  •  

    Posting Permissions

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