SSI and class="active"

Report · Apr 12, 2017

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

Report · Apr 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.

Report · Apr 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.

Report · Apr 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.

Report · Apr 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>

<title>Page Marker</title>

<style>

.active a {

background-color: yellow;

}

</style>

</head>

<body>

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

<ul>

<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>

Report · Apr 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 & Moderator

Report · Apr 12, 2017

As Nancy has pointed out, just compare the URL with the link of the menu item. Works all the time. Make sure that you do have an active class for the index page because the URL for that page is usually blank

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Report · Apr 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:

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>

<title>Page Marker</title>

$(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>

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

</ul>

</body>

</html>

Report · Apr 13, 2017

The code that I use requires jQuery and jquery-queryParser.js. The latter looks like

(function ($) {
// encapsulate variables that need only be defined once
var pl = /\+/g, // Regex for replacing addition symbol with a space
searchStrict = /([^&=]+)=+([^&]*)/g,
searchTolerant = /([^&=]+)=?([^&]*)/g,
decode = function (s) {
return decodeURIComponent(s.replace(pl, " "));
};
// parses a query string. by default, will only match good k/v pairs.
// if the tolerant option is truthy, then it will also set keys without values to ''
$.parseQuery = function(query, options) {
var match,
o = {},
opts = options || {},
search = opts.tolerant ? searchTolerant : searchStrict;
if ('?' === query.substring(0, 1)) {
query = query.substring(1);
}
// each match is a query parameter, add them to the object
while (match = search.exec(query)) {
o[decode(match[1])] = decode(match[2]);
}
return o;
}
// parse this URLs query string
$.getQuery = function(options) {
return $.parseQuery(window.location.search, options);
}
$.fn.parseQuery = function (options) {
return $.parseQuery($(this).serialize(), options);
};
}(jQuery));

The script for the active menu item looks like

jQuery(document).ready(function ($) {
  var url = window.location.href;
  $('ul.nav a').map(function () {
  $(this).parent().toggleClass('active', this.href == url || this.href == url.split("?")[0].split("#")[0]);
  });
});

This works for me. Please note that you may need to change the selector (ul.nav a) to suit.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Report · Apr 13, 2017

BenPleysier wrote
The code that I use requires jQuery and jquery-queryParser.js. The latter looks like

No wonder everything is mind boggling, there seems to be 101 ways to more or less achieve the same results.

Report · Apr 13, 2017

osgood_ wrote
No wonder everything is mind boggling, there seems to be 101 ways to more or less achieve the same results.

Question for today -

That is the problem that we are all trying not to answer.

Once you start to question your own, 'way of doing things' you have to ask 'is change worth the effort'. Follow the pack, or be innovative, most choose the pack, after all if you get stuck you can always quote everyone else, and there is no requirement then to 'think for yourself or outside the box'.

The box being the way everyone else says you should do it -

Use flexbox or bootstrap.

Use sass or learn the new css

Use javascript or jQuery

and you can interchange the above, depending on your views, (and everyone elses) dare to be different and dammed by many

Answers on a postcard please, but not in this discussion

Report · Apr 13, 2017

pziecina wrote
osgood_ wrote
No wonder everything is mind boggling, there seems to be 101 ways to more or less achieve the same results.
Question for today -
That is the problem that we are all trying not to answer.
Once you start to question your own, 'way of doing things' you have to ask 'is change worth the effort'. Follow the pack, or be innovative, most choose the pack, after all if you get stuck you can always quote everyone else, and there is no requirement then to 'think for yourself or outside the box'.
The box being the way everyone else says you should do it -
Use flexbox or bootstrap.
Use sass or learn the new css
Use javascript or jQuery
and you can interchange the above, depending on your views, (and everyone elses) dare to be different and dammed by many
Answers on a postcard please, but not in this discussion

Just for laughs I thought would investigate python last night because I should be on top of things and then thought WT*!*!*!*!* am I going to do with it.....so I investigated react.js instead until I thought WT*!*!*!*!* am I going to do with it.....so I investigated symphony......until I though WT*!*!*!*!* am I going to do with it..........................................and so on.

These days I don't even know if the approach I take is right or wrong or indifferent, it works, it gets results but is it the optimum approach, can anyone really say that their approach is the best?

Report · Apr 14, 2017

The forum quote feature stopped working....

<These days I don't even know if the approach I take is right or wrong or indifferent, it works, it gets results but is it the optimum approach, can anyone really say that their approach is the best?>

No. But if your approach works and it meets the project goals,you're golden.

Ask 3 web designers how to build a navbar, get 6 different answers. It's always been that way. That's the nature of this crazy, mixed-up profession.

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Apr 14, 2017

it works, it gets results but is it the optimum approach

With code, and a lot of other things, just because it works doesn't mean it ain't broke. There are a hundred possible reasons why a block of code that does it's job is still bad code.

This is the beauty of object oriented methods and frameworks like Symfony, Zend and Laravel. They help people write better, more organized, more maintainable code. (Of course a PHP class in an app using Symfony can still be written poorly). I see a lot of code examples on this forum that are poorly written. I have had to go back and spend days and even weeks rewriting code that I wrote five years ago that did it's job. . .until the site grew or the conditions changed.

Consider the hundreds of people who come to this forum having built a static website with hundreds of similar pages and then suddenly need to make a major change that can't be handled by simple cut and paste. They built something that worked. . .until it didn't.

My PHP skills are a lot better than my Javascript skills, so I sometimes solve problems with PHP that really should be handled with AJAX. My bad.

Report · Apr 14, 2017

I'll admit it openly, I am rubbish at PHP, which is why i never answer any php related questions.

But, i am brilliant at project and team(s) management, which is why i say, learn how to code in modules, document everything, and never stop learning what is new. The web and how one codes for it is never static, adapt and change, improve on what works, but never ever loose sleep over it.

Report · Apr 14, 2017

pziecina wrote
I'll admit it openly, I am rubbish at PHP, which is why i never answer any php related questions.

I'm rubbish at everything........................I'm good at eating chocolate Easter eggs, does that count?

Report · Apr 14, 2017

osgood_ wrote
I'm rubbish at everything........................I'm good at eating chocolate Easter eggs, does that count?

Only if you send me one

Report · Apr 14, 2017

pziecina wrote
osgood_ wrote
I'm rubbish at everything........................I'm good at eating chocolate Easter eggs, does that count?
Only if you send me one

Will this do?

Report · Apr 14, 2017

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

Report · Apr 14, 2017

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

I failed again

Report · Apr 14, 2017

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Apr 14, 2017

https://forums.adobe.com/people/Rob+Hecker2 wrote
it works, it gets results but is it the optimum approach
I see a lot of code examples on this forum that are poorly written.

Problem is to a better php developer than yourself YOUR code is probably poorly written and that is the problem, can you actually say your approach is the best in light of someone can possibly do it better. Hence if it works..........its not always the optimised way but sometimes the easier way to understand it.

I mean take this thread, at least 6 different approaches, all work, which is best, which is written correctly...............probably 6 different answers to that as well.

Report · Apr 14, 2017

Problem is to a better php developer than yourself YOUR code is probably poorly written and that is the problem

Yes. Once in a while I ask for help on stackoverflow and get a response that is brilliant and so different from the approach I was struggling with.

Often these brilliant solutions are shorter and more direct than the convoluted mass of code I had written. There may be no "best" but there is certainly good code and bad code.

SSI and class="active"

1 Correct answer