PHP Developers Network

A community of PHP developers offering assistance, advice, discussion, and friendship.
 
Loading
It is currently Mon Oct 23, 2017 1:01 am

All times are UTC - 5 hours




Post new topic Reply to topic  [ 20 posts ]  Go to page 1, 2  Next
Author Message
PostPosted: Thu Feb 02, 2017 8:42 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4349
Location: United Kingdom
We have an issue that is on another thread, but that thread is not totally related to this problem.

On a dropdown menu, on certain devices their 'standards' are not to identify dropdowns, and if they have a HREF tag assigned, the dropdowns work, but goes straight away to the page of the link.

Apple devices do not to it. And on Desktop, they operate via hover. It seems to mostly do this on Android. We are told their standards don't take note of the hover part.

So a plan B would be of the @media width was 768 or below, showing a mobile menu, to disable the HREF on the first tap/click, but enable it on the second.

Is this possible to do??

The only issue might be, where some of the links in the menu are not dropdowns.

Syntax: [ Download ] [ Hide ]
<div class='navigation' id='menu'>
<div class='navitem'><a href='/'><i class='fa fa-home'></i></a></div>

  <div class='navitem'>
  <a href='/contact-us'>Support <i class='fa fa-angle-down' aria-hidden='true'></i></a>
 <div class='navitem-dropdown'>
<a href='/faq'>FAQs</a>
 <a href='/the-experience'>The Experience</a>
<a href='/videos'>Support Videos</a>
 <a href='/contact-us'>Contact</a>
 </div></div>
 
<div class='navitem'><a href='/about'>About Us</a></div>  
<div class='navitem'><a href='/blog'>Blog</a></div>
<div style='clear: both' ></div>
</div>
<div style='clear: both'></div>
</div>
Here is an example.

So how can I disable the HREF on click on the Support dropdown, and have it fire on the second - but NOT do that on the others?

_________________
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.


Top
 Profile  
 
PostPosted: Thu Feb 02, 2017 1:45 pm 
Offline
Spammer :|
User avatar

Joined: Wed Oct 15, 2008 2:35 am
Posts: 6573
Location: WA, USA
I'd avoid putting a link there entirely. Conceptually it's annoying: clicking the "Support" should get me a menu*, but clicking "Support" should also go to the support page? You have the contact link in the submenu anyways.

But to answer the question, yes. Attach a click event handler using your Javascript framework and do a event.preventDefault() if the menu is closed.

* Yes, you said it works on hover, but that's an increasingly less used behavior as it doesn't match up with more common (ie, desktop) interfaces.


Top
 Profile  
 
PostPosted: Thu Feb 02, 2017 2:21 pm 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4349
Location: United Kingdom
So what is the answer??
You have a menu along the top, with them all working on hover (like most sites nowadays). But on a Desktop you click the link for say "Support" and it goes to the contact page. But on an Android device, you tap it to expand the menu and it goes to the Contact page.

That's the annoying bit. And that is what I am trying to overcome, without recoding the whole flipping thing.

Surely there is a fix for this android issue where it ignores the hover. iPad and iPhone don't ignore it. you tap on the top level and it expands, tap it again and it goes to the page.

_________________
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.


Top
 Profile  
 
PostPosted: Thu Feb 02, 2017 2:29 pm 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4349
Location: United Kingdom
http://brianshim.com/webtricks/drop-dow ... d-android/
This is the exact issue.

_________________
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.


Top
 Profile  
 
PostPosted: Fri Feb 03, 2017 12:34 am 
Offline
Spammer :|
User avatar

Joined: Wed Oct 15, 2008 2:35 am
Posts: 6573
Location: WA, USA
simonmlewis wrote:
So what is the answer??

The answer is what I said in my post. Did you read the whole thing? I did tell you not to use the link, but then I said something else - and that link you gave said the same thing too.

simonmlewis wrote:
But on a Desktop you click the link for say "Support" and it goes to the contact page.

Unless it's a menu.


Top
 Profile  
 
PostPosted: Fri Feb 03, 2017 2:52 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4349
Location: United Kingdom
But we need the text in that top menu to be links too. It really works for us and seen that on so many websites.
And on iOS and others, it's fine. Just that on Android it's a pain as it ignores what others seem to do correctly.
We cannot move those top links.

_________________
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.


Top
 Profile  
 
PostPosted: Fri Feb 03, 2017 3:10 am 
Offline
Spammer :|
User avatar

Joined: Wed Oct 15, 2008 2:35 am
Posts: 6573
Location: WA, USA
And I've seen other websites that don't do that. But whatever, then don't remove them.


Top
 Profile  
 
PostPosted: Fri Feb 03, 2017 3:13 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4349
Location: United Kingdom
So are you saying there is no JS that will be able to ignore the first HREF click on a specific link, but enable it after?

_________________
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.


Top
 Profile  
 
PostPosted: Fri Feb 03, 2017 4:19 am 
Offline
Spammer :|
User avatar

Joined: Wed Oct 15, 2008 2:35 am
Posts: 6573
Location: WA, USA
No, I'm telling you (for the second time) to read my first post.


Top
 Profile  
 
PostPosted: Fri Feb 03, 2017 4:38 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4349
Location: United Kingdom
Quote:
But to answer the question, yes. Attach a click event handler using your Javascript framework and do a event.preventDefault() if the menu is closed.

I don't know how to do this. If this is what you are referring to.

_________________
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.


Top
 Profile  
 
PostPosted: Fri Feb 03, 2017 5:17 am 
Offline
Spammer :|
User avatar

Joined: Wed Oct 15, 2008 2:35 am
Posts: 6573
Location: WA, USA
Yes, that is what I'm referring to.

You using any Javascript framework? You know how to use it to get events, like onclick or onchange?


Top
 Profile  
 
PostPosted: Fri Feb 03, 2017 5:21 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4349
Location: United Kingdom
Vaguely with onclick and onchange. Really vague.
I'm using a bit of Javascript.

That event I looked at, disables the link on the first click, but I want it to enable the dropdown on a mobile device. Concerned that it might disable everything on the first click.

http://www.regatta.com/
This site does what I want. And I don't believe they have two menus (desktop and mobile). Just one. Top levels link.

_________________
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.


Top
 Profile  
 
PostPosted: Fri Feb 03, 2017 6:14 am 
Offline
Spammer :|
User avatar

Joined: Wed Oct 15, 2008 2:35 am
Posts: 6573
Location: WA, USA
Actually what they're doing is using a block-level element to cover up the link. I forgot to check but it didn't seem possible to click the "link" when the menu was open, so it's not quite the same thing as what you're trying to do.

You're using Javascript to show the menu, right? What does that look like?


Top
 Profile  
 
PostPosted: Fri Feb 03, 2017 6:20 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4349
Location: United Kingdom
I've PMd you. Reasons will be apparent.

_________________
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.


Top
 Profile  
 
PostPosted: Fri Feb 03, 2017 7:00 am 
Offline
Spammer :|
User avatar

Joined: Wed Oct 15, 2008 2:35 am
Posts: 6573
Location: WA, USA
Obviously you can't use :hover for mobile, so that means co-opting another mechanism for the menu. That'd be touch/click, which must add a class to the item to indicate the faked hover state.

Amend your CSS so that the menu opens up for both :hover and for some other class, like "opened" or whatever you want. Then use Javascript to add a touchstart event listener that goes like
Code:
if (menu does not have class) {
   add class
   return false
}

So when the user touches the menu item, it adds the class (and the menu appears) and the event stops (and doesn't trigger the link). You'll probably also want to remove the class from any other opened menu.

For events use addEventListener. You should be able to add the listener on the menu rather than on the link itself.


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 20 posts ]  Go to page 1, 2  Next

All times are UTC - 5 hours


Who is online

Users browsing this forum: No registered users and 2 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
cron
Powered by phpBB® Forum Software © phpBB Group