[opencms-dev] OpenCMS Menu - Browser back button focus issue

[Paul-Inge Flakstad]

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] 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] 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/20120615/be722446/attachment.htm>