SSI nav bar but page name cell a different colour?

[Lois]

My website formatting knowledge is mostly HTML; I know hardly any
Javascript. Recently I created a site with a nav bar in table format across
the top of the page, and I made the background colour of the cell with the
name of the page that the reader was on a different shade, like this:

Home | This | That | Other | Etc.

If you were on "Other" page, for example, the background colour of the
"Other" cell was a different shade from the others. I created this by
altering the code on each page.

This site was hosted with a web host that has SSI, and the nav bar became
the same file for every page, so we lost this minor navigation aid. Someone
mentioned that the same effect (a different colour or shade for the cell
with the page name) could be achieved with Javascript, but since I don't
know Javascript and we'd run out of time, we didn't do it.

Now I'd like to have this different colour for the page name cell at another
site using SSI for the nav bar. Is this possible? If so, how? To make it
even more fun, some of the page names are entry points to another section of
the site. If I can make "Other" a different colour, for example, I'd also
like to make pages in the "Other" folder have this same feature so that
readers know that they're in the "Other" section of the site. Or is this too
much?

Thanks for any help. Please keep in mind that I don't speak the language
very well.

Lois

 

[Yep]

Recently I created a site with a nav bar in table format across
the top of the page

I don't think that you need a table here, it merely adds more code
while a DIV filled with A elements and a bit of CSS would do an
excellent job

If you were on "Other" page, for example, the background colour of the
"Other" cell was a different shade from the others. I created this by
altering the code on each page.

Now I'd like to have this different colour for the page name cell at another
site using SSI for the nav bar.

even more fun, some of the page names are entry points to another section of
the site. If I can make "Other" a different colour, for example, I'd also
like to make pages in the "Other" folder have this same feature so that
readers know that they're in the "Other" section of the site.

A simple technique to achieve both goals would be to grab the
querystring and parse it; you can easily retrieve the folder part (the
section) to make the desired changes in your page, and the file name
part to update the corresponding menu item.

<div id="myMenu">
<a href="home.html">Home</a>
<a href="that.html">That</a>
<a href="this.html">This</a>
<a href="other.html">Other</a>
<a href="nav.html">Test</a>
</div>

<style type="text/css">
#myMenu a { background:green; color:white; padding:2px 15px}
#myMenu a:hover { background:yellow; colorrange }
</style>

<script type="text/javascript">
(function(){
var d=document;
if(d.getElementById&&d.getElementsByTagName){
var pageParts=/\/([^\/]+)\/([^\/]+\.html?)$/.exec(location.href),
a=d.getElementById("myMenu").getElementsByTagName("a");
//Update the link
for(var ii=0; ii<a.length; ii++){
if(a[ii].href.indexOf(pageParts[2])!=-1){
with (a[ii].style){ background="whitesmoke"; color="pink"; }
break;
}
}
//Update the section parts knowing that...
alert("You're in section : " + pageParts[1]) ;
}
})()
</script>


The function here just creates a specific scope, so that you can
safely put the js code in a js include, for instance in your SSI -
just update the id of the menu container, and maybe the extensions and
additional querystrings in the regexp.


HTH
Yep.

 

[Lois]

Lois:
: > Recently I created a site with a nav bar in table format across
: > the top of the page

Yep:
: I don't think that you need a table here, it merely adds more code
: while a DIV filled with A elements and a bit of CSS would do an
: excellent job

Yeah, I know. It took a couple of years for me to be comfortable with HTML
and to be able to do tables fairly fast. When I finally got to that point, I
started reading that using tables for layout was passe, and that CSS was the
latest thing. Such is life in the tech world. I don't have time to learn a
lot of new things now, so I'm trying to get by with what I do know, with the
plan to redo things later if I learn better ways of doing things.


: > If you were on "Other" page, for example, the background colour of the
: > "Other" cell was a different shade from the others. I created this by
: > altering the code on each page.
:
: > Now I'd like to have this different colour for the page name cell at
another
: > site using SSI for the nav bar.
:
: > even more fun, some of the page names are entry points to another
section of
: > the site. If I can make "Other" a different colour, for example, I'd
also
: > like to make pages in the "Other" folder have this same feature so that
: > readers know that they're in the "Other" section of the site.
:
: A simple technique to achieve both goals would be to grab the
: querystring and parse it; you can easily retrieve the folder part (the
: section) to make the desired changes in your page, and the file name
: part to update the corresponding menu item.

<useful script snipped>

: The function here just creates a specific scope, so that you can
: safely put the js code in a js include, for instance in your SSI -
: just update the id of the menu container, and maybe the extensions and
: additional querystrings in the regexp.

Thanks! After I posted my post, I came across another way to get the cells
the way you did them w/o using a table, but your way uses less coding.

However, a pop-up window isn't what I had in mind. I wouldn't want to use
one just to tell people what page they're on. Is there a way to make the
cell (or whatever it is) with the page name a different colour when it's the
name of the current page and the nav bar is an SSI file? Maybe there isn't,
but I thought I'd ask.

I appreciate your help.

Thanks again,
Lois