Hover event for iPad Safari - javascript

I have a page with "main tabs" which behaves as follows;
1. On hover of these, I show "sub tabs"
2. On click of any of the main tabs, it goes to one of the default sub tab pages.
$(".mainlink_href").mouseover(function(){...}
Now these behaves as expected on desktop browsers. But on the iPad, when user clicks on any of the main tabs, it always does the hover method execution i.e. shows the sub tabs and does not go the sub tabs page (as in the desktop)
Now I agree, that this is as per expected iPad behavior since there is no mouse cursor to track for hover event otherwise...
But is there any way that I can update the code such that "only for the iPad" it does not go through the hover method for the first click and instead does the click event and directly takes the user to the default sub tab page (i.e. similar to point 2 above in desktop browsers)
Please help me. Thank you.

You could just assign both event handlers, and have the ontouchstart handler remove the onmouseover handler.
$(".mainlink_href").mouseover(function(){...});
$(".mainlink_href").ontouchstart(function(){this.mouseover=function(){};});

Related

How to disable iOS Link Preview with javascript css or html attr

When you hold on a link in Chrome / Safari with iOS, it displays an annoying link preview, problems comes when i have like a sortable <ul> list items ( with full link inside it )
So if you hold you drag ( drag event present on my <li> if you click/tap you go to the link <a>.
iOS problem: When i hold just when it should start the drag event, this annoying system modal appears, blocking all the drag process and destroying the UX.
I have tried preventing default actions, pointer events none the link inside the element when the drag start, but nothing, keeps appearing
element.sortable.on('drag:start', (e) => {
e.stopPropagation();
e.preventDefault();
any ideas how to fix this with (js,css or some html attr ?) thanks in advance
This css-style blocks the touch action you are referring to on iOS safari. At the time of question-asking i believe the default popup is the one shown in the picture. But now it navigates to the actual page in a small modal window, in addition to showing some options
a {
-webkit-touch-callout: none;
}
Navigate to this on iOS for test: https://jsfiddle.net/hygf4Lrk/3/
It blocks both long-press (tap and hold for maybe 1s) and force-touch (press hard but instantly) wich result in the same action of link-preview by default.

No click but only hover triggered on mobile touch-screen in browser

I have a web-app. There are some elements with the click event bound to them. It works fine on a desktop. But on a tablet when I touch the element it will first not do anything but instead just show that it's hovered with styles. And on the second click it works. How do I disable hover-on-touch and enable clicking on every first touch for the entire app?
These would also trigger on clicking the right mouse button. ---> this is :active state of the element
Maybe this link will help you:
iPad/iPhone hover problem causes the user to double click a link
(sorry, I'm not allowed to add comment yet)

VoiceOver in Safari iOS - hidden items still audible

The Problem: Menu items on the hidden menu are still spoken by VoiceOver
See the prototype in action: mobile-menu.html
Our website has a slideIn mobile menu for tablet and narrower viewports. In Chrome, Keyboard accessibility behaviors include clicking on the "close-X" button in the expanded mobile menu to hide the menu; navigating beyond the menu hides the menu; Esc on the keyboard hides the menu.
In Safari on iOS using VoiceOver, using an external keyboard, QuickNav correctly stops on the dropdown toggle, and selecting it correctly expands the hidden menu. The menuitems can be chosen. Navigating off the end of the menu hides the menu. Selecting "close-x" also hides the menu.
When the menu is hidden, the desired behavior is to walk ONLY through the page's visible links.
VoiceOver has a quirk: if the menu was hidden by selecting "close-X", then only the visible links on the page are audible. If the menu was hidden by a virtual click - jQuery's .click() behavior triggered by exiting the menu - then VoiceOver continues to treat the hidden links as if they are visible.
The Question: How can I get VoiceOver to make a virtual click behave like a physical click - and ignore the hidden links on the collapsed slide-in menu?
In your code example I see this:
<div class="nav-mobile dropdown-menu dropdown-menu-right" role="menu" aria-hidden="false">
The aria-hidden starts with a value of true, but after I start toggling the menu and hide it again it never switches back to true. Since that is the technique you rely on to hide the menu from a screen reader, it will not be hidden.
In short, this appears to have nothing to do with a click event and more to do with something in your function failing to toggle that value when the menu toggles.
I am not testing on VoiceOver, I am seeing this on NVDA. You should test on more screen reader combinations and maybe replace your jQuery function with vanilla JavaScript to confirm your assertion.
While I am here, I suggest you take a look at focus management for the menu. Since the first tab-stop is to close the menu, which the hamburger already does, you may want to just move focus to the close link.
Also, the role="navigation" could be replaced just by using the <nav> element.
Further, the role="menu" can be confusing for users unless you want to replicate an OS-style menu and implement all the expected keyboard shortcuts. I suggest you just remove it.

How to debug a "Wiggle" in a menu in Internet Explorer

I have to debug a menu that "Wiggles" when the user mouses over each element in it. This only happens in Internet Explorer. In other browsers if I'm looking at markup it will update as events are triggered or styles applied and you can see that in the style trace. IE does not do this, if it can I'm unaware. Is there any way to see updates to the styles/markup in explore, live in the markup/style view, while interacting with the page?
This sounds very much like an old white-space bug. Is the menu formed from the Unordered List? If so, do you have carriage returned between each list item (ie each <li></li> is on a separate line)?
If so, try removing all the whitespace (so all list items are on a single line).
So my problem was that the menu items would "wiggle" when the user would mouse over each item. The problem was that this only happened in Internet Explorer. Where other browsers will let you watch a "live" view of the markup and styles, IE only allows you to refresh that view by clicking on a button above the view or using F5. That complicates things because if your moused over the browser F5 will reload the page. While if you mouse out and refresh the menu item has lost it's change by the time you click the refresh button.
My solution was to isolate the functions called by the mouseover and mouseout events, which were 7 character dynamically named garbage. Once I had what they were being called I could call them and trigger the mouse over and out actions on my own. Then I was able to refresh the markup view and see the styles, applied styles, that were changing.
Turned out that the on mouse-over event added a style that stripped the padding on the top and bottom of the element. In every other browser the box model is rendered so that this didn't matter. In IE it meant that everything would "wiggle" as you moved though the menu.
Gotta love legacy code... and IE.

How can Watir consistently deal with a javascript dropdown menu?

I am n00b to watir and I'm testing a web app that uses extjs. The app has a main menu with several items that have sub items. One of the main menu items has the same text as one of its submenus. In watir webdriver I have this code:
jobs_menu = d.p(:text => "Jobs")
jobs_menu.when_present.flash
jobs_menu.click
jobs_submenu_item = d.a(:text => "Jobs")
jobs_submenu_item.when_present.flash
jobs_submenu_item.click
This is supposed to flash and click the first menu and cause the submenu to drop. Then it should flash and click the submenu item. I get 3 results in 3 different browsers with this:
Firefox - 1st menu flashes and drops, submenu item flashes, but does not get clicked
Chrome - 1st menu flashes and drops, submenu item flashes and clicks OK - yay!
IE - 1st menu flashes and drops, then it goes away and the submenu item cannot be found with ElementNotVisibleError
Interesting to note for a different menu where the drop down text is different than the submenu text then Firefox and Chrome both work OK. IE still gives the ElementNotVisibleError.
How can I get this to work the same in all 3 browsers?
In some cases the display of menus does not require a click, and can be triggered by mousing over the menu. In that case it might work to try .hover instead of .click to get the menu to appear.
A problem with a lot of these custom controls is that they work differently on different browsers, which means your automation code MAY have to take that into account, this is the downside to custom controls like this and not using basic HTML elements

Categories

Resources