Trouble tapping on link in mobile view of site? - html

Just started working on mobile responsive design for a site I'm working on. During testing I noticed the main tabs that link to different views of the site, which can normally can be clicked with no problem on desktop, barely responds when tapped on a phone or in the browser developer tools that simulate a tap. If I click it repeatedly then it will eventually register, but it's not exactly user friendly.
You can see what I'm talking about if you go to www.runnercalculator.com and click between the two tabs on the normal desktop view and then inspect and tap it in mobile.
What is different between a tap and a click that I'm not accounting for here?
How can I make a view link work as a "one tap click" for mobile?

When making use of angular-touch.js(ngTouch module) you need to make sure that ng-click is placed properly in template.
<a href="#/pace" class="tabTabs ng-isolate-scope" info="paceCalc">
<li class="tabRowLi" ng-click="toggleSelect0()" ng-class="tabRowLi">
<span class="tabText ng-binding">Running Pace</span>
</li>
</a>
In your template, ng-click is placed inside a anchor tag. ngTouch module stops event propagation when you click on <a> which makes ng-click passive.
Avoid using ngTouch module unless you have plugins which has dependency over it or take extra care while creating templates with ng directives.

Related

How to make Nuxt.js site keyboard accessible (a11y) with tab?

I have made a static site with Nuxt.js and TailwindCSS, and I am currently trying to make it a11y friendly by including keyboard navigation with the tab key. I am finding this impossible however as focus seems to shift between the browser controls and the root-level document (Firefox shows dotted lines around the entire page) when using tab. I am not able to access any of the links/buttons even after manually messing around with the tab index attribute. I am wondering if this is something to do with framework/tools I am using it or if there's something I'm overlooking in my HTML templates that's affecting keyboard navigation.

Close will hide keyboard and not navigate back

I use MVVM Cross in my UWP app. I noticed that if I call Close(this) in my ViewModel and the keyboard is open it will just close the keyboard instead of navigate back. I have to click another time to actually do the navigation.
This behaviour reminds me of the back button of the phone, where first the keyboard is closed and then the navigation is made.
EDIT: this seems only to happen when it's a view who contains a user control. When all code is directly in the view it works without problem.
Is there a way to tell MVVM Cross to just do the navigation? Or do I first have to be sure that the KeyBoard is closed?

Bootstrap Modal only load div when clicked

Im using Bootstrap on a website where a page has a few modals.
Using Chrome Dev Tools i was testing the network usage and noticed that the images in the modal view are called/pre-loaded when the page loads - I guess that makes sense they are all in divs on a single page.
So my question is it possible to avoid that div from running only until the actual link to a particular modal is clicked?
Thanks.
Use $.get or $.load in the click event handler of the button to display the modal.
Note that the HTML data you load via this ajax technique must be in the right bootstrap modal template.
See this gist here

flyout should not hide when the user taps/clicks in metro app

In my metro style app (windows 8) I have created an page overlay and a flyout displaying an message. When the user clicks on the page the flyout message goes to hidden. But I want flyout to remain even when the user clicks on the overlay page. I am using HTML5 and WinJS.
Is there anyway I can achieve the above scenario using someother control or can I prevent the page to stop reacting to events when the user taps/clicks on the screen.
This is not really supported -- the Flyout itself doesn't have the concept of being persistent/sticky/modal. If you look at the code in base.js, you'll see that it doesn't expose any code to leverage the inbuilt sticky behavior that is used in the appbar (which is kinda of flyout, it turns out.
There are a couple things you can do:
Pass "_sticky: true" to the constructor of the flyout. e.g <div data-win-control="WinJS.UI.Flyout" data-win-options="{ _sticky: true}">
Attach a click handler to the top of the document, and if it's on the click eating div that the flyout creates, cancel the event
Create your own UI by simply adding a new div to the body, and absolute positioning it.

Need help with touch gestures on an html website

I am currently working on a web application. I have a menu bar that moves when someone clicks on arrow. With every click a new menu option is activated.
Now, I would like to give the user the option to slide over the menu bar/screen to navigate on a touch interface.
Any idea how I would do that ?
Thanks
Well I don't think you'll be able to do it using just HTML, but if you're comfortable with jQuery take a look at this:
http://plugins.jquery.com/project/swipe
This plugin enables you to bind events to gestures, but I believe it only works on iPhone and iPad.