Change look of one menu item when that page is current

[Annette]

Hi, all.



I need help figuring this out. I want to change the appearance of the menu
option of the page that is currently loaded, so that it contrasts with the
other options, and the user gets a visual cue where they *are*.



I know how to do hover-buttons, and I can see that I have some options in
that little thingamabob DHTML or whatever it's called, for when a page loads
(those little funky things like having text fly onto a page, etc.)



Well, phooey on all those. I don't want any flying text, and I don't want
an effect that happens *as* the person clicks [or hovers] over a menu
choice. I want an effect to start at the moment the person gets to a page,
and then stay put until the person goes to the next page.



At the moment, I'm using shared borders with a table containing links that I
typed into the table. I also already have created in Image Composer a whole
set of corresponding [currently unused] 'image' versions of those same
links, with the text of each link underlined in one version and then not
underlined in the other. Pretty boring, but IMHO it's classy. My idea was
that, when the person went to the page named "College by Television", as
long as they are on that page the "College by Television" image looks
different from the others.



The only way *I* could think of doing it was to ditch the shared border
concept in exchange for a unique table for each page of the website, where
the only difference on each page would be that the image for that page has
the unique formatting for that page's link. But that sounds pretty
work-intensive, and if I chose to add pages to the site later on (which is
likely!) I'd have to rework every page which sounds just plain stupid.



If I could avoid using the image files, and just change the formatting on
the text links I already have to, say, a different color font or a bold font
or something like that for the one menu choice, then that would be just as
good. (But if it has to be *image swapping* I know that wouldn't work.)



Any help is appreciated. It's not vital to the site's operation, but I
think it would be a nice touch.



(Don't have the site on the web yet. Oh, and I'm using Front Page 2000, and
the place I'm doing this for has FP extensions and all that on their server.
In case it makes any difference to your response, I also know how to do
include pages . not that I can see how that would help in this case.
Actually, I was just trying to impress you with the depth of my knowledge.)



Thanks very much!



Annette

 

[Ronx]

Options:
1) Manually produce a navigation bar in each page - you have already
discounted this

2) Use FrontPage navigation components. In FP2000 the text links are
limited to one choice for vertical or horizontal, but this can be styled
using CSS - see www.rxs-enterprises.org/tests/style-nav.htm for an example
of vertical navigation bar.

3) Use server side scripting to construct a navigation bar on each page.
See left nav bar at
www.rxs-enterprises.org/fp/webfaqs.asp for the result in browser.

4) Use JavaScript to create the navigation bar - can be problematic for
those browsers not running JavaScript. Each link would be:

<script type="text/javascript">
loc = document.location;
lnk = "http://example.com/mypage.htm";
label = "My next page";
if (lnk == loc) document.write(label);
else document.write("<a href=\"" + lnk + "\">" + label + "</a>");
</script>
<noscript><a href="mypage.htm">My next page</a></noscript>

This can be simplified by calling a function for each link - that is an
exercise for the student.
--
Ron Symonds
Microsoft MVP (FrontPage)
Reply only to group - emails will be deleted unread.

Hi, all.



I need help figuring this out. I want to change the appearance of the menu
option of the page that is currently loaded, so that it contrasts with the
other options, and the user gets a visual cue where they *are*.



I know how to do hover-buttons, and I can see that I have some options in
that little thingamabob DHTML or whatever it's called, for when a page loads
(those little funky things like having text fly onto a page, etc.)



Well, phooey on all those. I don't want any flying text, and I don't want
an effect that happens *as* the person clicks [or hovers] over a menu
choice. I want an effect to start at the moment the person gets to a page,
and then stay put until the person goes to the next page.



At the moment, I'm using shared borders with a table containing links that I
typed into the table. I also already have created in Image Composer a whole
set of corresponding [currently unused] 'image' versions of those same
links, with the text of each link underlined in one version and then not
underlined in the other. Pretty boring, but IMHO it's classy. My idea was
that, when the person went to the page named "College by Television", as
long as they are on that page the "College by Television" image looks
different from the others.



The only way *I* could think of doing it was to ditch the shared border
concept in exchange for a unique table for each page of the website, where
the only difference on each page would be that the image for that page has
the unique formatting for that page's link. But that sounds pretty
work-intensive, and if I chose to add pages to the site later on (which is
likely!) I'd have to rework every page which sounds just plain stupid.



If I could avoid using the image files, and just change the formatting on
the text links I already have to, say, a different color font or a bold font
or something like that for the one menu choice, then that would be just as
good. (But if it has to be *image swapping* I know that wouldn't work.)



Any help is appreciated. It's not vital to the site's operation, but I
think it would be a nice touch.



(Don't have the site on the web yet. Oh, and I'm using Front Page 2000, and
the place I'm doing this for has FP extensions and all that on their server.
In case it makes any difference to your response, I also know how to do
include pages . not that I can see how that would help in this case.
Actually, I was just trying to impress you with the depth of my knowledge.)



Thanks very much!



Annette

 

[Murray]

5) use page-specific CSS to style the desired button to the 'down' state.

--
Murray
============

Options:
1) Manually produce a navigation bar in each page - you have already
discounted this

2) Use FrontPage navigation components. In FP2000 the text links are
limited to one choice for vertical or horizontal, but this can be styled
using CSS - see www.rxs-enterprises.org/tests/style-nav.htm for an example
of vertical navigation bar.

3) Use server side scripting to construct a navigation bar on each page.
See left nav bar at
www.rxs-enterprises.org/fp/webfaqs.asp for the result in browser.

4) Use JavaScript to create the navigation bar - can be problematic for
those browsers not running JavaScript. Each link would be:

<script type="text/javascript">
loc = document.location;
lnk = "http://example.com/mypage.htm";
label = "My next page";
if (lnk == loc) document.write(label);
else document.write("<a href=\"" + lnk + "\">" + label + "</a>");
</script>
<noscript><a href="mypage.htm">My next page</a></noscript>

This can be simplified by calling a function for each link - that is an
exercise for the student.
--
Ron Symonds
Microsoft MVP (FrontPage)
Reply only to group - emails will be deleted unread.

Hi, all.



I need help figuring this out. I want to change the appearance of the menu
option of the page that is currently loaded, so that it contrasts with
the
other options, and the user gets a visual cue where they *are*.



I know how to do hover-buttons, and I can see that I have some options in
that little thingamabob DHTML or whatever it's called, for when a page loads
(those little funky things like having text fly onto a page, etc.)



Well, phooey on all those. I don't want any flying text, and I don't
want
an effect that happens *as* the person clicks [or hovers] over a menu
choice. I want an effect to start at the moment the person gets to a page,
and then stay put until the person goes to the next page.



At the moment, I'm using shared borders with a table containing links
that I
typed into the table. I also already have created in Image Composer a whole
set of corresponding [currently unused] 'image' versions of those same
links, with the text of each link underlined in one version and then not
underlined in the other. Pretty boring, but IMHO it's classy. My idea was
that, when the person went to the page named "College by Television", as
long as they are on that page the "College by Television" image looks
different from the others.



The only way *I* could think of doing it was to ditch the shared border
concept in exchange for a unique table for each page of the website,
where
the only difference on each page would be that the image for that page
has
the unique formatting for that page's link. But that sounds pretty
work-intensive, and if I chose to add pages to the site later on (which
is
likely!) I'd have to rework every page which sounds just plain stupid.



If I could avoid using the image files, and just change the formatting on
the text links I already have to, say, a different color font or a bold font
or something like that for the one menu choice, then that would be just
as
good. (But if it has to be *image swapping* I know that wouldn't work.)



Any help is appreciated. It's not vital to the site's operation, but I
think it would be a nice touch.



(Don't have the site on the web yet. Oh, and I'm using Front Page 2000, and
the place I'm doing this for has FP extensions and all that on their server.
In case it makes any difference to your response, I also know how to do
include pages . not that I can see how that would help in this case.
Actually, I was just trying to impress you with the depth of my knowledge.)



Thanks very much!



Annette

 

[Jon Spivey]

That would be risky in as much as non-js users would have no navigation and
worse still search engines would have no links to follow. Without seeing the
kind of navigation she has it's hard to say but I'd give the table/list or
whatever the menu is contained in an id, set up a class for the current page
then add some script to check the current page and apply a class, something
like
<style type="text/css">
a.down{
color:green;
}
</style>
<script type="text/javascript">
function doMenu(){
var a=location.href,
d=document.getElementById("theNav").getElementsByTagName("A");
for(i=0;i<d.length;i++){
if(d.getAttribute("HREF")==a)d.className='down';}}
</script>
</head>
<body onload="doMenu()">
<ul id="theNav">
<li><a href="page1.asp">Page 1</a></li>
<li><a href="page2.asp">Page 2</a></li>
<li><a href="page3.asp">Page 3</a></li>
<li><a href="page4.asp">Page 4</a></li>
</ul>

--
Cheers,
Jon
Microsoft MVP

Options:
1) Manually produce a navigation bar in each page - you have already
discounted this

2) Use FrontPage navigation components. In FP2000 the text links are
limited to one choice for vertical or horizontal, but this can be styled
using CSS - see www.rxs-enterprises.org/tests/style-nav.htm for an example
of vertical navigation bar.

3) Use server side scripting to construct a navigation bar on each page.
See left nav bar at
www.rxs-enterprises.org/fp/webfaqs.asp for the result in browser.

4) Use JavaScript to create the navigation bar - can be problematic for
those browsers not running JavaScript. Each link would be:

<script type="text/javascript">
loc = document.location;
lnk = "http://example.com/mypage.htm";
label = "My next page";
if (lnk == loc) document.write(label);
else document.write("<a href=\"" + lnk + "\">" + label + "</a>");
</script>
<noscript><a href="mypage.htm">My next page</a></noscript>

This can be simplified by calling a function for each link - that is an
exercise for the student.
--
Ron Symonds
Microsoft MVP (FrontPage)
Reply only to group - emails will be deleted unread.

Hi, all.



I need help figuring this out. I want to change the appearance of the menu
option of the page that is currently loaded, so that it contrasts with
the
other options, and the user gets a visual cue where they *are*.



I know how to do hover-buttons, and I can see that I have some options in
that little thingamabob DHTML or whatever it's called, for when a page loads
(those little funky things like having text fly onto a page, etc.)



Well, phooey on all those. I don't want any flying text, and I don't
want
an effect that happens *as* the person clicks [or hovers] over a menu
choice. I want an effect to start at the moment the person gets to a page,
and then stay put until the person goes to the next page.



At the moment, I'm using shared borders with a table containing links
that I
typed into the table. I also already have created in Image Composer a whole
set of corresponding [currently unused] 'image' versions of those same
links, with the text of each link underlined in one version and then not
underlined in the other. Pretty boring, but IMHO it's classy. My idea was
that, when the person went to the page named "College by Television", as
long as they are on that page the "College by Television" image looks
different from the others.



The only way *I* could think of doing it was to ditch the shared border
concept in exchange for a unique table for each page of the website,
where
the only difference on each page would be that the image for that page
has
the unique formatting for that page's link. But that sounds pretty
work-intensive, and if I chose to add pages to the site later on (which
is
likely!) I'd have to rework every page which sounds just plain stupid.



If I could avoid using the image files, and just change the formatting on
the text links I already have to, say, a different color font or a bold font
or something like that for the one menu choice, then that would be just
as
good. (But if it has to be *image swapping* I know that wouldn't work.)



Any help is appreciated. It's not vital to the site's operation, but I
think it would be a nice touch.



(Don't have the site on the web yet. Oh, and I'm using Front Page 2000, and
the place I'm doing this for has FP extensions and all that on their server.
In case it makes any difference to your response, I also know how to do
include pages . not that I can see how that would help in this case.
Actually, I was just trying to impress you with the depth of my knowledge.)



Thanks very much!



Annette

 

[Annette]

Thanks for the help from ALL of you!

Jon, I'm currently using shared borders. When I initially created them
(marked "all pages"), I cleared the checkboxes for navigation, because I
wanted to handle that myself.

So I put my logo in the top border, and in the left side border I put a
table containing links for navigation. They're text links at the moment,
but I have also already made JPEG images (two of each image -- one
underlined one not) for the same links -- just not using the images because
if I can't swap the images, I see no reason to use images in place of text
links in the first place. [Well, except of course that they're prettier
<G>. But from a usability standpoint, there's no difference, easier to
change them in the future, yadda yadda]

So that's it. A shared border with a table with hyperlinks.

So, I'll have a look at your advice (and the advice from the rest, keeping
in mind the javascript issue), and do a LOT of reading on CSS [that's those
big chapters at the end of the big fat Front Page books, right?].

One question for you, though. If I do end up using images, I'd have default
images on the shared border, right? And all I want the code to do is to
switch FROM the default TO the alternate image, right? So the code is only
needed for reference to that alternate button image, right? And, if so,
then is there any advantage to naming the alternate "button" for the page
identical to the page name itself? (e.g., if page is named faculty.htm then
the alternate button would be named faculty.jpg) Would this make it
possible then to write code that wouldn't require naming each button in the
code? That is, a line of code that would just look for a match in file
names when the page loads?

Hope I worded that in a way you can possibly figure out! I programmed
Access databases in VBA, (but that was more than five years ago), and I know
there were certain modules that I could write that would refer more
globally. Something about "if...then" and "loops" and stuff like that.
(Maybe it was MORE than five years ago.)

So does CSS offer stuff like that? And I would only have to name the
alternate image, right? I mean, the default image would stay put without the
code, right?

Thanks for your help!!!

Annette

That would be risky in as much as non-js users would have no navigation
and worse still search engines would have no links to follow. Without
seeing the kind of navigation she has it's hard to say but I'd give the
table/list or whatever the menu is contained in an id, set up a class for
the current page then add some script to check the current page and apply
a class, something like
<style type="text/css">
a.down{
color:green;
}
</style>
<script type="text/javascript">
function doMenu(){
var a=location.href,
d=document.getElementById("theNav").getElementsByTagName("A");
for(i=0;i<d.length;i++){
if(d.getAttribute("HREF")==a)d.className='down';}}
</script>
</head>
<body onload="doMenu()">
<ul id="theNav">
<li><a href="page1.asp">Page 1</a></li>
<li><a href="page2.asp">Page 2</a></li>
<li><a href="page3.asp">Page 3</a></li>
<li><a href="page4.asp">Page 4</a></li>
</ul>

--
Cheers,
Jon
Microsoft MVP

Options:
1) Manually produce a navigation bar in each page - you have already
discounted this

2) Use FrontPage navigation components. In FP2000 the text links are
limited to one choice for vertical or horizontal, but this can be styled
using CSS - see www.rxs-enterprises.org/tests/style-nav.htm for an
example
of vertical navigation bar.

3) Use server side scripting to construct a navigation bar on each page.
See left nav bar at
www.rxs-enterprises.org/fp/webfaqs.asp for the result in browser.

4) Use JavaScript to create the navigation bar - can be problematic for
those browsers not running JavaScript. Each link would be:

<script type="text/javascript">
loc = document.location;
lnk = "http://example.com/mypage.htm";
label = "My next page";
if (lnk == loc) document.write(label);
else document.write("<a href=\"" + lnk + "\">" + label + "</a>");
</script>
<noscript><a href="mypage.htm">My next page</a></noscript>

This can be simplified by calling a function for each link - that is an
exercise for the student.
--
Ron Symonds
Microsoft MVP (FrontPage)
Reply only to group - emails will be deleted unread.

Hi, all.



I need help figuring this out. I want to change the appearance of the menu
option of the page that is currently loaded, so that it contrasts with
the
other options, and the user gets a visual cue where they *are*.



I know how to do hover-buttons, and I can see that I have some options
in
that little thingamabob DHTML or whatever it's called, for when a page loads
(those little funky things like having text fly onto a page, etc.)



Well, phooey on all those. I don't want any flying text, and I don't
want
an effect that happens *as* the person clicks [or hovers] over a menu
choice. I want an effect to start at the moment the person gets to a page,
and then stay put until the person goes to the next page.



At the moment, I'm using shared borders with a table containing links
that I
typed into the table. I also already have created in Image Composer a whole
set of corresponding [currently unused] 'image' versions of those same
links, with the text of each link underlined in one version and then not
underlined in the other. Pretty boring, but IMHO it's classy. My idea was
that, when the person went to the page named "College by Television", as
long as they are on that page the "College by Television" image looks
different from the others.



The only way *I* could think of doing it was to ditch the shared border
concept in exchange for a unique table for each page of the website,
where
the only difference on each page would be that the image for that page
has
the unique formatting for that page's link. But that sounds pretty
work-intensive, and if I chose to add pages to the site later on (which
is
likely!) I'd have to rework every page which sounds just plain stupid.



If I could avoid using the image files, and just change the formatting
on
the text links I already have to, say, a different color font or a bold font
or something like that for the one menu choice, then that would be just
as
good. (But if it has to be *image swapping* I know that wouldn't work.)



Any help is appreciated. It's not vital to the site's operation, but I
think it would be a nice touch.



(Don't have the site on the web yet. Oh, and I'm using Front Page 2000, and
the place I'm doing this for has FP extensions and all that on their server.
In case it makes any difference to your response, I also know how to do
include pages . not that I can see how that would help in this case.
Actually, I was just trying to impress you with the depth of my knowledge.)



Thanks very much!



Annette