Back button interferes with navigation - how can this be avoided?

My webpage with a free textbook has a simple html navigation.
Moving the cursor on the menu item makes
appear the menu item red, using onmouseover.

If I click that menu item, I get to the new page.
Everything works fine. But if I then bo back
with the back button (Mac Safari and IE - have not
checke on PC yet) I do get back to the previous
page, but with the choice of the next already/still highlighted.
(There are two red bars in this case.) Ugly.

All the programming is in html pages and in one css file;
nothing is hidden. (See http://www.motionmountain.net )
What is going wrong? How can one avoid this?

Any hint is appreciated.

Regards

Christoph Schiller

On 9 Apr 2005 14:36:28 -0700, <chri_schiller (AT) yahoo (DOT) com> wrote:

My webpage with a free textbook has a simple html navigation.
Moving the cursor on the menu item makes
appear the menu item red, using onmouseover.

If I click that menu item, I get to the new page.
Everything works fine. But if I then bo back
with the back button (Mac Safari and IE - have not
checke on PC yet) I do get back to the previous
page, but with the choice of the next already/still highlighted.
(There are two red bars in this case.) Ugly.

All the programming is in html pages and in one css file;
nothing is hidden. (See http://www.motionmountain.net )
What is going wrong? How can one avoid this?

I didn't go look, but it doesn't sound like anything going wrong to me.
The element a probably still has focus. If you style a:focus (or maybe
a:active if it turns out to be active still) with the background color of
choice, your so called problem might just disappear.


--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.

weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------'

What is focus? I have never used the term in my stylesheet.

On 9 Apr 2005 15:11:22 -0700, <chri_schiller (AT) yahoo (DOT) com> wrote:

[Please learn to quote properly. Quote the bit you reply to, attribute it
and then reply underneath the quote.

What is focus? I have never used the term in my stylesheet.

<http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes>

--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.

weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------'

<chri_schiller (AT) yahoo (DOT) com> wrote

My webpage with a free textbook has a simple html navigation.
Moving the cursor on the menu item makes
appear the menu item red, using onmouseover.

If I click that menu item, I get to the new page.
Everything works fine. But if I then bo back
with the back button (Mac Safari and IE - have not
checke on PC yet) I do get back to the previous
page, but with the choice of the next already/still highlighted.
(There are two red bars in this case.) Ugly.

This is due to the browser settings on the client, which you cannot
override. By using the back button to return to a page that page will be
shown as it was (i.e. with the forward navigation links still marked as
unselected) unless the browser is specifically told to reload the page. It
is only by reloading the page will the status of any links be evaluated.

--
Tony Marston

http://www.tonymarston.net

All the programming is in html pages and in one css file;
nothing is hidden. (See http://www.motionmountain.net )
What is going wrong? How can one avoid this?

Any hint is appreciated.

Regards

Christoph Schiller

chri_schiller (AT) yahoo (DOT) com wrote:

My webpage with a free textbook has a simple html navigation.
Moving the cursor on the menu item makes
appear the menu item red, using onmouseover.

If I click that menu item, I get to the new page.
Everything works fine. But if I then bo back
with the back button (Mac Safari and IE - have not
checke on PC yet) I do get back to the previous
page, but with the choice of the next already/still highlighted.
(There are two red bars in this case.) Ugly.

Ugly? It reminds the user that he's already visited the page to which
the link leads. That's useful, and it's been normal browser presentation
since the beginning of graphical browsers. Why is that a problem?

Harlan Messinger wrote:

Ugly? It reminds the user that he's already visited the page to which
the link leads. That's useful, and it's been normal browser presentation
since the beginning of graphical browsers.

And it has always been a problem for web application developpers since
the very beginning of web developpment.
In web application, it could be very difficult to manage a click on a
back button - because you're lossing the user context when he does that.

Greg Schmidt <gregs (AT) trawna (DOT) com> wrote

On 10 Apr 2005 00:08:03 -0700, chri_schiller (AT) yahoo (DOT) com wrote:
tr
td class="lmenu" onmouseover="this.className='lmon'"
onmouseout="this.className='lmout'"
onClick="window.self.location='text.html'"><a
href="text.html">Download</a></td
/tr
...
Anyway, when clicking on "back" the previous choise is still there,
as if the pointer had remained over it - which it is not; the pointer
is on the back button. Why?

Seems that it's because there was never an "onmouseout" event generated.
Maybe your onClick should call a function which does the onmouseout code
and then loads the new page? (That's a wild guess, I haven't tried it.)
Even better, why not get rid of all the JavaScript junk that won't work
for a large percentage of the population anyway and do this all with the
CSS a: pseudoclasses?

Would you let me know how to do it?

Regards

Christoph Schiller

On 15 Apr 2005 04:49:50 -0700, Christoph Schiller wrote:

Greg Schmidt <gregs (AT) trawna (DOT) com> wrote

On 10 Apr 2005 00:08:03 -0700, chri_schiller (AT) yahoo (DOT) com wrote:
tr
td class="lmenu" onmouseover="this.className='lmon'"
onmouseout="this.className='lmout'"
onClick="window.self.location='text.html'"><a
href="text.html">Download</a></td
/tr
...
Anyway, when clicking on "back" the previous choise is still there,
as if the pointer had remained over it - which it is not; the pointer
is on the back button. Why?

Seems that it's because there was never an "onmouseout" event generated.
Maybe your onClick should call a function which does the onmouseout code
and then loads the new page? (That's a wild guess, I haven't tried it.)
Even better, why not get rid of all the JavaScript junk that won't work
for a large percentage of the population anyway and do this all with the
CSS a: pseudoclasses?

Would you let me know how to do it?

I think you're looking for something like http://trawna.com/cssmenu.html
It should work at least as well, probably better, and it's a fraction of
the code. Enjoy!

--
Greg Schmidt gregs (AT) trawna (DOT) com
Trawna Publications http://www.trawna.com/

On Fri, 15 Apr 2005 12:04:43 -0400, Greg Schmidt wrote:

I think you're looking for something like http://trawna.com/cssmenu.html

Damn! That should have been http://trawna.com/test/cssmenu.html
(Repeat to self: copy-and-paste, copy-and-paste)
Tested on Opera 6/7, Netscape 6, Firefox and IE5/6. Less than stellar
on NS4 and IE4, but their combined market share should be less than the
percentage of users without JavaScript (either through personal or
institutional choice), and CSS hiding tricks can be done to improve the
look for them if desired.

--
Greg Schmidt gregs (AT) trawna (DOT) com
Trawna Publications http://www.trawna.com/