[opencms-dev] OpenCMS Menu - Browser back button focus issue
Paul-Inge Flakstad
flakstad at npolar.no
Thu Jul 12 12:59:09 CEST 2012
Hi Andreas,
Sorry about the late answer, I've been away on vacation. First of all, OpenCms does not influence browser history, at least not to my knowledge.
I can't access http://demo.opencms.org, but if I remember correctly, the result is exactly what one would expect with the applied styles. And I wouldn't fiddle around too much with normal browser interpretation of styles, but rather change the styles themselves.
The "problem" seems to me to be the styling and the way that browsers interpret and display the styles - especially :focus and :active styles. When you compare OpenCms to these other CMSs, are you sure they use the same kind of applied styles? If not - which I would bet is the case - they are not directly comparable.
Have you tried something like this HTML code to see how the styles are applied? (Can be helpful to understand the nature of the pseudo-classes as well.) There are differences from browser to browser, by the way. For example, the latest version of Chrome seems to behave the way you want.
( Online version at http://byteforge.no/private/active-focus.html )
<!DOCTYPE HTML>
<html>
<head>
<title>a:focus and a:active - pseudo-classes for the anchor element</title>
<meta charset="utf-8">
<link rel="canonical" href="http://byteforge.no/private/active-focus.html" />
<style type="text/css">
body { font:1em Verdana, Verdana, Geneva, sans-serif; }
/* Note that the order of the pseudo-class style declarations may affect the result */
a,
a:link,
a:visited { color:blue; }
a:focus { color:green; }
a:active { color:red; }
a:hover { color:lightblue; }
</style>
</head>
<body>
<h1>CSS pseudo-classes for the anchor element</h1>
<ul>
<li><a href="http://www.google.com">Google</a></li>
<li><a href="http://www.yahoo.com">Yahoo</a></li>
<li><a href="http://www.flickr.com">Flickr</a></li>
<li><a href="http://www.facebook.com">Facebook</a></li>
<li><a href="http://www.twitter.com">Twitter</a></li>
<li><a href="http://www.pinterest.com">Pinterest</a></li>
</ul>
<h3>The applied styles</h3>
<ul>
<li><span style="color:blue;">a, a:link, a:visited</span></li>
<li><span style="color:lightblue;">a:hover</span></li>
<li><span style="color:green;">a:focus</span></li>
<li><span style="color:red;">a:active</span></li>
</ul>
</body>
</html>
I hope this helps you.
Cheers,
Paul
From: opencms-dev-bounces at opencms.org [mailto:opencms-dev-bounces at opencms.org] On Behalf Of Feuerstein Andreas
Sent: 26. juni 2012 13:54
To: The OpenCms mailing list
Subject: Re: [opencms-dev] OpenCMS Menu - Browser back button focus issue
Hi Paul, hi all!
I'm not allowed to change the style so I don't really have a choice. I'm wondering why Typo3, Joomla and Drupal do not behave like OpenCMS in this case. I would assume OpenCMS does influence browser's history in any way.
I think one possibility to achieve what I want would be to remove the focus from selected menu items. Is there any idea how I could programmatically do this?
Or does anyone know another solution for my problem?
Best regards,
Andreas
Von: opencms-dev-bounces at opencms.org [mailto:opencms-dev-bounces at opencms.org] Im Auftrag von Paul-Inge Flakstad
Gesendet: Freitag, 15. Juni 2012 14:29
An: The OpenCms mailing list
Betreff: Re: [opencms-dev] OpenCMS Menu - Browser back button focus issue
Hi Andreas,
Yes, it would.
As far as I know, if you want to style the focus, you should also accept that style being present when navigating using the browser history (unless you force page reloads on back-clicks, which isn't very user-friendly).
I think this behavior is consistent across browsers, probably for a good reason. I wouldn't try to meddle too much with the browser's CSS interpretation when it's not doing anything wrong. (You could end up confusing and/or annoying the audience you're actually targeting with this - i.e. users who tab - because your solution would differ from the norm.)
You'll probably find plenty of stuff about this on the web - I doubt you're the first to struggle with the issue. :)
PS: Maybe the root of your problem is that you're using styles that are too similar? I'd go for one style for "active" (e.g. the link pointing to the page currently displayed in the browser) - for example a background image - and a completely different one for focused links - for example only an outline.
Cheers,
Paul
From: opencms-dev-bounces at opencms.org<mailto:opencms-dev-bounces at opencms.org> [mailto:opencms-dev-bounces at opencms.org]<mailto:[mailto:opencms-dev-bounces at opencms.org]> On Behalf Of Feuerstein Andreas
Sent: 15. juni 2012 14:04
To: The OpenCms mailing list
Subject: Re: [opencms-dev] OpenCMS Menu - Browser back button focus issue
Hi Paul,
thanks for your answer!
Unfortunately I need the behaviour that shows the background image on focus (to highlight menu items when pressing the tab key to move the cursor). With your solution the tab functionality would be gone, wouldn't it?
Best Regards,
Andreas
Von: opencms-dev-bounces at opencms.org<mailto:opencms-dev-bounces at opencms.org> [mailto:opencms-dev-bounces at opencms.org]<mailto:[mailto:opencms-dev-bounces at opencms.org]> Im Auftrag von Paul-Inge Flakstad
Gesendet: Freitag, 15. Juni 2012 10:29
An: The OpenCms mailing list
Betreff: Re: [opencms-dev] OpenCMS Menu - Browser back button focus issue
Hi again Andreas,
This has very little to do with OpenCms, but what the hell :)
You're seeing the background image because you told the browser to display it for links with focus:
.visual-nav a:hover img, .visual-nav a:focus img {
display: block;
}
Upon clicking the back button, the browser will show the previous page in its last known state. In that state, the link that's seemingly misbehaving *has focus*. Hence the background image is visible - as well as any other focus styles.
Try this for a fix:
.visual-nav a:hover img {
display: block;
}
.visual-nav a:focus img {
display: none;
}
HTH. :) As always, Google has plenty more info.
Cheers,
Paul
From: opencms-dev-bounces at opencms.org<mailto:opencms-dev-bounces at opencms.org> [mailto:opencms-dev-bounces at opencms.org]<mailto:[mailto:opencms-dev-bounces at opencms.org]> On Behalf Of Feuerstein Andreas
Sent: 14. juni 2012 09:06
To: The OpenCms mailing list
Subject: Re: [opencms-dev] OpenCMS Menu - Browser back button focus issue
Hi Paul,
thanks for your reply.
Your solution removes the outline, but doesn't solve my problem.
I use background images for active menu items, hovered menu items and focused menu items. When pressing the browser's back button, the previous selected menu item still displays the background image. Maybe my css kann show you what I mean:
.visual-nav a img {
display: none;
}
.visual-nav .active_menu img {
display: block;
height: 2.75em;
width: 16.167em;
}
.visual-nav a:hover, .visual-nav a:focus {
background: none repeat scroll 0 0 transparent;
text-decoration: none;
}
.visual-nav a:hover img, .visual-nav a:focus img {
display: block;
}
My menu entries (inactive & active) look like this:
<li>
<a href="/test/">
<img alt="" src="http://my-domain.com/images/bg-active.gif">
<span class="gradient">Menu entry</span>
</a>
</li>
<li>
<span class="menu_active">
<a href="/test/">
<img alt="" src="http://my-domain.com/images/bg-active.gif">
</a>
</span>
</li>
Thanks for your help!
Von: opencms-dev-bounces at opencms.org<mailto:opencms-dev-bounces at opencms.org> [mailto:opencms-dev-bounces at opencms.org]<mailto:[mailto:opencms-dev-bounces at opencms.org]> Im Auftrag von Paul-Inge Flakstad
Gesendet: Mittwoch, 13. Juni 2012 16:30
An: The OpenCms mailing list
Betreff: Re: [opencms-dev] OpenCMS Menu - Browser back button focus issue
Hi Andreas,
Looks like the last clicked link's "outline" style is still present after skipping back in the browser.
Try adjusting the CSS. (outline:none;)
Cheers,
Paul
From: opencms-dev-bounces at opencms.org<mailto:opencms-dev-bounces at opencms.org> [mailto:opencms-dev-bounces at opencms.org]<mailto:[mailto:opencms-dev-bounces at opencms.org]> On Behalf Of Feuerstein Andreas
Sent: 13. juni 2012 13:50
To: The OpenCms mailing list
Subject: Re: [opencms-dev] OpenCMS Menu - Browser back button focus issue
Has nobody got an idea?
________________________________
Von: opencms-dev-bounces at opencms.org<mailto:opencms-dev-bounces at opencms.org> im Auftrag von Feuerstein Andreas
Gesendet: Mi 16.05.2012 11:07
An: opencms-dev at opencms.org<mailto:opencms-dev at opencms.org>
Betreff: [opencms-dev] OpenCMS Menu - Browser back button focus issue
Hi,
I found an error on the focus settings.
1. Select a menu entry
2. Select another menu entry
3. Press browser's back button
The focus remains on the previously selected menu entry. The expected behaviour would be that the focus is moved to the active menu entry.
This can be reproduced here (you see the problem by using a submenu): http://demo.opencms.org/ in combination with Firefox & IE.
Do you have a solution for this?
Best regards,
Andreas
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://webmail.opencms.org/pipermail/opencms-dev/attachments/20120712/50601ec7/attachment.htm>
More information about the opencms-dev
mailing list