Viewed: 2141

Stop a click based on the page

Code in 3 minutes

I was set a task in University to make a website in short. Part of the requirement was to make each page link, if you are on that page not be clickable. There are a good few advantages to this, mainly, it being required in this case for usability. This can be done with CSS too, but the browser support is limited, as far as I know to Safari, Chrome and Firefox. I could ignore browser support, but this is kind of a key point also within the course that we must accommodate to older browsers.

jQuery

As always make sure you have jQuery in your code by using Google’s hosted version.

The code

$(document).ready(function(){
    var page = window.location.href;
    var name = page.replace(/.+[\/]([^\/]+)$/,'$1');
            
    if ((name === "index.php") || (name == "sitename.com"))  {
        $("#nav .home").addClass("current");
        $("#nav .home").click(function(){return false;});
    }
    else if (name === "portfolio.php") {                        
        $("#nav .portfolio").addClass("current");
        $("#nav .portfolio").click(function(){return false;});
    }
    else if (name === "blog.php") {                     
        $("#nav .blog").addClass("current");
        $("#nav .blog").click(function(){return false;});
    }
    else {                  
        $("#contact .contact").addClass("current");
        $("#contact .contact").click(function(){return false;});
    }
});

Break down

I’m relatively certain this could be done in fewer lines, but as I’m no jQuery expert, I wasn’t able to achieve it in fewer lines. Though this fits my needs perfectly.

The variables

var page = window.location.href;

This first variable is simple assign the URL of the current page to ‘page’

var name = page.replace(/.+[\/]([^\/]+)$/,'$1');

This is a little trickier to understand, it is a regular expression. In short it replaces the whole of the URL with just the end part, so if we had http://site.com/path/to/file.php, we would just have file.php. The longer explanation being; this part of the regular expression /.+[\/]([^\/]+)$/. .+ is looking to match one or more of any characters that match except a newline. [\/] matches any instances of \ or /. ([^\/]+) is matching any grouped sequences and instances of \ or / at the beginning of the line and if there are any more preceding the match, match them too. The $ is to match the end of the line. Finally the $1 matches the first submatch, basically the end of it eg: “index.php”.

The if statement

if ((name === "index.php") || (name == "sitename.com"))  {
        $("#nav .home").addClass("current");
        $("#nav .home").click(function(){return false;});
    }
    else if (name === "portfolio.php") {                        
        $("#nav .portfolio").addClass("current");
        $("#nav .portfolio").click(function(){return false;});
    }
    else if (name === "blog.php") {                     
        $("#nav .blog").addClass("current");
        $("#nav .blog").click(function(){return false;});
    }
    else {                  
        $("#contact .contact").addClass("current");
        $("#contact .contact").click(function(){return false;});
    }
});

This is an if statement which compares the value of name to every possible page you give it. Which obviously if it finds a match to then add a class of ‘current’ to the link of the page. $("#nav .home").click(function(){return false;}); simply if the link is clicked then nothing will happen. For the final else I found this a little difficult to match the final page it just doesn’t happen with out a comparison that you get with an else if. That’s where my knowledge falters. I’m sure it can be done some way but I’m relying on a unique body ID to select the final page.

Finishing points

I hope this is of some use to you. It’s an easily adjustable code just add as many extra else if’s before the else and change them as needed and it should do the trick. It’s definitely one for smaller websites of course, where as my University one is only four pages.

Next to read

Javascript without jQuery

Start new designs quicker

It’s my aim to help you be a better designer. I’ve made you a simple Adobe Illustrator template to manage your colour, grid and guides. So you’ll get to executing your ideas around 20 minutes sooner every time.

Join my monthlyish email list and I’ll send you the template and new tutorials to help you design beautiful websites. You can unsubscribe anytime.

Subscriptions not currently being accepted and will return shortly.