Question

To ensure that my site is friendly to non-javascript users, I’ve built it without using JavaScript, and added it once the site was built.

So now I have a link as following:

<a href="http://example.com/panel" id="showPanel">Expand</a>

But if JavaScript is enabled, I use the following code:

$("#showPanel").attr("href", "#showPanel");

to make the link point to #showPanel instead of http://example.com/panel

While this all works fine, I can’t help but wonder if there’s a better way to do this?

Answer 1

Load JS files at the bottom of the page. If the JavaScript you are running is once the page has already loaded, then there shouldn’t be an issue.

$(document).ready(function() {
    // change links.
});

If you are trying to reduce the raw number of lines of JS, you could try to follow some convention and automate the changing of the URLs:

var changeAllLinks = function () {
    var allLinks = $("a[href^='http://example.com']");
    for (int i = 0; i < allLinks.length; i++) {
        allLinks[i].attr("href", "#show" + /* substring for the path */);
    }
};

Just an idea, as something like that (conceptually) may work. You could follow a convention where all links without JS are in the form <a href="http://example.com/foo"> and the change them with JS to <a href="#showFoo">. That way you could loop through all the links and substring to get the path, capitalize the first letter, prepend a #show to the front, and pop it into the href attribute like you are doing.