Making link unclickable in javascript

Hi!

Im making a little picture presentation and i have currently this working code:

<!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”>
<head>
<title>Pilt</title>
<meta http-equiv=“Content-Type” content=“text/html;charset=utf-8” />
<style type=“text/css”>
#picdiv {
text-align: center;
}
</style>
<SCRIPT type=“text/javascript”>

	  var num=1
      img1 = new Image ()
      img1.src = "pic/pic1.jpg"
      img2 = new Image ()
      img2.src = "pic/pic2.jpg"
      img3 = new Image ()
      img3.src = "pic/pic3.jpg"
	  img4 = new Image ()
      img4.src = "pic/pic4.jpg"
function slideshowForward()

{
num=num+1
if (num==5)
{num=1}
document.mypic.src=eval(“img”+num+“.src”)
}

function slideshowBack()
{
   num=num-1
   if (num==0)
      {num=4}
  document.mypic.src=eval("img"+num+".src")
}

</SCRIPT>
</head>
<body>
<div id=“picdiv”>
<IMG SRC=“pic/pic1.jpg” alt=“” NAME=“mypic” BORDER=0 align=“middle” >

<br />
<A HREF=“JavaScript:slideshowBack()”>Last</a> | <A HREF=“JavaScript:slideshowForward()”>Next</a>
</div>
</body>
</html>

how do i alter my code to make “Last” link unclickable when im on pic1 and “Next” link unclickable when im on pic4?

Im probably just on the verge of getting it done but ive run to dead end in my mind apparently:)

With best wishes,
J.

function slideshowForward()
{
if (num==4)
{ return }
num=num+1
document.mypic.src=eval("img"+num+".src")
}

function slideshowBack()
{
if (num==1)
{ return }
num=num-1
document.mypic.src=eval("img"+num+".src")
}

Doesn’t make the link non-clickable, but stops any action happening. :slight_smile:

Thaks for the swift reply!

But im still wondering, if i want to make that link unclickable text instead of just “doing nothing”, is it a much of a hassle?

J.

Yes it is possible and there are many ways to do it. Here is one way to do it. Following is the markup…


<p><a href="" title="Next">Next</a>Next</a>

Now you could style the p tag to appear as a disabled button and the a tag as the active button and use absolute position to place it on top of the text inside p tag. When the condition is met you can hide the a tag which would make the underlying disabled button visible showing its no longer active.

Any chance you could find couple minutes to clarify how exactly to do that? Im quite new here to html sadly.

J.

Hi Here is small code to make a button disable button. I am not sure how to make it work for a link

<html>
<script>
function enableButton(){
var buttonId = document.getElementById(“someId”);
buttonId.disabled = false;
}

function disableButton(){
var buttonId = document.getElementById(“someId”);
buttonId.disabled = true;
}
</script>
<body>

<button id=“someId” type=“button”>Click Me!</button>
<a href=“#” onclick=“enableButton()”>Enable button</a>
<a href=“#” onclick=“disableButton()”>Disable button</a>
</body>
</html>

You can make a link disabled by returning false from its onclick event.

With your code from the original post, the simple way to do that is to GET RID OF THE JAVASCRIPT PROTOCOL!!

Pardon that outburst. There is not nor ever has been a good reason to use it.

As I was saying, the simple way is to use the inline onclick event of the link.


<a href="#" onclick="return slideshowBack()">Last</a>

and then to update slideshowBack so that it only goes back when it’s appropriate.


function slideshowBack() {
    if (num > 0) {
        num -= 1;
        document.mypic.src=eval("img"+num+".src");
    }
    return false;
}

Returning false prevents the default action for the link from taking place. This allows the script to run, but prevents the link (to “#”) from being followed.

A better way is then to remove the inline onclick event from the HTML code completely, and to attach it via scripting just before the </body> tag.

And finally the ultimate, is to ensure that the page works appropriately without scripting, and then to use scripting to update the page to add scripting links, and to achieve the better user experience.

Hi,

Suppose you are pulling in content from a RSS feed and you want to deactivate all links from the content (including the Title).

You don’t actually have access to the file to add the onclick command to each link and it would very time consuming if you did.

Surely there is a fool-proof way of de-linking links that get pulled in from parsing an xml page.

There is a pretty foolproof way. On the container where the content is written to the page, you place an event handler that disables all clicks.


<div id="rss-content">
    RSS feed content displayed here
    ...
</div>

Now attach an onclick event, where anchor element clicks are cancelled.


document.getElementById('rss-content').onclick = function (evt) {
    evt = evt || window.event;
    targ = evt.target || evt.srcElement;
    if (targ.nodeType === 3) { // handle Opera bug
        targ = targ.parentNode;
    }
    if (targ.NodeType === 1 && targ.nodeName === 'A') {
        return false;
    }
}

Or, you could just cancel all clicks in the rss content area, regardless of what the target is:


document.getElementById('rss-content').onclick = function (evt) {
    return false;
}