I have added jQuery mobile on my site to add swipes, to make my site more mobile friendly. link: my site
When you click anywhere on my page, a blue border in chrome(pc) will appear around the page, on my android mobile chrome the border is in yellow. I just want to get rid of it because it makes page ugly.
A quick fix is to remove this outline through css
.ui-page-active { outline: none; }
Done!
In my phonegap application I have a page that contains form elements. The problem is that when I navigate from home page to this page (form page) a white screen appears and then the form page appears. This screen occurs only once, when I open the form page after launching the app. This problem happens only for the form page, since the other pages in the application are showed directly.
I have set all transitions to none in my app, and tried to use fastclick, but nothing worked for me! How can I solve this problem?
Any help would be greatly appreciated.
Home page .js
document.addEventListener('deviceready', onDeviceReady, false);
function onDeviceReady ()
{
setTimeout(function(){ navigator.splashscreen.hide();} ,3000);
$('#GoToForm_BTN').on('click', function(){
$(this).attr('href','formPage.html');
} );
I have used this code in my css file but the problem remains
.ui-page {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
overflow: hidden;
}
a, input, button {
-ms-touch-action: none !important;
}
*{
-webkit-transform: translateZ(0);
-webkit-transform:translate3d(0,0,0);
}
Without seeing any code it is difficult to locate the exact problem, if indeed there is a one. I believe that the problem can be located at the loading time of your application. If it is a multipage application (one html file), and depending on the size of the DOM tree created, it is natural that you are seeing this white screen. The DOM hasn't been fully loaded so you see a blank screen. The best thing you can do is to show a loading image when your application launches, and remove it when the page is ready.
Ok I feel like I'm crazy...
I'm looking at Mobile Safari on iOs 6.0. I can't seem to establish any rhyme or reason as to when tapping on an element will trigger click. In many cases, it seems I need to tap once to trigger a hover and then again to trigger a click.
The Mobile Safari spec says : "... The flow of events generated by one-finger and two-finger gestures are conditional depending on whether or not the selected element is clickable or scrollable... A clickable element is a link, form element, image map area, or any other element with mousemove, mousedown, mouseup, or onclick handlers... Because of these differences, you might need to change some of your elements to clickable elements..."
It goes on to suggest that the developer "...Add a dummy onclick handler, onclick = "void(0)", so that Safari on iOS recognizes the span element as a clickable element."
However, my testing has shown these statements to be false.
JsFiddle : http://jsfiddle.net/6Ymcy/1/
html
<div id="plain-div" onclick="void(0)">Plain Div</div>
js
document.getElementById('plain-div').addEventListener('click', function() {
alert('click');
});
Try tapping the element on an iPad. Nothing Happens
But I digress. What is important to me is to find out the following question:
Exactly what are the criteria that determine when clicking on an element will fire a 'click' event on the first tap? As opposed to firing a 'hover' event on the first tap and a 'click' event on the second tap.
In my testing, anchor elements are the only elements that I can get to fire a click on the first tap, and then, only occasionally and inconsistently.
Here's where I start to feel crazy. I searched the internet far and wide and found next to nothing about this issue. Is it just me?! Does anybody know where there's been any discussion about the criteria for two-taps and or an approach to dealing with these limitations?
I'm happy to respond to questions/requests.
Thanks!
I had this same issue. The simplest solution is not to bind the mouseenter event on iOS (or any touch enabled target platform). If that is not bound the hover event won't get triggered and click is triggered on the first tap.
iOS will trigger the hover event if an element is "display: none;" in the normal state and "display: block;" or inline-block on :hover.
It is also worthwhile to mention that ':hover' pseudo-class may prevent 'click' event from firing.
As in mobile browsers click is sometimes used to replace hovering action (e.g. to show dropdown menu), they may trigger artificial 'hover' state on first click and then handle click on the second one.
See https://css-tricks.com/annoying-mobile-double-tap-link-issue/ for detailed explanation and examples of that.
I solved this issue by first detecting if it was an iphone, then binding the mouseup event to the function I was trying to call.
if ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))){
$('foo').on('mouseup', function(){
...
}
}
I tried other events but mouseup seemed to work best. Other events like touchend were firing even if the user was trying to scroll. Mouseup doesn't seem to get fired if you drag your finger after touching.
Credit David Walsh (and ESPN) for the iPhone detection.
http://davidwalsh.name/detect-iphone
I was having this issue using Bootstrap, and I found out that the culprit was the tooltip. Remove the tooltip from the button and you don't need to tap it twice anymore.
my solution was to remove the :hover state from the css, and when you think about it, mobile browsers should not have :hover state, since there is no hover..
if you want to keep the hover state on desktop, you can use media query, like so:
.button {
background: '#000'
}
#media (min-width: 992px) {
.button:hover {
background: '#fff'
}
}
You need #media (hover) { /* Your styles */ }
As far as I can tell, this problem in various forms is still present.
In 2019, most, if not all of the above cases can be now ameliorated using a CSS only solution... it will however, require some stylesheet refactoring.
label {
opacity:0.6
}
label input[type=radio]:checked+span {
opacity:1
}
.myClass::before { } /* Leave me empty to catch all browsers */
a:link { color: blue }
a:visited { color: purple }
a:hover { } /* Leave me empty to catch all browsers */
a:active { font-weight: bold }
/* Your styles */
#media (hover) {
a:hover { color: red }
.myClass::before { background: black }
label:hover {
opacity:0.8
}
}
You can read in more detail here why Fastclick, :pseudo, <span>, just targeting "desktop" resolutions and first tap is hover and second tap is click are all fixed using #media (hover): https://css-tricks.com/annoying-mobile-double-tap-link-issue/
:hover doesn't offer the clarity it once did as stylus input, touch desktops and mobile have a disparate interpretation of the notion.
The display:none; solution mentioned above works on iOS (not tested on later than 9.3.5), but not on Android.
A hacky css-only solution is to hide the link below the element using a minus z-index and to bring the link up to a positive z-index on :hover or first-touch (with a small transition delay). I guess one could achieve the same result with css translate instead of z-index. Works on iOS and Android.
In this way you can display a hover effect on a link on a touch-screen device with the first tap without activating the url until a second tap.
you can use ontouchstart instead of onclick event on element and call the function focus() on this element if it is input :
document.getElementById('plain-div').addEventListener('touchstart', function() {
//write body of your function here
alert(“hi”);
// if input needs double tap
this.focus();
});
I was googling around to see if i could help you out some and found this piece of code. Try modifying it to your likings and see if you can do what your trying. If you have troubles understanding it let me know and i'll elaborate more. Theres also more to it here where i found it
Jquery hover function and click through on tablet
$('clickable_element').live("touchstart",function(e){
if ($(this).data('clicked_once')) {
// element has been tapped (hovered), reset 'clicked_once' data flag and return true
$(this).data('clicked_once', false);
return true;
} else {
// element has not been tapped (hovered) yet, set 'clicked_once' data flag to true
e.preventDefault();
$(this).trigger("mouseenter"); //optional: trigger the hover state, as preventDefault(); breaks this.
$(this).data('clicked_once', true);
}
});
Never figured out the criteria, but this solved my problem by instantly triggering a click as soon as an element is tapped:
https://developers.google.com/mobile/articles/fast_buttons
I had to make a number of additions/modifications to their code to get it working correctly, let me know if you're interested in my method and I will try to post an explanation.
Cheers :)
I am working with a grails app, and would like to use a modal grails UI dialog box to hold my loading image. I would then control the closing of the box from JavaScript when my event returns (or a timeout happens). I am already using Grails UI dialog box on the page, so I thought I would do this with another dialog box that holds the loading image. Is it possible to have a Grails UI dialog box without buttons at the bottom?
I went the route of using CSS to hide the close container and footer dialog. Given that my dialog had an id of loading; adding the following CSS keeps the user from having a way to close the dialog:
#loading.yui-panel .container-close {
background-image: none;
visibility: hidden;
}
#loading div.ft {
display: none;
}
I'm trying to use jquery ui dialog and google maps... so when an user clicks a link, the dialog opens showing the map.
I've tried in many ways... it works on FF and Chrome but on IE8 the map is gray.
In one of the changes in script reference order in html head, makes the map loads just a part of it in IE8... tried to load google maps before and after dialog, but nothing changed
It's very confusing... Has anyone gone through this issue??
Thanks!
The jQuery UI documentation for tabs says this, and I think it applies to dialogs as well (you'll need to adjust the code for dialogs).
Any component that requires some
dimensional computation for its
initialization won't work in a hidden
tab, because the tab panel itself is
hidden via display: none so that any
elements inside won't report their
actual width and height (0 in most
browsers).
There's an easy workaround. Use the
off-left technique for hiding inactive
tab panels. E.g. in your style sheet
replace the rule for the class
selector ".ui-tabs .ui-tabs-hide" with
.ui-tabs .ui-tabs-hide {
position: absolute;
left: -10000px;
}
For Google maps you can also resize
the map once the tab is displayed like
this:
$('#example').bind('tabsshow',
function(event, ui) {
if (ui.panel.id == "map-tab") {
resizeMap();
}
});
resizeMap() will call Google Maps'
checkResize() on the particular map.