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}
Related
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.
My button changes its color on :hover, see:
button {
background-color: orange;
}
button:hover {
background-color: darkorange;
}
Example: https://jsfiddle.net/oepb5ks4/
Works great on desktop, but on mobile - where :hover should not exist – the browser* still changes the color, but after touching the button.
Why is that behavior? Am I missing something? What makes somebody think that implementing (parts of) :hover on mobile browsers makes any sense?
Is there a nice and clean solution for this (preferably without Media Queries or JavaScript)?
*Tested in Chrome (in "Device Mode") as well as in iOS Safari.
In you CSS you could filter for mobile devices with the #media rules and filters (documentation at w3). You could state "if the media has the hover functionality then the hover color should be orange":
#media not all and (hover: none) {
a:hover{
color: orange
}
}
You also could try to detect it with JS and manually adjust the color to always be orange when on mobile.
I believe that your problem occurs because in order to click on a button on PC you must have hovered over it before, so the color changes on mobile after you clicked it.
Update I just read the comment under the question by Temani Afif: apparently :hovers are "converted" to something like :onclick on mobile because of the lack of the hover feature on phones. As many websites have on hover menus mobile users couldn't access those if they wouldn't translate it.
Another thing you could try is to force the color of the visited links with this:
a:visited {
color: orange!important;
}
Update 2 Included the new media tag and took advice from this answer on a different question and it's comment on how to use not and the #media rules.
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 would like to resolve, in some elegant way, a design problem which only happens in Chrome.
When I wrap “input” type checkbox with div which has bootstrap class col-…. This div div is filled by checkbox, but in Chrome the checkbox also changes size (gets bigger)
I found a solution, which basically resolves problem, but is not ideal.
#media (-webkit-min-device-pixel-ratio: 0) {
[class*="col-"] input[type=checkbox] {
-webkit-transform: scale(0.5) !important;
}
}
JSFiddle example
Firstly, I need to make this rule for Chrome only, because according to MDN this not best practice.
Secondly, the change of scale not only affects the size of the check box, but also everything within the div. Due to that, I lose the feature, that customer must not click exactly into the check-box to get it checked.
Is there any better solution?
Well your problem is that in your code presented in the JSFiddle, you are using form-control class which has fixed height. Regarding FF and Chrome behaviour, it seems that only Chrome actually lets you to set the dimensions of checkbox using CSS...
I recommend you to check the Bootstrap docs and see how the checkbox is implemented in Bootstrap.
I have html content which a native application built with PhoneGap.
This application has 2 fields, one of text and a texarea.
When I write in each activates the blue background, and I can see thoroughly.
How I can disable that blue?
If it's using CSS then the code activating the blue background will probably look something like this:
textfield:focus, textarea:focus {
background-color:blue;
}
If that is the case then you can simply remove that CSS rule and it should solve your problem.
Alternatively, the background colour may be being added through javascript in which case you'd have to check your javascript files to see where it is happening and remove it from there.