Geeks With Blogs

Tim Huffam Dotting the I and crossing the T of I.T.

IE supports provides a half-baked implementation of the non-standard attribute 'disabled' on anchor tags (ie it changes it's color -even though it does not actually disable the anchor (if it has an href value).  Firefox does not provide any support for it. 

To add full 'disable' functionality to both browsers there are a couple of work arounds (hacks):

  • Override the onclick event of the anchor (to do nothing) and override the visual settings.

or, more simply

  • Add or remove the href attribute (both browsers will enable/disable the anchor with this method).

    This causes both browsers to remove hyperlink behaviour: remove the underline, remove the hover mouse pointer (hand) and don't color the text blue.  It does not, however cause the anchor to be greyed out (which you can easily do if you wish).

    To allow this to work you need to store the existing href value - I just add another (non standard html) attribute eg href_bak.

    Eg:

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";
  }
}

HTH

Tim

PS - I've just (9 May 06) updated the JS above - god knows what I was thinking with the original post :-s  Thanks Heath K for the wake up call!

Posted on Thursday, January 19, 2006 12:54 PM ASP.NET , PHP (incl PhpMyAdmin) , Web Development, JavaScript & CSS | Back to top


Comments on this post: IE and Firefox compatible javascript to enable or disable an anchor tag

# re: IE and Firefox compatible javascript to enable or disable an anchor tag
Requesting Gravatar...
Why would you want to display a disabled anchor?

I would either choose to not display the anchor at all, or replace the onclick with some alert message e.g. "You must enter your name before clicking on this link"
Left by Brian on Jan 24, 2006 6:44 PM

# re: IE and Firefox compatible javascript to enable or disable an anchor tag
Requesting Gravatar...
Thanks Tim, I'm making a web ap that uses a modal dialog, and I needed to disable all form elements and anchors any time it's visible. This did it for the anchors. Nice one!
Left by Jake on Feb 28, 2006 9:00 AM

# re: IE and Firefox compatible javascript to enable or disable an anchor tag
Requesting Gravatar...
John - try adding another element so you can debug this eg <input onclick="alert(xxx.attributes['href']);alert(xxx.attributes['href_bak'])"> where xxx is either of your anchor tags. It sounds to me like you're not resetting the href (setting it to blank disables the anchor tag) - so check what your storing and resetting.

hth
t
Left by Tim on Mar 05, 2006 6:14 AM

# re: IE and Firefox compatible javascript to enable or disable an anchor tag
Requesting Gravatar...
could this be used when calling a dhtml layer "popup" as well? i need to keep a user within the dhtml layer and not allow them to click any links outside of that layer. how could i modify the above code for such a situation?
Left by rob on Mar 16, 2006 5:15 PM

# re: IE and Firefox compatible javascript to enable or disable an anchor tag
Requesting Gravatar...
Thanks! I'm using this from ASP.NET code to make our application more Firefox friendly.
Left by Paul on May 30, 2006 7:06 PM

# re: IE and Firefox compatible javascript to enable or disable an anchor tag
Requesting Gravatar...
Great code thanks i was trying to find a DOM way to this tricks.. your code was working first shot.
Left by Tommy on Jun 20, 2006 11:47 AM

# re: IE and Firefox compatible javascript to enable or disable an anchor tag
Requesting Gravatar...
Thank you very much.Your code makes my life easier
Left by Raja on Sep 01, 2006 8:10 AM

# re: IE and Firefox compatible javascript to enable or disable an anchor tag
Requesting Gravatar...
Thanks from me too!

I have header LinkButtons that need to be disabled in the default view, but fire sort events by category when in the search results view. When I disabled them I lost control of their appearance. This allows me to handle that too.

Thanks again!
Left by Jon on Sep 06, 2006 6:26 PM

# re: IE and Firefox compatible javascript to enable or disable an anchor tag
Requesting Gravatar...
Here's a hack I came up with to do this:

<span id="span1"><a href="myfile.html" id="link1">My file</a></span>

<script language="Javascript">
document.getElementById('span1').innerHTML = document.getElementById('link1').innerHTML
</script>

Basically, the Javascript replaces everything inside the span tag with everything between the a href tag, effectively stripping out the a href tag. Not pretty, but it works in both IE and FF.
Left by WarrenG on Sep 14, 2006 4:06 AM

# re: IE and Firefox compatible javascript to enable or disable an anchor tag
Requesting Gravatar...
You could also use a hidden span tag to temporarily store the value of the original span tag before you trash it. That way you could restore it if needed (enable it).
Left by WarrenG on Sep 14, 2006 4:19 AM

# re: IE and Firefox compatible javascript to enable or disable an anchor tag
Requesting Gravatar...
reall cool and works great. i needed this for my page to prevent multiple crazy clicks from users while my ajax script is grabbing data from server. my anchor links are page numbers. now, they just have to wait while data is loading. sweet.
Left by kevin knight on Sep 28, 2006 12:34 AM

# re: IE and Firefox compatible javascript to enable or disable an anchor tag
Requesting Gravatar...
Here is another hack

// create a style that is hidden
.hidden
{
position:absolute;
left:0px
top:-100px;
width:0px;
height:0px;
overflow:hidden;
}


// wrap your anchor tag in a span tag

<span id="anchorOff" class="hidden">
<a href="javascript:onclick=editCustomer();">Edit Customer</a>
</span>



// use an onChange event to call a function to make the anchor visible by changing the style sheet
function activateAnchor()
{
document.all["anchorOff"].className = 'visible';
}
Left by Mike S on Oct 12, 2006 10:48 AM

# re: IE and Firefox compatible javascript to enable or disable an anchor tag
Requesting Gravatar...
Thank you very much Tim , this is what iam exactly looking for .
Left by Sai on Jan 21, 2007 5:21 PM

# re: IE and Firefox compatible javascript to enable or disable an anchor tag
Requesting Gravatar...
Just wanted to give mad ups for the script...helped me tremendously!
Left by Grateful on Feb 15, 2007 4:26 PM

# re: IE and Firefox compatible javascript to enable or disable an anchor tag
Requesting Gravatar...
Thanks for the script...But, this doesn't work if the anchor tag has javascript function assigned to its onclick attribute. Even after disabling the anchor, javascript function still gets executed on click of the anchor tag. So, a hack of it, though completely based on the above hack, is here. I think it disables the link completely and enables it whenever you want...
function disableAnchor(obj, disable){
if(disable){
var href = obj.getAttribute("href");
var onclick = obj.getAttribute("onclick");
alert(onclick);
if(href && href != "" && href != null){
obj.setAttribute('href_bak', href);
}
if(onclick != null){
obj.setAttribute('onclick_bak', onclick);
obj.setAttribute('onclick', "void(0);");
}
obj.removeAttribute('href');

obj.style.color="gray";
}
else{
if(obj.attributes['onclick_bak']!=null)
obj.setAttribute('onclick', obj.attributes['onclick_bak'].nodeValue);
if(obj.attributes['href_bak']!=null)
obj.setAttribute('href', obj.attributes['href_bak'].nodeValue);
obj.style.color="blue";
}
}
Thanks,
Ravi
Left by Ravi Kishore on Mar 07, 2007 10:22 AM

# re: IE and Firefox compatible javascript to enable or disable an anchor tag
Requesting Gravatar...
hi all
i am new comer in web design, i had a problem with my design, i make my site with adobe photoshop and dreamweaver. i used firefox for default browser. when i open my browser in mozilla, my webs its fine, but when i open with IE, my webs its very mess.
can you all help me, for my trouble.
Left by gentong on Mar 23, 2007 7:59 AM

# re: IE and Firefox compatible javascript to enable or disable an anchor tag
Requesting Gravatar...
Thanks a lot for the script, this is exactly what I was trying to do - disable LinkButton while postback is in progress. I had to modify the script to get this to work in Safari. I have tested this in IE6 and 7, Firefox 2, both on PC and Mac and Safari 2.0.4

function disableAnchor(objId, disable)
{
var obj = document.getElementById(objId);
if(obj != null)
{
if(disable)
{
var href = obj.getAttribute("href");
var onclick = obj.getAttribute("onclick");
//First we store previous value in a new attribute
if(href && href != "" && href != null)
{
obj.setAttribute('href_bak', href);
}
if(onclick != null)
{
obj.setAttribute('onclick_back', onclick);
obj.setAttribute('onclick', "void(0);");
}
obj.removeAttribute('href');
//obj.style.color="gray";
}
else
{
var hrefBack = obj.getAttribute("href_bak");
var onclickBack = obj.getAttribute("onclick_back");
if(onclickBack !=null )
{
obj.setAttribute('onclick', onclickBack);
obj.removeAttribute('onclick_back');
}
if(hrefBack !=null )
{
obj.setAttribute('href', hrefBack);
obj.removeAttribute('href_bak');
//obj.style.color="blue";
}
}
}
}
Left by Amplus on Mar 26, 2007 8:59 PM

# re: IE and Firefox compatible javascript to enable or disable an anchor tag
Requesting Gravatar...
I've just done some rudimentary, old-school web stuff ... I put anchor tags on a page and it doesn't work in IE. Please advise, I have absolutely no idea why it won't work.

The specific page is www.sachemsfc.com/coaches.html

Each "coach bio" link goes to an anchor on the page.

Thank you so much for your help!
Left by Jason Miller on Jun 11, 2007 3:24 PM

# re: IE and Firefox compatible javascript to enable or disable an anchor tag
Requesting Gravatar...
Hi Jason - the problem is occurring because your named anchors are empty. To fix insert something - at the very least a non-blank space eg:
Replace this:
&lt;a name="JMiller"&gt;&lt;/a&gt;
With this:
&lt;a name="JMiller"&gt;&nbsp;&lt;/a&gt;

HTH
Tim
Left by Tim Huffam on Jun 11, 2007 4:24 PM

# re: IE and Firefox compatible javascript to enable or disable an anchor tag
Requesting Gravatar...
Hi there,

You all sound as though you know what your doing. Would like to ask you for your help :)

I am currently creating a website, in Dreamweaver in which it looks fine with Internet Explorer but not in Firefox.

This may not be the first website iv tried to create through dreamweaver but i am still new and when you talk about anchors and things im totally lost.

Let alone where to put code :)

Please Help, You'd be a great help.

Leah
Left by Leah Marshall on Jul 12, 2007 1:38 PM

# re: IE and Firefox compatible javascript to enable or disable an anchor tag
Requesting Gravatar...
am not able to bring back or enable the link

I have something like this...

&amp;lt;a href=&amp;quot;#&amp;quot; id=&amp;quot;expand_lnk&amp;quot; onclick=&amp;quot;disableAnchor(this,true)&amp;gt;Expand All&amp;lt;/a&amp;gt;|
&amp;lt;a href=&amp;quot;#&amp;quot; id=&amp;quot;collapse_lnk&amp;quot; onclick=&amp;quot;disableAnchor(this,true)&amp;gt;Collapse All&amp;lt;/a&amp;gt;

on click of collapse i need to enable or make visible Expand All link and vise versa..
Pls help, i think only QA ppl can click twice/thrice... n times on a link ... :)

-Sanjeev
Left by Sanjeev on Oct 12, 2007 1:27 PM

# re: IE and Firefox compatible javascript to enable or disable an anchor tag
Requesting Gravatar...
i think i am not getting the handle or reference to the link
Left by sanjeev on Oct 12, 2007 1:41 PM

# re: IE and Firefox compatible javascript to enable or disable an anchor tag
Requesting Gravatar...
I have one question: Why on eath those "eggheads" in Microsoft did not provide an attribute to disable that darn anchor element?!?
Left by Alex on Nov 12, 2007 3:25 AM

# Refined function
Requesting Gravatar...
I liked the function posted above, and decided to fix it up a bit so it can be used a little more genericaly.



function ToggleAttribute( obj, DoEnable, TagName) {
if( DoEnable) {
var TagValue = obj.getAttribute("back[" + TagName + "]");
if( TagValue != null ) {
obj.setAttribute( TagName, TagValue);
obj.removeAttribute("back[" + TagName + "]");
}
} else {
var TagValue = obj.getAttribute("TagName");
if( TagValue != null ) {
obj.setAttribute("back[" + TagName + "]", TagValue);
}
obj.removeAttribute( TagName );
}
}

usage...

ToggleAttribute( DomObject, false, "href");
ToggleAttribute( DomObject, false, "onClick");
etc etc...
I set it so "false" means disable, and "true" means enable. seems a little more human-logical to me.
Anyways, the function stores all the backups inside of "back[?]", so if for some reason you needed to cycle through these with some other function, like a "RestoreAll" routine or something, it would be easy to identify the backups and their orig name.

I am using this function as of this moment for a list of anchors that need to be disabled/enabled based on a list.

good luck,
Gareth Pursehouse
Left by Gareth Pursehouse on Dec 11, 2007 7:15 AM

# Above function fixed
Requesting Gravatar...
sorry, the function I wrote above is wrong. use this.


function ToggleAttribute( obj, DoEnable, TagName) {
if( DoEnable) {
var TagValue = obj.getAttribute("back_" + TagName);
if( TagValue != null ) {
obj.setAttribute( TagName, TagValue);
obj.removeAttribute("back_" + TagName);
}
} else {
var TagValue = obj.getAttribute( TagName );
if( TagValue != null ) {
obj.setAttribute("back_" + TagName, TagValue);
}
obj.removeAttribute( TagName );
}
}
Left by Gareth Pursehouse on Dec 11, 2007 7:29 AM

# re: IE and Firefox compatible javascript to enable or disable an anchor tag
Requesting Gravatar...
Hi Friends,

I have one scenario like , iam using the DataList control for displaying the Hyperlinks , in that some of the links may be disabled at initial load. And iam doing something in the onclick of the hyperlink button at client side. For this iam handling link.disabled .

This is working fine with the IE's all versions.

But problem with FireFox,


Can anyone help me ..?



Thanks,
Pradeep Kumar


Left by Pradeep on Dec 12, 2007 2:27 AM

# IE and Firefox compatible javascript to enable or disable an anchor tag
Requesting Gravatar...
I got a link on my site, that I want to be almost invisible, except when the mouse hovers over it :)

I found this script, but it doesnt seems to work in IE, but its it does in FireFox

<SCRIPT language="JavaScript1.2">
<!-- Script courtesy of http://www.web-source.net - Your Guide to Professional Web Site Design and Development
function makevisible(cur,which){
strength=(which==0)? 1 : 0.2
if (cur.style.MozOpacity)
cur.style.MozOpacity=strength
else if (cur.filters)
cur.filters.alpha.opacity=strength*100
}
// -->
</SCRIPT>

HELP

What can I do to make it work in both browsers? :)
Left by merdenoms on Jan 13, 2008 7:52 AM

# re: IE and Firefox compatible javascript to enable or disable an anchor tag
Requesting Gravatar...
ups html worked here
@ equals a

<@ href="http://www.helpme.plz" target="_blank" style="filter:alpha(opacity=20);-moz-opacity:0.2" onMouseover="makevisible(this,0)" onMouseout="makevisible(this,1)"> HELP </@>
Left by merdenoms on Jan 13, 2008 7:54 AM

# re: IE and Firefox compatible javascript to enable or disable an anchor tag
Requesting Gravatar...
Hi! I have this scenario. I have 5 links. on load of the index page only the first two links are enabled (ie., Home and Pretest) the user will click the pretest link whick launch a .swf file after the user has finished taking the test the pretest link will be disabled and enable the third link which "lesson". after the reading the lesson a button will be click to enable the next link and at the same time disable the lesson link. how do I achieved this?
Left by Simply Me on Feb 22, 2008 12:35 AM

# re: IE and Firefox compatible javascript to enable or disable an anchor tag
Requesting Gravatar...
Thanks, Tim!!!

Nice crisp code; works like a charm!
Left by Forrest on Mar 17, 2008 5:50 PM

# re: IE and Firefox compatible javascript to enable or disable an anchor tag
Requesting Gravatar...
Thanks Tim,

Ur solution , that remove attribute helps me to disable link button on my web form.
Left by Prakash on May 16, 2008 6:30 PM

# re: IE and Firefox compatible javascript to enable or disable an anchor tag
Requesting Gravatar...
Worked perfectly in every browser except to IE.

This what I have changed:

From:
obj.setAttribute('href', obj.attributes['href_bak'].nodeValue);
To:
obj.setAttribute('href', '');


Have a great day.
Left by Thanks Tim on Jun 13, 2008 8:55 AM

# re: IE and Firefox compatible javascript to enable or disable an anchor tag
Requesting Gravatar...
Wrong post above, this the correct one:

From:
obj.removeAttribute('href');
To:
obj.setAttribute('href','');
Left by Thanks Time on Jun 13, 2008 8:58 AM

# re: IE and Firefox compatible javascript to enable or disable an anchor tag
Requesting Gravatar...
Hi All, I am writing a .NET code with lots java scripting, its compatible with only IE so far and I want it to work on any browser so can anyone suggest me how to achieve this?

Thanks a lot.

Ashish
ashish.goel528@gmail.com
Left by ashish on Sep 10, 2008 7:06 AM

# re: IE and Firefox compatible javascript to enable or disable an anchor tag
Requesting Gravatar...
Hi Ashish,

Take a look to this topic:
Migrate apps from Internet Explorer to Mozilla (http://www-128.ibm.com/developerworks/web/library/wa-ie2mozgd)
Left by Farrokh on Sep 21, 2008 11:12 AM

# re: IE and Firefox compatible javascript to enable or disable an anchor tag
Requesting Gravatar...
Hi,

The getElementById().click does not works with Mozilla and Safari but its working with IE6 & IE7.

Here's what i am trying to do -
I am trying to avoid the window being blocked by popup blockers

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript">
function loadClick(id)
{
var obj = document.getElementById(id);
obj.href = "http://www.google.com";
obj.click();
}
</script>
</head>
<body onload="loadClick('usSearchLink');">
a
</body>
</html>

Does anyone has idea???

Thanks
Riyaz
Left by riyaz on Nov 13, 2008 11:19 PM

# re: IE and Firefox compatible javascript to enable or disable an anchor tag
Requesting Gravatar...
Thank you so much for this post. If I hadn't bumped into this one, it would've taken me a while to figure this out.

Thanks, Tim!!!
Left by JZ on Jun 30, 2009 4:45 PM

# re: IE and Firefox compatible javascript to enable or disable an anchor tag
Requesting Gravatar...
onclick="disableAnchor(this,'verify')"

function disableAnchor(Check_Obj, Check_Id){
var Anchor_id = 's';
thisCheckbox = document.getElementById(Check_Id);
thisAnchor = document.getElementById(Anchor_id);
if(thisCheckbox.checked){
//alert('Y1');
Check_Obj.setAttribute('href',''); //Check_Obj.attributes['href_bak'].nodeValue
Check_Obj.style.color="blue";
//alert('Y2');
}
else{
//alert('N1');

var href = Check_Obj.getAttribute('href');
//alert(href);
if(href && href != "" && href != null){
Check_Obj.setAttribute('href_bak', href);
}
Check_Obj.removeAttribute('href');
Check_Obj.style.color="gray";

//alert('N2');
}
}

I have a href link called "Submit" so I want to enable/disable it based on the checkbox click......plzzz help me out...I am getting no errors on above code....but its not working either....thnks
Left by Milton on Aug 19, 2009 1:41 PM

# re: IE and Firefox compatible javascript to enable or disable an anchor tag
Requesting Gravatar...
Thanks for the resolutions. very helpful.. :)
Left by dipesh on Sep 09, 2009 8:50 AM

# re: IE and Firefox compatible javascript to enable or disable an anchor tag
Requesting Gravatar...
This is exactly what I was looking for.
Thanks for the solution.
:)
Left by Jay on Oct 07, 2009 3:39 PM

# re: IE and Firefox compatible javascript to enable or disable an anchor tag
Requesting Gravatar...
Good Work
Left by Vijay on Jan 13, 2010 12:58 PM

# re: IE and Firefox compatible javascript to enable or disable an anchor tag
Requesting Gravatar...
Thank you for posting this blog. it really help me alot.. very informative blog I should say.. thanks for your tips! God bless!
orange county seo
Left by Seo Orange County on Feb 20, 2011 9:26 PM

# re: IE and Firefox compatible javascript to enable or disable an anchor tag
Requesting Gravatar...
I just wanted to type a simple message so as to appreciate you for the wonderful concepts you are posting at this website. My particularly long internet search has finally been rewarded with brilliant strategies to talk about with my companions. I would believe that we readers are truly fortunate to exist in a remarkable network with many wonderful professionals with great principles. I feel rather grateful to have encountered your web site and look forward to really more amazing times reading here. Thank you again for everything.Bookmarked!new york dress
Left by New York Dress on Feb 25, 2011 2:47 AM

# re: IE and Firefox compatible javascript to enable or disable an anchor tag
Requesting Gravatar...
Thanks Tim, That saved alot of effort. Really appreciate ur help
Left by Pushparaj Samant on Mar 11, 2011 9:45 PM

# re: IE and Firefox compatible javascript to enable or disable an anchor tag
Requesting Gravatar...
Thanks, guys, the scripts helped a lot in solving a similar bug in my project. Seems like many people experience the issue with the div element in IE and Firefox.
Left by Arman McHitaryan on Apr 27, 2011 6:08 AM

# re: IE and Firefox compatible javascript to enable or disable an anchor tag
Requesting Gravatar...
I just like the helpful info you provide to your articles. I will bookmark your weblog and test once more here regularly. I’m slightly sure I’ll be informed many new stuff proper here! Best of luck for the next!

Regards

EverAfternow.com
Left by EverAfter.com on Jul 01, 2011 5:01 AM

# re: IE and Firefox compatible javascript to enable or disable an anchor tag
Requesting Gravatar...
I m a newbie in javascript. I d like to disable/enable a link after a click on a button for a determined time
Left by theseeker on Oct 26, 2011 7:53 AM

Your comment:
 (will show your gravatar)


Copyright © Tim Huffam | Powered by: GeeksWithBlogs.net