Skip to main content
M
My Winter Guitar
Known Participant
April 12, 2017
Answered

SSI and class="active"

  • April 12, 2017
  • 5 replies
  • 1890 views

How do I add class="active" to pages on a site using SSI?

    This topic has been closed for replies.
    Correct answer osgood_

    https://forums.adobe.com/people/Nancy+OShea  wrote

    This is super easy to do with jQuery.

    Assign "active" class to navbar item based on current page URL with jQuery · GitHub

    Are you sure the code at that link still works, its 4 years old?

    I've tried it every which way and can't get it to work.

    I found another  jquery solution that does work in a similar fashion but is flawed in the workflow, so Im just trying to test the one at the link you provided to see if it functions any differently.

    Anyway it seems they may probably work the same finding the file 'path' name which means you have to keep updating the path between local development and remote development:

    <li><a href="http://localhost/editor_test/page_marker/home.php">Home</a></li>

    <li><a href="http://www.yourDomainName.co.uk/editor_test/page_marker/home.php">Home</a></li>

    I dont know if jQuery can just find the file name and compare that rather than the path, which would make the workflow more streamlined.

    EDITED.

    Apparently you can pull the file name

    var current = window.location.href.substr(window.location.href.lastIndexOf("/")+1);

    So you'd really be wanting to compare the file name and NOT the pathname.

    Example:

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="UTF-8" />

    <title>Page Marker</title>

    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

    <script>

    $(function(){

    var current = window.location.href.substr(window.location.href.lastIndexOf("/")+1);

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

    var $this = $(this);

    // if the current path is like this link, make it active

    if($this.attr('href').indexOf(current) !== -1){

    $this.addClass('active');

    }

    })

    })

    </script>

    <style>

    .active {

    background-color: yellow;

    }

    </style>

    </head>

    <body>

    <ul class="nav">

    <li><a href="home.php">Home</a></li>

    <li><a href="about.php">About</a></li>

    </ul>

    </body>

    </html>

    5 replies

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    April 12, 2017

    This is super easy to do with jQuery.

    Assign "active" class to navbar item based on current page URL with jQuery · GitHub

    Nancy O'Shea— Product User & Community Expert
    O
    osgood_Correct answer
    Legend
    April 13, 2017

    https://forums.adobe.com/people/Nancy+OShea  wrote

    This is super easy to do with jQuery.

    Assign "active" class to navbar item based on current page URL with jQuery · GitHub

    Are you sure the code at that link still works, its 4 years old?

    I've tried it every which way and can't get it to work.

    I found another  jquery solution that does work in a similar fashion but is flawed in the workflow, so Im just trying to test the one at the link you provided to see if it functions any differently.

    Anyway it seems they may probably work the same finding the file 'path' name which means you have to keep updating the path between local development and remote development:

    <li><a href="http://localhost/editor_test/page_marker/home.php">Home</a></li>

    <li><a href="http://www.yourDomainName.co.uk/editor_test/page_marker/home.php">Home</a></li>

    I dont know if jQuery can just find the file name and compare that rather than the path, which would make the workflow more streamlined.

    EDITED.

    Apparently you can pull the file name

    var current = window.location.href.substr(window.location.href.lastIndexOf("/")+1);

    So you'd really be wanting to compare the file name and NOT the pathname.

    Example:

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="UTF-8" />

    <title>Page Marker</title>

    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

    <script>

    $(function(){

    var current = window.location.href.substr(window.location.href.lastIndexOf("/")+1);

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

    var $this = $(this);

    // if the current path is like this link, make it active

    if($this.attr('href').indexOf(current) !== -1){

    $this.addClass('active');

    }

    })

    })

    </script>

    <style>

    .active {

    background-color: yellow;

    }

    </style>

    </head>

    <body>

    <ul class="nav">

    <li><a href="home.php">Home</a></li>

    <li><a href="about.php">About</a></li>

    </ul>

    </body>

    </html>

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    April 14, 2017

    pziecina  wrote

    Doesn't taste as good as chocolate, but o/k.

    I failed again


    http://womenslifestyle.com/wp-content/uploads/2012/04/chocolatebunnies.jpg

    Nancy O'Shea— Product User & Community Expert
      O
      osgood_
      Legend
      April 12, 2017

      https://forums.adobe.com/people/Digital+Ink+LLC  wrote

      How do I add class="active" to pages on a site using SSI?

      If you can support php:

      <!DOCTYPE html>

      <html>

      <head>

      <meta charset="UTF-8" />

      <title>Page Marker</title>

      <style>

      .active a {

      background-color: yellow;

      }

      </style>

      </head>

      <body>

      <?php $page = basename($_SERVER['PHP_SELF']); ?>

      <ul>

      <li <?php if($page == "home.php") { echo "class='active'"; } ?>  ><a href="home.php">Home</a></li>

      <li <?php if($page == "about_us.php") { echo "class='active'"; } ?>><a href="about_us.php">About Us</a></li>

      <li <?php if($page == "products.php") { echo "class='active'"; } ?>><a href="products.php">Products</a></li>

      </ul>

      </body>

      </html>

      Jon Fritz
      Community Expert
      Jon FritzCommunity Expert
      Community Expert
      April 12, 2017

      Are you trying to create a "you are here" style link indicator for a menu in a server side include?

      One way to do that would be to give each link in your menu a class that matches the link's page, something like .portfolio, .about, .contact, etc then duplicate that class in the body tag of the individual pages.

      You would then create an "active" class using a selector like...

      body.contact .contact, body.portfolio .portfolio, body.about .about {
      your active class properties here

      }

      That way the "you are here" style link will be active only on a page when the link and <body> have the same class. The only "page specific" code would be in the <body> allowing you to keep the menu in an SSI.

      Rob Hecker2
      Rob Hecker2
      Legend
      April 12, 2017

      This could be done with PHP and probably javascript as well.

      if (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] != 'off') {
      echo "

      <style>

      .active { background-color:red;  }

      </style>

      ";
      }

      Explanation: you can apply the class 'active' globally, but it will only make the background red if the page is accessed via SSL.

      pziecina
      pziecina
      Legend
      April 12, 2017

      I am not certain what you are trying to do.

      To add the class using an ssi, you would have to add the ssi 'link' to every instance that you wish it to apply too. Which is probably what you are trying to avoid doing using just html code.

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices