Adding css class using javascript to header that is implemented using javascript

Question

I am developing a website with many html files and just recently i started using seperated header and footer html files in order to save time by implementing them using javascript to my pages. The problem is now all the header and footer looks the same, while before using this handy technique i had the pages highlighted depending on the page you were on(this was done by manually adding class to different <a> tags depending on what the page(html file) it is), but now i can't find a way to target a specific <a>that would be targeted only on specific html to change it's css. The code looks something like this: HTML home.html:

  <div id="header"></div>

HTML header.html:

  <ul>
  <li id="LI_56">
              <a href="pages/home.html" id="A_57">Home</a>
  </li> 
  </ul>

Javascript looks like this:

$(function(){
  $("#header").load("header.html"); 
  $("#footer").load("footer.html"); 
});

css looks like this:

.home{
background-color:red;
}

and what I tried to do is:

          <script>
          $( document ).ready(function() {
          document.getElementById('A_57').className = 'home';
          }); 
          </script>

But i get error:"TypeError: document.getElementById(...) is null" . When the header is already in my home.html and not implemented by javascript everything works fine, but that's no an option. Hoping anyone knows a solution. Using diffrent css files for each html is also clearly not an option - it should be as straight forward and developer friendly(smart & lazy) as possible! :) Thanks in advance!

Maybe are you trying to fire the javascript function before the load one? — Sergi Case
– Sergi Case, Commented Aug 18, 2016 at 9:42
Function should fire after the load one, but appearently the opposite happens. I already have a solution, although i was hoping for a more effective one. — Dr. House
– Dr. House, Commented Aug 18, 2016 at 10:45

Dhananjay · Accepted Answer · 2016-08-18 09:42:33Z

1

Set the class name in a "complete" callback, this callback is executed after post-processing and HTML insertion has been performed:

$(function(){
  $("#header").load("header.html", function() {
      document.getElementById('A_57').className = 'home';
  });
  $("#footer").load("footer.html"); 
});

answered Aug 18, 2016 at 9:42

Dhananjay

5543 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jamy · Accepted Answer · 2016-08-18 14:16:26Z

1

This is because the element doesn't yet exist. Add the class after the html has been loaded.

$(function(){
    $("#header").load("header.html", function() {
        var $homeLink = $('#header').find('a').filter(function() {
            return $.trim($(this).text()) === 'Home'
        });

        $homeLink.addClass('home');
    }); 
    $("#footer").load("footer.html"); 
});

edited Aug 18, 2016 at 14:16

answered Aug 18, 2016 at 9:42

Jamy

9118 silver badges12 bronze badges

2 Comments

Dr. House Over a year ago

That works, but i have many different pages so that would mean i had to add this script in my html pages just changing the classnames, but maybe there is a way i could use this script in a seperate .js file and just change the class of this js by adding some extra .js to my html pages or even this js could adapt and know which class to to set depending on my html pages name or some other info?

Jamy Over a year ago

Will the header.html always contain the structure you posted above? This isn't very optimised code but I've updated my answer to help with this. After the header is loaded, it finds an anchor link with the text "Home" and adds a class of "home" to that anchor link.

Collectives™ on Stack Overflow

Adding css class using javascript to header that is implemented using javascript

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related