javascript - update class based on url

Question

! Latest I've tried. I put it in my head.php which I just include. I'll send over my files if you'd want to see them personally. Directory of my folder

Main_Folder
-Main_files
-- JS_Folder
---- Js Files
-- Includes_Folder
---- Head.php is here


<script type="text/javascript">
jQuery(function($) {
var path = window.location.href; // because the 'href' property of the DOM element is the absolute path
//alert($('ul a').length);
$('ul a').each(function() { 
    if (this.href === path) {
        $(this).addClass('sub-menu active');
    }
    //alert(this.href);
});
}); 
</script>

Whole sidebar:

 <div class="sidebar-scroll">
<div id="sidebar" class="nav-collapse collapse">
 <!-- BEGIN SIDEBAR MENU -->
  <ul class="sidebar-menu">
          <li class="sub-menu">
              <a class="" href="panel-admin.php">
                  <i class="icon-dashboard"></i>
                  <span>Dashboard</span>
              </a>
          </li>
          <li class="sub-menu">
              <a href="javascript:;" class="">
                  <i class="icon-briefcase"></i>
                  <span>Employees</span>
              </a>
          </li>
          <li class="sub-menu">
              <a href="javascript:;" class="">
                  <i class="icon-book"></i>
                  <span>Students</span>
              </a>
          </li>
          <li class="sub-menu">
             <a href="javascript:;" class="">
                  <i class="icon-calendar"></i>
                  <span>Scheduling</span>
                  <span class="arrow"></span>
              </a>
              <ul class="sub">
                  <li><a class="" href="admin-foreign.php">Foreign Languages</a></li>
                  <li><a class="" href="admin-esl.php">ESL Local</a></li>
                  <li><a class="" href="admin-workshop.php">Summer Workshops</a></li>
              </ul>
          </li>
          <li class="sub-menu">
              <a href="javascript:;" class="">
                  <i class="icon-pencil"></i>
                  <span>Enroll</span>
                  <span class="arrow"></span>
              </a>
              <ul class="sub">
                  <li><a class="" href="general.html">Foreign Languages</a></li>
                  <li><a class="" href="button.html">ESL Local</a></li>
                  <li><a class="" href="slider.html">Summer Workshops</a></li>
              </ul>
          </li>

      </ul>
 <!-- END SIDEBAR MENU -->

class="sub-menu" is needed to make it dropdown menus drop. So the active version is class="sub-menu active". In case of a 2 level dropdown menu, both the main bar and sub bar are to be set to active.

---

---

This is my side bar.

<div class="collapse navbar-collapse navbar-ex1-collapse">
        <ul class="nav navbar-nav side-nav">                    
            <li>
                <a href="index.php"><i class="fa fa-fw fa-dashboard"></i> Overview</a>
            </li>
            <li>
                <a href="employee.php"><i class="fa fa-fw fa-dashboard"></i> Employees</a>
            </li>
        </ul>
    </div>

I've tried the following below but none works on my case:

Update class attribute based on page URL

https://css-tricks.com/snippets/jquery/add-active-navigation-class-based-on-url/

---

First sample code

$('.menu li a').each(function(){ //check thru all <a> elements inside <li> inside .menu

  var pagename= location.pathname.split('/').pop(); // get current pages filename (just filename)

    if($(this).prop("href") == pagename){
        $('.menu li').removeClass("active"); // remove all active class    
        $(this).parent("li").addClass("active"); //put active in parent of <a> which is <li>
   }
});

In the first one, I've changed the menu to collapse navbar-collapse navbar-ex1-collapse and collapse only but neither works.

---

In the second sample code, I've tried doing the following:

$(function() {
  $('nav a[href^="/' + location.pathname.split("/")[2] + '"]').addClass('active');
});

I put [2] since I'm currently in the localhost. So it would be localhost/folder_name/index.php.

I also tried putting "/index.php"/ but when I click that it directs me to localhost/index.php instead of localhost/folder_here/index.php.

---

Third sample code

jQuery(function($) {
 var path = window.location.href; // because the 'href' property of the DOM element is the absolute path
 $('ul a').each(function() {
  if (this.href === path) {
   $(this).addClass('active');
  }
 });
});

Still doesn't work. I've change $('ul a) to $('div ul a) and $('div li ul a).

---

EDIT: Just to be sure, the script created is just included by include('js/js_file.js');. This line should be before or after the html is loaded?

As suggested by David Thomas I've tried the following below. But it doesn't work.

var url = 'window.location.pathname';
$('.nav a').each(function() {
  // get the absolute URL from the <a> element:
  var href = this.href,
    // get the current page and file-type:
    pageAndFile = href.split('/').pop();
  // if the location ends with the pageAndFile found in
  // the current <a> element (using String.prototype.endsWith())
  // we add the 'active' class-name:
  if (url.endsWith(pageAndFile)) {
    $(this).closest('li').addClass('sub-menu active');
  }
});

Answer 1

One approach:

// obviously, use 'document.location'/'window.location' in the real thing:
var fakeLocation = 'http://www.example.com/index.php';

$('.nav a').each(function() {
  // get the absolute URL from the <a> element:
  var href = this.href,
    // get the current page and file-type:
    pageAndFile = href.split('/').pop();
  // if the location ends with the pageAndFile found in
  // the current <a> element (using String.prototype.endsWith())
  // we add the 'active' class-name:
  if (fakeLocation.endsWith(pageAndFile)) {
    $(this).closest('li').addClass('active');
  }
});

.active {
  border: 1px solid red;
}

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="collapse navbar-collapse navbar-ex1-collapse">
  <ul class="nav navbar-nav side-nav">
    <li> <a href="index.php"><i class="fa fa-fw fa-dashboard"></i> Overview</a>

    </li>
    <li> <a href="employee.php"><i class="fa fa-fw fa-dashboard"></i> Employees</a>

    </li>
  </ul>
</div>

JS Fiddle demo.

For those browsers that don't implement String.prototype.endsWith():

// simple shim for String.prototype.endsWith(), for browsers that
// don't yet implement the same:
String.prototype.endsWith = String.prototype.endsWith || function(testString) {
  // creates a regular expression from the passed-in string, followed by the '$'
  // character which signifies that the passed-in string must be followed by the
  // end-of-string:
  var reg = new RegExp(testString + '$');

  // using RegExp.prototype.test() to test that the String we're testing,
  // the 'this,' is matched by the created regular expression:
  return reg.test(this);
};

var fakeLocation = 'http://www.example.com/index.php';

$('.nav a').each(function() {
  // get the absolute URL from the <a> element:
  var href = this.href,
    // get the current page and file-type:
    pageAndFile = href.split('/').pop();
  // if the location ends with the pageAndFile found in
  // the current <a> element (using String.prototype.endsWith())
  // we add the 'active' class-name:
  if (fakeLocation.endsWith(pageAndFile)) {
    $(this).closest('li').addClass('active');
  }
});

.active {
  border: 1px solid red;
}

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="collapse navbar-collapse navbar-ex1-collapse">
  <ul class="nav navbar-nav side-nav">
    <li> <a href="index.php"><i class="fa fa-fw fa-dashboard"></i> Overview</a>

    </li>
    <li> <a href="employee.php"><i class="fa fa-fw fa-dashboard"></i> Employees</a>

    </li>
  </ul>
</div>

JS Fiddle demo.

And, without jQuery, you could do much the same:

// simple shim for String.prototype.endsWith(), for browsers that
// don't yet implement the same:
String.prototype.endsWith = String.prototype.endsWith || function(testString) {
  var reg = new RegExp(testString + '$');
  return reg.test(this);
};

// again, in real-world non-demo use you should use 'document.location':
var fakeLocation = 'http://www.example.com/index.php',
  // finding the last portion of the fakeLocation variable:
  currentPage = fakeLocation.split('/').pop(),
  // getting all the a elements with an href attribute that ends
  // with the currentPage string (after escaping the special
  // characters with the (ugly) regular expression) and the
  // attribute-ends-with ('attribute$=value') selector:
  activeAElements = document.querySelectorAll('.nav a[href$=' + currentPage.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&") + ']');

// using Array.prototype.forEach to iterate over the array-like
// activeAElements NodeList:
Array.prototype.forEach.call(activeAElements, function(a) {
  // the first argument of the function is the array-element,
  // here an <a> element node;
  // we're adding the 'active' class-name to the parentNode of any <a>
  // element that was found by the above selector:
  a.parentNode.classList.add('active');
});

.active {
  border: 1px solid red;
}

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="collapse navbar-collapse navbar-ex1-collapse">
  <ul class="nav navbar-nav side-nav">
    <li> <a href="index.php"><i class="fa fa-fw fa-dashboard"></i> Overview</a>

    </li>
    <li> <a href="employee.php"><i class="fa fa-fw fa-dashboard"></i> Employees</a>

    </li>
  </ul>
</div>

JS Fiddle demo.

As to why your own attempts failed:

$('.menu li a').each(function(){

  var pagename= location.pathname.split('/').pop();

    // the HTMLAnchorElement.href is the absolute URL formed
    // by the href attribute; to find the actual string from
    // an <a> element, you'd need to use either JavaScript:
    //  - this.getAttribute('href');
    // or jQuery's:
    //  - $(this).attr('href'); 
    if($(this).prop("href") == pagename){
        $('.menu li').removeClass("active");
        $(this).parent("li").addClass("active");
   }
});

Your second attempt:

$(function() {
  // this won't work because your JavaScript will return 'index.php',
  // and pass that into the attribute selector; unfortunately this
  // includes the period ('.'), which is a special character in CSS
  // and has to be double escaped, first for the JavaScript and then
  // the CSS
  $('nav a[href^="/' + location.pathname.split("/")[2] + '"]').addClass('active');
  // with that in mind, you'd need to do (something like) the following,
  // which - as in my own code - replaces all special characters with
  // a double-escaped version of that character (so '.' becomes '\\.'):
  $('nav a[href^="/' + location.pathname.split("/")[2].replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&") + '"]').addClass('active');
});

Your third attempt:

jQuery(function($) {
 var path = window.location.href; // because the 'href' property of the DOM element is the absolute path
 $('ul a').each(function() {
  if (this.href === path) {
   $(this).addClass('active');
  }
 });
});

Looks like it should work, albeit you're adding (or should be adding) the 'active' class-name to the <a> element, rather than the ancestor <li> element.

References:

• JavaScript:
  • Array.prototype.forEach().
  • Array.prototype.pop().
  • document.querySelectorAll().
  • Element.classList API.
  • Element.getAttribute().
  • Function.prototype.call().
  • Guide to regular expressions in JavaScript.
  • Node.parentNode.
  • String.prototype.endsWith().
  • new RegExp() Regular Expression constructor.
  • RegExp.prototype.test().
  • String.prototype.split().
• jQuery:
  • addClass().
  • attr().
  • each().
  • prop().

Answer 2

Assuming location.pathname.split("/")[2] returns the expected parameter, the problem is

$('nav a[href^="/'

should be

$('.nav a[href^="'

.nav is a class, not an element, in your example

Answer 3

problem in your script......

$(function() {
    $('.nav a[href^="' + location.pathname.split("/")[2] + '"]').addClass('active');t
});