Changing the color in included code

Making the active page a different color in a nav bar

[ControlEngineer]

On several sites I use the typical navigation bar on the left side. I usually use a hover effect changing the color, and I also use a different color for the link to the current page. Basically, pretty typical.

Of course, that means that the contents of the nav bar must be different for each page. I would like to build (or modify) that part of the page once and then include it on each page, using SSI, IFrames, or, on small sites, simply cutting and pasting the code. However, I would like to find a way to change the color of one link on each page.

When I code each page individually, the nav bar for "Page 1" looks like:
<p><a class="navbar" href="index.html">Home</a></p>
<p><a class="actnavbar" href="page1.html">Page 1</a></p>
<p><a class="navbar" href="page2.html">Page 2</a></p>

actnavbar is a different color from navbar.

One thing I have tried is using java script with a variable set in the head of each page. Then the nav bar on each page is:

<script>
if (nav==1)
document.write ("<p><a class='actnavcol' href='index.html'> Home</a></p>");
else document.write ("<p><a class='navcol' href='index.html'> Home</a></p>");
if (nav==2)
document.write ("<p><a class='actnavcol' href=pag1.html'>Page 1</a></p>");
else document.write ("<p><a class='navcol' href= pag1.html'>Page 1 </a></p>");
etc
</script>

This seems to work OK, but I am wondering if there is a better or easier way, particularly for very lengthy nav bars.

Any suggestions? (using JS or other techniques)

[tedster]

I'm not sure I get what effect you hope to achieve, but do be careful with javascript and navigation. When you use document.write() to place a link, that link will not be spidered by the search engines.

Assigning a different CSS class is one way to make one link appear different and that approach does not make trouble for the spiders. But as you've discovered, maintenance is more demanding.

[bedlam]

Hiya,

Seems to me that you should be able to do this fairly easily with a combo of css / javascript - mind you, the method I'm about to suggest may be a little too resource-intensive, depending on just how long these navbars are, and what else is going on in the page.

Anyhow, I just threw a function together that should, if not do just what you need, give you an idea of how it might work.

First of all though, I feel compelled to point out that your navbar css is a little on the bloated side, based on the little sample you've posted. You may want to explore contextual selectors [google.com] in css.

For the purpose of this example, I'll assume that your nav links do not contain any classes (which might make this slightly trickier, and which they almost certainly do not need...)

Here's what you'd need:

HTML
==========
-if you haven't already, assign an id attribute to the container (it's a table cell I think?) containing the menu:

<td id="navbarcontainer">...</td>

CSS
==========
-you just need a class for active menu items; you have this already I guess:

.actnavcol {...}

JAVASCRIPT
==========
-you need a function that does this every time a new page is loaded:

1. Find the url of the page, probably using something like:

   currentPage = document.location.href;

2. Assign the object with the id shown above to a variable:

   navigationContainer = document.getElementById('navbarcontainer');

3. Collect together all the links in the navigation container:

   navBarLinkCollection = navigationContainer.getElementsByTagName('a');

4. Now, loop through the links collected in the last step:

   for (j=0; j < navBarLinkCollection.length; j++) {...}

5. And for each iteration of the loop, check the current link's href attribute against the current page's attribute:

   if (currentPage == navBarLinkCollection[j].href) {...}

6. Last of all, if they match, set the class of the current link to 'actnavcol'

   navBarLinkCollection[j].className = 'actnavcol';

   
   

...and put the whole thing together:

<script type="text/javascript">
/* Tested and working; call it by placing onload="setCurrentPage();" in the <body> element */

function setCurrentPage() {

var currentPage = window.location.href;
var navigationContainer = document.getElementById('navbarcontainer');
var navBarLinkCollection = navigationContainer.getElementsByTagName('a');
var j;

for (j=0;j < navBarLinkCollection.length;j++) {

if (currentPage == navBarLinkCollection[j].href) {
navBarLinkCollection[j].className = 'actnavcol';
}

}

}
</script>

You could build a script in php or asp to do almost the same thing, but you wouldn't have the DOM conveniences shown here. You can also use CSS (though if your navigation is long, the related css will be long too...) using contextual selectors as mentioned above:

Say you have pages 'foo' and 'bar'. You'd set up their respective body tags this way:

<body id="foo">

...and:

<body id="bar">

Elements in your navigation would look like this:

<a id="fooLink">...</a>

...and:

<a id="barLink">...<a/>

and your CSS would look like this:

body#foo #fooLink,
body#bar #barLink { /* Styles for active link here */ }

The contextual selectors in the CSS above mean "set these styles on the link with the id 'fooLink' only when it occurs inside a body tag with the id 'foo', and set these styles on the link with the id 'barlink' only when it occurs inside a body tag with the id 'bar'".

It shouldn't be too difficult to either combine or spin off one or the other solution (maybe into php or asp instead of javascript) to accomplish what you need.

-B

[ControlEngineer]

tedster

Assigning a different CSS class is one way to make one link appear different and that approach does not make trouble for the spiders.

Yes, that is what I am doing now. But now if I change the navbar I copy and paste it into each page and individually change tne CSS class so that the one corresponding to a page has the different color. That's ok with just a few pages, but if I had many pages and wanted to either use SSI or automate the modification of my pages before uploading, I would need a way for the same included code to behave differently on each page.

bedlam
Thanks. I will give it a try.

[abbeyvet]

I do it this way.

In addition to the normal styling of the link (which is in the CSS. styled using "#navbar a" for example) I give each item in the navigation bar an ID. Like this:
<ul id="navbar">
<li><a href="/stuff/" id="stuff">Stuff</a></li>
<li><a href="/info/" id="info">Info</a></li>
<li><a href="/tips/" id="tips">Tips</a></li>
etc
stc
</ul>

Generally I name them pretty much like that - so that the ID is a one word, lower case version of the link text, easier to remember.

Then in the head of each page put a short embedded stylesheet:

#navbar a#stuff {color:#e9c866;}

All that is required in a new page then is to change the id in the embedded stylesheet.

In reality I do this via a templating system in a CMS, so it is sort of automated, but the principle is the same.

[SuperNovaCain]

Any chance you use asp, php, jsp...?

That would make your request simple.

I will have to think more deeply to get a js solution.

[ControlEngineer]

abbeyvet
Thanks. I have tried what you suggested, and like the way it works.

Just a slight difference. In my header I used

<style type="text/css">#navbar a#suckers {color:#440000;}</style>

In my navbar I used:

<span id="navbar">
<p><a class="navcol" id="suckers" href="officers.html">Section Officers</a></p>

etc.

</span>

It works well, and lets me use standard text for the nav bar that I can cut and paste or include in each page (on multple sites that have a similar layout).

SuperNovaCain

Any chance you use asp, php, jsp...?
That would make your request simple.

Dern straight it would make it simpler. However I am dealing with some sites allowing asp, some with php, most with neither.

[SuperNovaCain]

Ok, here's my 2 cents....

Can you use reflection in javaScript to get the url of the current page? (well a quick goog and "yes" you can get the url even though in this case it's not reflection)

Create your menu and include as part of it a javaScript function that executes onload.

Detect either the url or title or... (whatever you like) to determine the identity of whatever page you are on and then enable/disable css (or change class, etc...) on the appropriate menu item.

In this way, all you would need to do is maintain the "menu" file and ensure that your "select-case" (or however you wish to pick and match) matches your page urls/title, etc...

SuperNĪvaCain

[bedlam]

Can you use reflection in javaScript to get the url of the current page? (well a quick goog and "yes" you can get the url even though in this case it's not reflection)

Heh :^)

There's a javascript solution to this problem that relies on getting the url of the current page on this page...

-B

[SuperNovaCain]

Well yes, yes it is already up there... imagine that.

I gotta make a personal rule that I don't post anything, late at night :)

(But you gotta admit, it's a pretty good idea.)

SuperNĪvaCain