Changing the CSS of a file included with PHP using JavaScript

Question

I've recently made a site where I have a navigation bar, which is included to the pages using PHP.

<?php include "Assets/Inclusions/NavigationBar.php" ?>

I wanted the active page list item to have bold text, so I used JavaScript to fetch the current path and make the relative element bold with a lot of if statements.

<script>
if(location.pathname == 'location.php')
document.getElementById("location").style.fontWeight="800";
    } ...and so on
</script>

Is there a better way I should have done this?

I recommend using some PHP logic in your NavigationBar.php file to add a CSS class to the active element. — ncksllvn
– ncksllvn, Commented Jul 1, 2014 at 5:15
That's what I was looking for, but how in the world could I change the CSS in NavigationBar.php without including it in the clients' document? — IIllIIll
– IIllIIll, Commented Jul 1, 2014 at 5:17

ncksllvn · Accepted Answer · 2014-07-01 18:18:13Z

1

This seems like something that should be done on the server-side of things. Please feel free to correct this if I have made a syntax error, it's been a while since I've written PHP, but here's the gist of it:

NavigationBar.php

<?php
    function isActive($page){
      $currentPage = $_GET['page']; // mypage.com?page='something'

      if ( !isset($currentPage) ) $currentPage = 'home';

      return $currentPage == $path;
    }
?>

<ul class="navigation">
  <li><a href="?page=home" 
          <?php if ( isActive('home') ) echo('class="active"'); ?> >Home</a></li>
  <li><a href="?page=About" 
          <?php if ( isActive('about') ) echo('class="active"'); ?>>About Us<a/></li>
</ul>

style.css

a.active{
    font-weight: 800;
}

edited Jul 1, 2014 at 18:18

answered Jul 1, 2014 at 16:18

ncksllvn

5,7692 gold badges23 silver badges29 bronze badges

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

3 Comments

IIllIIll Over a year ago

That's perfect! It's just what I was looking for. Honestly, I'm not innovative all the time like you all!

Rangad Over a year ago

You should also avoid to access superglobals unguarded. Better: $currentPage = isset($_GET['page']) ? $_GET['page'] : '';

ncksllvn Over a year ago

Agreed, a PHP guru should totally better-up this code

Patrick Evans · Accepted Answer · 2014-07-01 05:16:42Z

0

You could use a for loop, grab all the link elements in your nav, then compare the path to the href.

var path = window.location.pathname;
var links = document.getElementsByClassName("navlink");
for(var i=0; i<links.length; i++){
   if(links[i].getAttribute("href")==path){
      links[i].style.fontWeight = "800";
      break;
   }
}

Obviously you would have to do the correct comparison for your situation but this would be easier than writing a bunch of ifs and easier to maintain as you dont have to hardcode the locations to test against.

And if you are not worried about compatibility with older browsers, or using jQuery you could use the attribute selector with document.querySelector or jQuery

//With querySelector
var link = document.querySelector("a[href='"+path+"']");
if(link!==null){
   link.style.fontWeight=="800";
}

//with jQuery
$("a[href='"+path+"']").css("font-weight","800");

edited Jul 1, 2014 at 5:16

answered Jul 1, 2014 at 4:57

Patrick Evans

42.8k6 gold badges81 silver badges94 bronze badges

1 Comment

IIllIIll Over a year ago

That's brilliant! I'll try it when I'm with my computer again.

Collectives™ on Stack Overflow

Changing the CSS of a file included with PHP using JavaScript

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related