SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Hybrid View

  1. #1
    Patience... bronze trophy solidcodes's Avatar
    Join Date
    Jul 2006
    Location
    Philippines
    Posts
    933
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    Arrow How to disable a Hyper Link?

    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.

  2. #2
    SitePoint Zealot
    Join Date
    May 2007
    Location
    West Midlands, UK
    Posts
    173
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>

  3. #3
    Patience... bronze trophy solidcodes's Avatar
    Join Date
    Jul 2006
    Location
    Philippines
    Posts
    933
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    hi cascadingstylez

    thanks for the reply man.

    but could you give me sample please.

  4. #4
    SitePoint Zealot
    Join Date
    Jul 2008
    Posts
    140
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  5. #5
    SitePoint Wizard
    Join Date
    Mar 2008
    Posts
    1,149
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>

  6. #6
    SitePoint Zealot
    Join Date
    Jul 2008
    Posts
    140
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by sk89q View Post
    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.

  7. #7
    Floridiot joebert's Avatar
    Join Date
    Mar 2004
    Location
    Kenneth City, FL
    Posts
    823
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>


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
  •