Unobtrusive Javascript: Removing links if Javascript is enabled

Question

I'm using PopBox for magnifying thumbnails on my page. But I want my website to work even for users which turned javascript off.

I tried to use the following HTML code:

<a href="image.jpg">
     <img src="thumbnail.jpg" pbsrc="image.jpg" onclick="Pop(...);"/>
</a>

Now i need to disable the a-Tag using javascript, otherwise my PopBox won't work.

How do I do that?

Answer 1

Put the onclick event onto the link itself, and return false from the handler if you don't want the default behavior to be executed (the link to be followed)

Answer 2

Just put the onclick on the a-tag:

<a href="image.jpg" onclick="Pop(...);return false;"><img ...></a>

Make sure you put the "return false" at the end -- that makes it not follow the anchor link if the js executes.

Answer 3

You could give all your fallback anchor tags a particular classname, like "simple"

Using prototype, you can get an array of all tags using that class using a CSS selector, e.g.

var anchors=$$('a.simple')

Now you can iterate over that array and clear the href attributes, or install an onclick handler to override the normal behaviour, etc...

(Edited to add that the other methods listed above are much simpler, this just came from a background of doing lots of unobtrusive javascript, where your JS kicks in and goes and augments a functioning HTML page with extra stuff!)

Answer 4

The href attribute is not required for anchors (<a> tags), so get rid of it...

   <a id="apic001" href="pic001.png"><img src="tn_pic001.png"></a>

   <script type="text/javascript">
      document.getElementById("apic001").removeAttribute("href");
   </script>

This method will avoid library contention for onclick.

Tested in IE6/FF3/Chrome. Side benefit: You can link directly to the portion of the page containing that thumbnail, using the id as a URI fragment: http://whatever/gallery.html#apic001.

For maximum browser compatibility, add a name="apic001" attribute to the anchor tag in your markup ('name' and 'id' values must be identical).

Using jQuery, dojo, Prototype, etc. you should be able to do the removeAttribute on multiple, similar anchors without needing the id.

Answer 5

You should be able to mix and match the return false from Chris's idea with your own code:

<a href="image.jpg" onclick="return false;">
    <img src="thumbnail.jpg" pbsrc="image.jpg" onclick="Pop(...);">
</a>

If someone has Javascript disabled, then their browser ignores the onclick statement in both elements and follows the link; if they have Javascript enabled, then their browser follows both OnClick statements -- the first one tells them not to follow the <a> link. ^_^

Answer 6

May I suggest, in my opinion, the best solution? This is using jQuery 1.4+.

Here you have a container with all your photos. Notice the added classes.

<div id="photo-container">
    <a href="image1.jpg">
        <img class="popup-image" src="thumbnail1.jpg" pbsrc="image1.jpg" />
    </a>
    <a href="image2.jpg">
        <img class="popup-image" src="thumbnail2.jpg" pbsrc="image2.jpg" />
    </a>
    <a href="image3.jpg">
        <img class="popup-image" src="thumbnail3.jpg" pbsrc="image3.jpg"/>
    </a>
</div>

An then you make a single event handler this way:

<script type="text/javascript">
$(document).ready(function(){
    var container = $('#photo-container');

    // let's bind our event handler
    container.bind('click', function(event){
        // thus we find (if any) the image the user has clicked on
        var target = $(event.target).closest('img.popup-image');

        // If the user has not hit any image, we do not handle the click
        if (!target.length) return;

        event.preventDefault(); // instead of return false;

        // And here you can do what you want to your image
        // which you can get from target
        Pop(target.get(0));
    });
});
</script>