I'm using hover (css) in an image with a link to show a text. It works perfectly in desktop and in android devices (if you click for a second in the image then you hover in mobile).
The problem is that I realized in iOs devices, when you hold the click for a second in a link, it opens a window with a few options:
Open in a new tab, download link file, copy, share...
Is there any way to get the hover in mobile with iOs?
.links-home a:hover p,
.links-home:hover .not-exhibited {
transition: opacity 0.5s;
opacity: 1;
text-align: center;
}
with a #media-Query try to replace the :hover with :focus.
I can't test this because i dont have an iOS device, but according to this post the item stays focused until another item is clicked and therefore a short tap is enough to show the extra text.
Maybe you have to put the images into an anchor (<a>) to get focus work properly.
I am working on a form for a company that still uses tables and they want me to add CSS to their template without changing any HTML/JS. There is a nested input(CheckBox) that should be selected when a user clicks the image. This is working fine in Chrome, Firefox, and Edge but in IE when the image is clicked it will not check the box. Below is a screen cap of the DOM and an actual choice in the browser.
I changed the background color of the font tag to distinguish it from the image and added a border around the td. I noticed 2 strange things.
When the font tag is clicked it will check the box.
When the box is checked, I am able to click the image and have the checkbox
de-selected. Once it is, I can not re-select it by clicking the image.
Any idea of what is causing this and what can be done? I am using IE 11.
It appears that IE has a bug which causes this problem. I found some helpful information from this site:
https://snook.ca/archives/javascript/using_images_as
The CSS fix was:
label img{
pointer-events: none;
}
label{
display: inline-block;
}
I have a dashboard-like layout with fields (symbaloo.com for example). The user can fill these fields with applications like facebook etc. When a field is clicked, the following pop up comes.
All of these fields have a hover effect for desktop users. When I click the X button on my tablet, the popup will dissapear as expected, but then the field below the X button will have a hover effect. This is not desired. I only want it to hover when a user has a mouse hovering over the field.
It's useful to note that this only happens in the browser Android 4.
What are my options?
As this is just happening on Android, I would suggest that you add some sort of validation checking if the UserAgent is from Android (from what I've read, a simple regex like so: /android/i works), if so, add a class/data-attribute to the body/html, and from there apply a selector.
Code example would be this:
if(/android/i.test(navigator.userAgent)) {
$('html').attr('data-android-device', '');
}
Then on the CSS:
[data-android-device] .mybutton:hover {
/* Reset properties */
}
You can always use Modernizr for this cases. DEtect Touch support, then use your CSS accordingly. Example:
.no-touch .button:hover{//do something if no touch is detected}
The goal is to have the cursor change, if the left mouse button is held down over an element, in this example a button (same behavior was observed for a canvas element as well).
Strangely, in Chrome 32.0.1700.76 the cursor does not change as expected, if the mouse button is held down in the upper area of the button, up to about 60 pixels from the top.
Note that the problem only occurs, if the button is located at the very top of the webpage.
That's why i can't show the effect on JSFiddle.
This code sample can be used to reproduce the supposed bug:
<html>
<head>
<style type="text/css">
#testButton {
cursor: pointer;
}
#testButton:active {
cursor: move;
}
</style>
</head>
<body>
<button id="testButton" style="width:200px;height:200px">click</button>
</body>
</html>
Firefox and IE switch the cursor as expected on holding the left mouse.
Can anyone confirm this misbehavior or propose a way to fix it for Chrome?
Are you emulating touch events in Chrome?
Open the settings for the inspector and in the "Overrides" section turn off "Emulate touch events".
I want to disable Pinch and Zoom on Mobile devices.
What configuration should I add to the viewport ?
Link : http://play.mink7.com/n/dawn/
EDIT: Because this keeps getting commented on, we all know that we shouldn't do this. The question was how do I do it, not should I do it.
Add this into your for mobile devices. Then do your widths in percentages and you'll be fine:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
Add this in for devices that can't use viewport too:
<meta name="HandheldFriendly" content="true" />
this will prevent any zoom action by the user in ios safari and also prevent the "zoom to tabs" feature:
document.addEventListener('gesturestart', function(e) {
e.preventDefault();
// special hack to prevent zoom-to-tabs gesture in safari
document.body.style.zoom = 0.99;
});
document.addEventListener('gesturechange', function(e) {
e.preventDefault();
// special hack to prevent zoom-to-tabs gesture in safari
document.body.style.zoom = 0.99;
});
document.addEventListener('gestureend', function(e) {
e.preventDefault();
// special hack to prevent zoom-to-tabs gesture in safari
document.body.style.zoom = 0.99;
});
jsfiddle: https://jsfiddle.net/vo0aqj4y/11/
This is all I needed:
<meta name="viewport" content="user-scalable=no"/>
To everyone who said that this is a bad idea I want to say it is not always a bad one. Sometimes it is very boring to have to zoom out to see all the content. For example when you type on an input on iOS it zooms to get it in the center of the screen. You have to zoom out after that cause closing the keyboard does not do the work. Also I agree that when you put many I hours in making a great layout and user experience you don't want it to be messed up by a zoom.
But the other argument is valuable as well for people with vision issues. However In my opinion if you have issues with your eyes you are already using the zooming features of the system so there is no need to disturb the content.
I think what you may be after is the CSS property touch-action. You just need a CSS rule like this:
html, body {touch-action: none;}
You will see it has pretty good support (https://caniuse.com/#feat=mdn-css_properties_touch-action_none), including Safari, as well as back to IE10.
Unfortunately, the offered solution doesn't work in Safari 10+, since Apple has decided to ignore user-scalable=no. This thread has more details and some JS hacks: disable viewport zooming iOS 10+ safari?
Found here you can use user-scalable=no:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
IE has its own way: A css property, -ms-content-zooming. Setting it to none on the body or something should disable it.
Disable pinch to zoom in IE10
http://msdn.microsoft.com/en-us/library/ie/hh771891(v=vs.85).aspx
Disables iOS pinch-zoom
window.addEventListener(
"touchmove",
function (event) {
if (event.scale !== 1) {
event.preventDefault();
event.stopImmediatePropagation();
}
},
{ passive: false }
);
Tested on iOS 15.3 in Safari and Brave.
Try with min-width property. Let me explain you. Assume a device with screen width of 400px (for an instance). When you zoom in, the fonts gets larger and larger. But boxes and divs remains with same width. If you use min-width, you can avoid decreasing your div and box.
Not sure is this could help, but I solved the pinch / zoom problem (I wanted to avoid users to do zooming on my webapp) using angular hammer module:
In my app.component.html I added:
<div id="app" (pinchin)="pinchin();">
and in my app.component.ts:
pinchin() {
//console.log('pinch in');
}