SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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.

  2. #2
    SitePoint Wizard siteguru's Avatar
    Join Date
    Oct 2002
    Location
    Scotland
    Posts
    3,629
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Code:
    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.
    Ian Anderson
    www.siteguru.co.uk

  3. #3
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by siteguru View Post
    Code:
    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.
    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.

  4. #4
    SitePoint Addict
    Join Date
    Apr 2007
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes it is possible and there are many ways to do it. Here is one way to do it. Following is the markup...

    Code:
    <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.

  5. #5
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by semantic7 View Post
    Yes it is possible and there are many ways to do it. Here is one way to do it. Following is the markup...

    Code:
    <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.

  6. #6
    SitePoint Enthusiast
    Join Date
    May 2009
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,683
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    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.

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

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

    Code javascript:
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    SitePoint Member
    Join Date
    Feb 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,683
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by bbyrdhouse View Post
    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.

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

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

    Code javascript:
    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:


    Code javascript:
    document.getElementById('rss-content').onclick = function (evt) {
        return false;
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •