Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

#1 2020-10-05 04:47:14

phiw13
Plugin Author
From: Japan
Registered: 2004-02-27
Posts: 2,140
Website

[js] click/focus issue on this page menu with Safari

Trying to build a menu popover with JS without using JQuery. I only found a few examples online. After a few attempts in the end I used the little script the Textpattern website uses. It works nicely on Firefox and Chromium-based browsers. Safari has a problem: it works nicely using the keyboard, but when clicking (macOS) or tapping (iOS) a link, the menu is not dismissed as is the case in Firefox.

Test page here: dev.l-c-n.com/tbz/tbz.html
Clicking / tapping or using the keyboard should (a) jump to the target and (b) dismiss/close the menu. In Safari the latter only happens when using the keyboard.

Any suggestion appreciated (or links to different examples). TIA

<aside> amazing how soo many JS related tutorials are (still) dependent on JQuery </aside>

PS – I have a faint idea about what is actually happening, in that when you use the pointer (clicking), Safari doesn’t really set or shift the focus, thus the focusing / focusout events are not triggered, but right now I don’t know how to fix that.


Where is that emoji for a solar powered submarine when you need it ?

Offline

#2 2020-10-06 05:03:11

Pat64
Plugin Author
From: France
Registered: 2005-12-12
Posts: 1,423
Website

Re: [js] click/focus issue on this page menu with Safari

Hi Philippe.

Found for you, but I don’t know if these two solutions could help?

https://stackoverflow.com/questions/18914568/make-onclick-work-on-iphone/18914640

https://stackoverflow.com/questions/43335183/window-click-event-does-not-fire-on-ios-safari-javascript-only


Patrick.

Github | CodePen | Codier | Simplr theme | Wait Me: a maintenance theme | [\a mi.ni.ma]: a “Low Tech” simple Blog theme.

Offline

#3 2020-10-06 07:17:06

phiw13
Plugin Author
From: Japan
Registered: 2004-02-27
Posts: 2,140
Website

Re: [js] click/focus issue on this page menu with Safari

Pat, thanks but the click() in itself is not really the issue if you are dealing with interactive elements like the <a />. the issue is more the way Safari, both iOS and macOS manage the focus when clicking or tapping. I made some progress with this, by using the click() event on the link

var navlink = document.querySelector(".pg-navlink");

navlink.addEventListener('click', function()
        {
          navtoggle.classList.remove('otsu-nav-toggle-active');
          navmenu.classList.remove('otsu-nav-open');
        });

that works… but so far only on the first link in the popup (there are 6). I’ll get there eventually…

thank you for looking

PS – did I tell that Javascript is not really my thing? (blame the inventor of the language; true fact actually)


Where is that emoji for a solar powered submarine when you need it ?

Offline

#4 2020-10-06 08:15:40

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 9,776
Website

Re: [js] click/focus issue on this page menu with Safari

phiw13 wrote #326234:

that works… but so far only on the first link in the popup (there are 6). I’ll get there eventually…

You’re nearly there. Try selecting as a descendent of the otsu-nav-blocks. Something likethis (untested)

var navlist = document.getElementById('otsu-nav-blocks');
var navitems = navlist.querySelectorAll('a');
navitems.addEventListener('click', function(e) {
    e.preventDefault();
    navtoggle.classList.toggle('otsu-nav-toggle-active');
    navmenu.classList.toggle('otsu-nav-open');            
});

There’s probably a more efficient way of doing that by using delegation but I’m not big on how to do that in vanilla JS.

Last edited by Bloke (2020-10-06 08:17:10)


The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.

Txp Builders – finely-crafted code, design and Txp

Offline

#5 2020-10-06 08:54:56

phiw13
Plugin Author
From: Japan
Registered: 2004-02-27
Posts: 2,140
Website

Re: [js] click/focus issue on this page menu with Safari

Bloke wrote #326236:

You’re nearly there. Try selecting as a descendent of the otsu-nav-blocks. Something likethis (untested)

Hmm, when I do that, I get:

TypeError: undefined is not a function (near '...navitems.addEventListener…')

see the (updated) test file: dev.l-c-n.com/tbz/tbz.html


Where is that emoji for a solar powered submarine when you need it ?

Offline

#6 2020-10-06 15:37:26

jakob
Admin
From: Germany
Registered: 2005-01-20
Posts: 3,938
Website

Re: [js] click/focus issue on this page menu with Safari

phiw13 wrote #326237:

Hmm, when I do that, I get:

TypeError: undefined is not a function (near '...navitems.addEventListener…')...

see the (updated) test file: dev.l-c-n.com/tbz/tbz.html

Try iterating over the individual items of the querySelectorAll:

(function ()
{
    'use strict';

     // Responsive navigation menu.

     var navmenu = document.getElementById('otsu-page-navigation');

     if (navmenu) {
        var navtoggle = document.getElementById('otsu-nav-toggle');
        var navlist = document.getElementById('otsu-nav-blocks');

        navtoggle.addEventListener('click', function(e)
        {
            e.preventDefault();
            navtoggle.classList.toggle('otsu-nav-toggle-active');
            navmenu.classList.toggle('otsu-nav-open');
        });

        navlist.querySelectorAll('a').forEach(item => {
            item.addEventListener('click', event => {
                navtoggle.classList.toggle('otsu-nav-toggle-active');
                navmenu.classList.toggle('otsu-nav-open');            
            })
        });

    }

})();

TXP Builders – finely-crafted code, design and txp

Offline

#7 2020-10-07 00:47:43

phiw13
Plugin Author
From: Japan
Registered: 2004-02-27
Posts: 2,140
Website

Re: [js] click/focus issue on this page menu with Safari

jakob wrote #326240:

Try iterating over the individual items of the querySelectorAll:

(function ()...

This construction: forEach(item) is what I was missing combined with me misunderstanding querySelectorAll ! Thanks Jacob, now that popover works nicely on every device available.


Where is that emoji for a solar powered submarine when you need it ?

Offline

#8 2020-10-07 06:18:41

philwareham
Core designer
From: Haslemere, Surrey, UK
Registered: 2009-06-11
Posts: 3,394
Website

Re: [js] click/focus issue on this page menu with Safari

If any of your findings might also benefit my JavaScript on the Textpattern site nav then please can you open an issue at the site repo with the suggested improvements. Cheers all.

Offline

#9 2020-10-07 09:02:09

Pat64
Plugin Author
From: France
Registered: 2005-12-12
Posts: 1,423
Website

Re: [js] click/focus issue on this page menu with Safari

Hi Phil.

I found a strange behavior within browser small screens emulator for the search micro-design element: when I focus into it, the left input border sometimes is positionned in the middle of the Textpattern logo (Firefox PC), somethines just after the “T” letter (Google Chrome PC).

The simpliest way to get a pretty correct rendering (the input above the logo on the focus event), seems the change as this:

Line 3746:


	.search-form [type=search]:focus {
		left: 0;
		width: 100%;
		...
	}

Here is a screenshot (from the Lambda tests platform with a Samsung Galaxy S9):

Last edited by Pat64 (2020-10-08 04:35:33)


Patrick.

Github | CodePen | Codier | Simplr theme | Wait Me: a maintenance theme | [\a mi.ni.ma]: a “Low Tech” simple Blog theme.

Offline

Board footer

Powered by FluxBB