I am using the phonegap api, to create a native iPhone application. However when creating links between pages, if you hold down the links for a few seconds a popup comes up asking you if you wish to open or copy the links. I was wondering how I could disable these popups from coming up, to make the application run more smoothly etc?
I know this is almost a year ago, but I thought I could share some thought.
the suggestion is a good one, but it doesn't quite work for me working with Cordova 2.2 and JQM 1.2. Tapping and holding on a button or a tab (actually a link, A element), the actionsheet still pops up from the bottom of the screen (of an iphone, let's say).
This is what that does it for me:
.yourclassname {
-webkit-touch-callout: none;
}
You can disable it entirely, or only for links.
Set it in the CSS for links:
.class_name {
-webkit-user-select: text;
}
Or for everything:
.class_name {
-webkit-user-select: none;
}
Related
I'm using Boostrap 4 to build a Web. A simple code such as below:
<div class="col-12 p-2" id="Maincourse">
<h1 class="m-0">Main course</h1>
</div>
I use my Android Chrome Browser(version 80.0.3987.149) click on the text, it will highlighted the text and popup google search.
How can i disable it? I Don't want to set user-select: none because I need to let the user highlight the text when long press.
.disable-select {
user-select: none; /* standard */
-moz-user-select: none; /* firefox specific */
-webkit-user-select: none; /* Chrome, Opera and Safari*/
-ms-user-select: none; /* IE, ms-edge */
}
Source1: https://www.w3schools.com/cssref/css3_pr_user-select.asp
Source2: https://developer.mozilla.org/en-US/docs/Web/CSS/user-select
version compatibility
desktop:
Chrome: 54+
Firefox: 69+
Opera: 41+ (15+ with vendor prefix)
Safari: 3+
MS Edge: 12+
IE: 10+
mobile
Chrome for Android: 54+
Android web-view: 54+
Firefox for Android: 4+
Opera for Android: 14+
Safari on IOS: 3+
refer to the sources for more info and version compatibility.
try this:
-webkit-tap-highlight-color: transparent;
I've been doing the user-select: none fix for this for awhile and found it unsatisfactory, so I started searching around for a proper name for the feature in order to see if there was better fix/write-up for it and I came across this Google Developers post from Paul Kinlan (apparently the feature is called "Touch to Search"):
https://developers.google.com/web/updates/2015/10/tap-to-search
which describes the behavior in detail and the various ways in which you can disable or enable the behavior.
Relevant excerpts pertaining to your question:
Tap triggering is enabled for any plain text that is selectable and non interactive or not focusable. When the page has a click handler that responds to a tap on text, Touch to Search automatically detects the response and ignores it since we know the developer intended to handle the event. Using a touch-and-hold gesture to manually select text also triggers the Touch to Search bar. Users can enable or disable the feature using a preference under Chrome's Privacy settings.
As the author of a site there are often times when you don't want a tap gesture on certain element to trigger a search. To ensure that Chrome does what you intend, make those elements:
Focusable: add a tabindex=-1 property on the element.
Interactive: Use any of several standard ways to indicate that an element is interactive:
Use accessibility markup to indicate the element has a widget role, or widget attributes. For example, any element with role=button won't trigger. Adding accessibility markup has the added benefit that your page will be more readable by visually impaired users.
Any JavaScript click handler that calls preventDefault(), or manipulates the DOM or CSS will not trigger Touch-to-Search.
Non-selectable: using -webkit-user-select: none; Non-selectable text will not trigger Touch-to-Search even when using the touch-and-hold gesture.
By adding role="dialog" into the wrapper solved my problem.
But I have no idea why, anyone can explain?
This is a two part question. I have a website where there is a simple link with information for a user to view and at the moment I only have an iOS app version of my product. What I would like to do is if the user were to view the link on an iOS device I would like to restrict some of the information visible to the user, encouraging them to download the iOS app to see the info but if they are on an android device I would like to display all necessary content to the user since we do not yet have an Android app available. My two questions are:
1) Is it possible to detect if a user is on an iOS device to limit how much they can view on the web page?
2) Is it bad practice to show different content to users based on their device?
By the way, security is not an issue here. To be more specific I have an events app and I want to hide the address field on the web page for iOS devices so they will more likely download the app to view it but I do not want to completely exclude Android users. Is this even worth my time? Should I just forget about Android users all together for now?
It's not bad practice, everyone is displaying different content since you can't fit everything on phone devices. For example large tables.
You don't need javascript for this, you can do this with css only. Take a look at this example and try to implement it to your code.
HTML:
Link
Link
CSS
.desktop {
display: block;
}
.phone {
display: none;
}
#media screen and (max-width: 768px) {
.desktop {
display: none;
}
.phone {
display: block;
}
}
I'm using the so called media-queries which you can find more information about here
What this does is that the browser, both on initial render, resize, and rotate will display the rules within the media queries when the device windows width <= 768px. Those rules will override the previous.
I'm making a website where the user sees a text when hovering over an image. Problem is, it doesn't work on mobile devices(touchscreen etc). So I have been coding a script which will detect wether the client is desktop or mobile, if it's mobile, it will show the text over the image instantly.
But it's not really working. Can someone find my mistake?
Here's the link to the test webpage: Link.
Code can be found in the head. (sorry i dont know how to paste it in)
Thanks!
something like bootstrap would automatically turn your hover events into click events on mobile
Another option would be to use #media queries to make them visible on mobile
use #media(min-width:768px){
.textOnHover{
visibility:visible;
}
}
Rather than browser detection you should be using feature detection for this kind of task. Take a look at Modernizr for detecting touch functionality on the client's browser. You can then use their JavaScript API to solve your problem.
If you opt for CSS class names in your Moderniser build, it will add helper classes to your <html> element so you'll be able to use an entirely CSS solution, like so:
.touch .text {
visibility:visible;
}
I am using:
$(".first-image-gallery").first().trigger('click');
To create the action of clicking on a gallery of images.
The reason for this is I am using a 'Start Gallery' button elsewhere on the page and want this button to open up the first image of the gallery and then the user can move forward and back as they please.
I am using iLightBox for the gallery and can't find anything that it has build in to open up the gallery from another button or action via jQuery.
The current code I am using works fine elsewhere on desktop, but mobile iPad it wont work.
This is Mobile Safari oddity. Click events don't work properly on any elements without cursor: pointer; CSS property set on them.
Read more: http://www.shdon.com/blog/2013/06/07/why-your-click-events-don-t-work-on-mobile-safari
This works on every standards-compliant browser. Mobile Safari chooses to differ, however. It does not generate click events for elements that do not have either or both of:
-Directly bound onclick handler.
-The cursor property set to pointer in CSS.
Therefore, your solution seems to be:
.first-image-gallery {
cursor: pointer;
}
I (almost) always resort to including cssua javascript library and including this bit of css, which solves this problem globally (page-wide), applying cursor: pointer; on whole page in Mobile Safari (but not in other browsers):
html.ua-safari.ua-ios {
cursor: pointer;
}
Try touchstart instead:
$(".first-image-gallery").first().trigger('touchstart');
And use this in click function too like .on('click touchstart',callback);
I have the same issue and I have tried set cursor:pointer to the element, it doesn't work.
It is pretty obvious that trigger 'touchstart' works pretty well with jQuery, but the problem is that I need to 'click' an existing element (button) programmatically, so I need to trigger 'click'.
In the end I found that using native javascript code works perfectly, so you can try:
document.querySelectorAll('.first-image-gallery')[0].click();
At least it works immediately for my case.
im trying to open a popup with nothing but the content using javascript in html.
no status bar, no toolbar, no scrollbars, ..., and NO TITLE BAR.
The code must work with Internet Explorer, but the more the better in this case...
i know there are some properties sushi as toolbar=no status=no.. but what about title=no?
It isn't really necessary to use window.open, but i must work with javascript.
Thanks in advance!
Why would you want a popup without any way for the user to control that popup (moving the window, minimizing, closing, etc)? This goes against all usability guidelines on the web.
If you still want to do something like this, I would recommend an inline lightbox. This would allow you to control the styling of the popup, however it wouldn't ever leave your site's main window.
A popular solution for this that has a lot of work already completed would be colorbox.
If you don't need all of the power or functionality of colorbox, it would be pretty easy to roll your own since you have no desire to show any controls.
$("a").click(function() {
$(document).append('<iframe id="chromelessPopup" src="popup_src.html"></iframe>');
}
And then some CSS to style your popup:
#chromelessPopup {
height: 400px;
width: 340px;
border: 2px solid #000;
position: absolute;
top: 10%;
left: 35%
}
IE has Kiosk Mode (F11 or -k on the command line) but this mode cannot be invoked by webpages for obvious security reasons. Hiding everything (taskbar, etc) from the user's view by a website is clearly not desirable. All popups opened by webpages have a title bar.
I've got some documentation that says there is a titlebar=no option to window.open() and that IE also supports fullscreen=yes.
Note that I haven't tried these.