Adventure ten header: Toggle highlights at the wrong time

Support
#1

“Adventure Ten” header, on Iphone Safari, and on PC-Chrome:

When using the Toggle menu of the Adventure Ten header, I observe this erroneous behavior after I toggle the menue at least once (tap on the toggle, tap again so the menue disappears again):

When switching away from the browser (IOS) or minimizing the browser window (PC Wndows) and then switching back to the browser window, the toggle now is in highlight mode, when it should in fact be in normal mode.

I have created my own header based on the Adventure Ten header. How can this behavior be prevented, please?

Regards, Mikael

See:
http://demo.theme.co/designcloud/headers/adventure-ten/

#2

Hello Mikael,

Thanks for writing in! The design cloud is under testing with Pro 2.6 beta 1. Please expect this issue be resolved once the final release of the Pro theme is rolled out.

Since you have created your own header, did it also happen in your installation? I am assuming that you are using the Pro2.5.5 in it. Would you mind sharing with us the url of the page so that we can take a closer look?

Thank you in advance.

#3

Hello RueNel,

thank you for getting bac to me.

Yes the bug shows up also in my own installation, that’s why I am writting in. Here is the url to the site:

https://alimaarden.live-website.com/

You need login credentials, see secure note.

Best regards, Mikael

#4

I have 2 other unresolved issues, the topics are closed, could you comment on the status of these issues:

Thanks! Mikael

#5

Hello Mikael,

Thanks for updating in!

I have logged in and checked your site. I could not replicate the issue.
This is what I am seeing:

By the way, I noticed that you are using an older version of the theme. This may be the reason why there are JS errors when you edit a header. Could you please update to the latest versions? Pro 2.5.5 is now available in automatic updates! This release contains fixes for several issues so be sure to check out the changelog (https://theme.co/changelog/). After doing the updates, always remember to clear all caches when updating so that the code from the latest release is always in use. This will help you to avoid any potential errors.

Please let us know how it goes.

#6

Hi RueNel,

thank you for getting back to me.

I updated to 2.5.5 and the reported issue is unaffected, still shows. The issue is independent of my personal installation, it shows on your demo site as well.

May be I was not describing the problem properly. Steps to reproduce:

  1. Open http://demo.theme.co/designcloud/headers/adventure-ten/ and make the window so narrow that you get the mobile (hamburger) menu. this is what is see:

  1. Click on the hamburger so the menu expands

  2. Click on the menu again so the menu collapses. Now I see the same as posted above.

  3. Now, on a PC, minimize browser windows and switch back to browser window, on mobile, press home button so mobile shows home screen, then tap on browser icon so last shownm website shos again. In both cases I see this now:

As you can see, the hamburger is in highlight mode. I can reproduce this issue on all of my various PCs and iphones.

Can you reproduce this, following my steps?

Regards, Mikael

#7

Hi Mikael,

Thank you for the detailed walkthrough, I can replicate that now on my end. But that is not really a bug on the Theme but rather than a browser behavior, with that said I’ve submitted this to our issue tracker so the developers will be made aware of it and maybe can do something about it.

Cheers,

#12

Friech,

the issue is definitely not a browser behavior.

The issue is caused by the focusin and focusout event handlers attached by 2 Themeco scripts to the body element. When I remove these event handlers in my own js code, the faulty behavior goes away.

I would rather keep your handlers in place since I dont know the side effects of removing them. May be you can come up with a solution for me.

Regards, Mikael

#13

I avoided the issue for now by attaching this event handler:

$("body").focusout(function() {
    	document.activeElement.blur();
		});

Without an element in focus, your focusin / focusout scripts don’t cause the harm.

Regards, Mikael

#14

Hi Mikael,

Glad you have found a temporary solution and thank you for sharing. Partly a browser behaviour because Ruenel and I can’t duplicate the issue on Chrome/ Windows 10.

#15

Friech replied to me that he can replicate the issue, it is in your own demo headers, see above.

http://demo.theme.co/designcloud/headers/adventure-ten/

Please note that you can’t see the issue in my website anymore since I have applied my fix.

Yes I found a temporary solution, although your scripts do behave incorrectly and Themeco might want to fix it, I guess.
Regards, Mikael

#16

Hi Mikael,

Yes we acknowledge the issue and it was reported. Since it was not an issue consistently on all screen, we are checking if it’s related to browser. Thank you.

#17

Hi Lely,

thank you, very cool.

Best regards, Mikael

#18

You are most welcome!

#19

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.