Question

So I’m trying to put together a navigation bar and I’ve been using PHP because I’m not familiar with Javascript. I want to create a function that will return the filename of the current page I’m on and then apply css classes appropriately.

the php code

function setNav($section)
{
    $curSection = end(explode('/', $_SERVER['SCRIPT_NAME']));
    if ($section == $curSection)
    {
        echo ' class="active" ';
    }
}

And then I would just initialize it in the html as follows

<a href="abc.def" <?php setNav('index.php'); ?> >Home </a>

For obvious reasons I’d rather do this in JavaScript or Jquery, but I’m having some trouble putting together the function. I’ve looked at a few tutorials, but they leave out a few things.

1. How to pull just the last part of the file name. I’ve seen a couple ideas doing something like:

   <script type="text/javascript">
       var url = document.location.href;
       url = url.substring(0, (url.indexOf("#") == -1) ? url.length : url.indexOf("#"));
       url = url.substring(0, (url.indexOf("?") == -1) ? url.length : url.indexOf("?"));
       url = url.substring(url.lastIndexOf("/") + 1, url.length);
       alert(url);
   </script>
   

   But then I run into problem 2. Also I understand how substring works but I have no idea what he’s doing w/ the second argument for example ‘(url.indexOf(“#”) == -1) ? url.length : url.indexOf(“#”)’ I searched google, w3schools and a couple places for an explanation, also looked into advanced usage of substring() and nothing came up. Any guidance is appreciated.

2. If say the file is the index, the url looks something like localhost/abc_corp/ so doing a document.URL call brings up “localhost/abc_corp/” and leaves out the index.php part.

Any help is appreciated in advance.

Answer 1

If you have a working PHP solution I’m not sure why you want to convert it to JavaScript. PHP is a better place to do it anyway.

Anyway, to explain what your JS is doing, if you have a URL like this:

http://www.somedomain.com/somepage.php?someparam=234#123123

it will throw away anything after the “?” and/or “#”, and anything before the last “/”, thus keeping just the bit that I put in bold.

If your URL does not contain any “/” characters, e.g., you just have “www.somedomain.com”, then it will return the whole string, it can’t invent a filename for you.

How this works: first note that aString.indexOf(param) returns -1 if aSring does not contain param, otherwise it returns the index of the first instance. So the second argument to substring is being set to one of two values depending on what indexOf finds. The following:

var url = document.location.href;
url = url.substring(0, (url.indexOf("#") == -1) ? url.length : url.indexOf("#"));

starts with the full URL, then it checks whether there is a “#” character – if there is not then the substring takes the whole string (0 through to url.length), otherwise it takes the string up to but not including the “#”. Then:

url = url.substring(0, (url.indexOf("?") == -1) ? url.length : url.indexOf("?"));

Same idea, but with “?”. If there isn’t one keep the whole string, otherwise keep everything up to but not including the “?”. Then:

url = url.substring(url.lastIndexOf("/") + 1, url.length);

Takes everything from the character after the last “/” (which will be the first character (“-1 + 1”) if there are none) through to the end of the string.