JQuery changing class of element with id or class based on page url/name

Question

Here is my code

HTML

<div id="header-content" class="header-content">...</div>

Jquery

    $( document ).ready(function() {



      var loc = window.location.href; // returns the full URL
      if(/$/.test(loc)) { // If Empty or if just home URL
        $('#header-content').addClass('home-page');
        //Remove All Other Classes
        $('#header-content').removeClass('start-here');
        $('#header-content').removeClass('work-with-me');
      }
      if(/start-here$/.test(loc)) { // if page = root/start-here/
        $('#header-content').addClass('start-here');
        //Remove All Other Classes
        $('#header-content').removeClass('home-page');
        $('#header-content').removeClass('work-with-me');
      }
      if(/work-with-me$/.test(loc)) { // if page = root/work-with-me/
        $('#header-content').addClass('work-with-me');
        //Remove All Other Classes
        $('#header-content').removeClass('home-page');
        $('#header-content').removeClass('start-here');
      }


    });

URL Example: http://www.somedomain.com/the-page/

What I'd like to do is have the script identify the text "the-page" in the url and if it's a match assign the class. As you can see in my sample jquery code, I'm trying to assign classes to the home page, start-here page and work-with-me page.

I'm not sure how to modify the above Jquery so it will work with the URL Example format.

As well how would I detect if it was the index page and the URL looked like this: http://www.somedomain.com/ with no page name on the end?

if I use a file name, like page.php and put that in the code like this `if(/start-here.php$/.test(loc)) { // if page = root/start-here/` it will work with that no issues. With the .php on the end it works with a static site I built, but as I said can't get it to work with the directory type page names. — Jeremy Brown, Mar 09 '16 at 06:49
For a start, `/$/.test(...)` will be true for **any** string, as all strings have an ending. — T.J. Crowder, Mar 09 '16 at 06:49
I'm not sure what you mean Crowder. I'm kind of a newb at this. I don't understand why I can't just add a "/" and drop the .php and have it work with the URL format (http://www.somedomain.com/page-name/) — Jeremy Brown, Mar 09 '16 at 06:51
basically want I want to do is when the page is loaded have the script check to see if the page has the name wrapped in /'s. So I want it to look for "/page-name/" with both forward slashes. and if it matches that assign the class. — Jeremy Brown, Mar 09 '16 at 06:53
try this link http://stackoverflow.com/questions/4597050/how-to-check-if-the-url-contains-a-given-string — Shiva, Mar 09 '16 at 07:07

MPF · Accepted Answer · 2016-03-09T09:07:17.770

1

Well, assuming the domain is known, it should be doable with this:

//you'll of course want to get this via window.location.href instead:
var exLoc = "http://www.somedomain.com/the-page/";

var root = "somedomain.com";
var end = exLoc.slice(exLoc.lastIndexOf(root)+root.length);

//end is your "text" at the end of your domain (somedomain.com in this case)

Which, using your example would look something like:

$( document ).ready(function() {

  var loc = window.location.href; // returns the full URL
  var root = "somedomain.com";
  var end = loc.slice(loc.lastIndexOf(root)+root.length);

  if(end.length <= 0) { // If Empty or if just home URL
    $('#header-content').addClass('home-page');
    //Remove All Other Classes
    $('#header-content').removeClass('start-here');
    $('#header-content').removeClass('work-with-me');
  }
  if(end === "/start-here/") { // if page = root/start-here/
    $('#header-content').addClass('start-here');
    //Remove All Other Classes
    $('#header-content').removeClass('home-page');
    $('#header-content').removeClass('work-with-me');
  }
  if(end === "/work-with-me/") { // if page = root/work-with-me/
    $('#header-content').addClass('work-with-me');
    //Remove All Other Classes
    $('#header-content').removeClass('home-page');
    $('#header-content').removeClass('start-here');
  }


});

edited Mar 09 '16 at 09:07

answered Mar 09 '16 at 07:30

MPF

100
1
7

I'd like to modify the code I have above to work with your solution. Can you show me how your code would work with the code above? – Jeremy Brown Mar 09 '16 at 08:00
modified my answer to include your example – MPF Mar 09 '16 at 09:07
@JeremyBrown if my answer solved your problem, could you please mark it as such? – MPF Mar 10 '16 at 05:06
Now I'm just trying to figure out what all the code does, still learning. Thanks again for the help on this. – Jeremy Brown Mar 10 '16 at 06:00
Actually, this code ` if(end.length <= 0) { // If Empty or if just home URL` doesn't apply a class to home page. – Jeremy Brown Mar 10 '16 at 06:06
Figured out what it was. The code end.length <= 0 I changed to a 1 and now it works. – Jeremy Brown Mar 10 '16 at 06:15
Indeed, that just checks if the length of "end" is 0, ie you are at the "root" level of the webpage. Yes maybe you need it to be one to catch a trailing "/" sign. You're welcome, in any case. – MPF Mar 10 '16 at 06:16

JQuery changing class of element with id or class based on page url/name

1 Answers1