How to disable a Hyper Link?

**solidcodes** · Jul 18, 2008 14:36

I wonder if this is possible.

Let say i have a link or hyper link.

after i click that link (left click) the link will disable and turn it's color into gray.

is this possible in php? if no possible in php maybe javascript or css?

any sample? or tutorial?

Thank you a ton.

**cascadingstylez** · Jul 18, 2008 15:26

You would need to use Javascript and modify the anchor through the DOM. You cannot stop a link from being clickable. To do this you would need to use Javascript. You could use PHP but that would require a new page request.

You have 2 options.

1) Grey it out using CSS. To do this you would need to go through the DOM and give or change that anchors class. You could modify the style directly also.

2) Remove the <a> and replace it with a <span>

**solidcodes** · Jul 18, 2008 20:14

hi cascadingstylez

thanks for the reply man.

but could you give me sample please.

**cdsanchez** · Jul 18, 2008 22:00

You'll need jQuery for this piece of code:

Code:

  $(document).ready(function(){
    $("a").click(function () { 
      $(this).fadeTo("fast", .5).removeAttr("href"); 
    });
  });

If you don't use jQuery I would suggest using it since it sounds like you'll need it for odd jobs throughout your project. It's elegant, compact, and very easy to use

**sk89q** · Jul 18, 2008 22:05

Or without jQuery, since it would be overkill for just this (and that code does it for every link):

Code css:

a.disabled:link, a.disabled:visited { color: grey; }

Code html:

<a href="http://example.com" onclick="this.removeAttribute('href');this.className='disabled'">Link</a>

**cdsanchez** · Jul 18, 2008 22:09

Originally Posted by sk89q

Or without jQuery, since it would be overkill for just this (and that code does it for every link):

Code css:

a.disabled:link, a.disabled:visited { color: grey; }

Code html:

<a href="http://example.com" onclick="this.removeAttribute('href');this.className='disabled'">Link</a>

Or that, but you can narrow the selector down to classes, or anchors within a certain div with jQuery as well (and you wouldn't have to add the onClick even to each anchor)

Code:

  $(#document).ready(function(){
    $("#disabled a").click(function () { 
      $(this).fadeTo("fast", .5).removeAttr("href"); 
    });
  });

If this is the only thing you need to do jQuery is overkill, like sk89j said.

**joebert** · Jul 19, 2008 00:35

If this is for something mission critical, you'll want to use PHP.

If this is just something to enhance visitor experience, something like this will work in modern browsers.

Code html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>Title</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
	<style type="text/css">
	span.dis-able
	{
		color: #666;
	}
	span.dis-able > a
	{
		color: #123456;
	}
	span.dis-able > span, span.dis-able > a:visited
	{
		display: none;
	}
	span.dis-able > a:visited + span
	{
		display: inline;
	}
	</style>
</head>
<body>
	<div>
		<span class="dis-able"><a href="#anchor">Anchor Here</a><span>Anchor Here</span></span>
		<br/>
		<span class="dis-able"><a href="http://non-existant.com/">Unvisited Link</a><span>Unvisited Link</span></span>
	</div>
</body>
</html>

User Tag List

Thread: How to disable a Hyper Link?

Thread Tools

Display

How to disable a Hyper Link?

Bookmarks

Bookmarks

Posting Permissions