I am working on font adjustment bar (which contains buttons that increase/decrease font size). It works and all but it has one issue on cell phones. If the user spam taps those buttons on the browser the browser highlights the buttons and then the user can no longer use the buttons until he removes the highlighting (tapping away). This is an issue because many users do not know this and would think the bar does not work. I want to make my buttons not highlightable to allow for spamming. How do I do this? Note that I am not concerned with the highlighting color itself which I know can be hidden. I do not mind any solution let it be CSS or Javascript.
Thanks.
Just use the css user-select: none; on your elements.
Of course, since browsers don't like complete standardization of CSS, you need to add some extra rules to get all the different browsers.
a {
-webkit-user-select: none;
user-select: none;
}
<a>i'm an anchor</a>
First thing to try,
pointer-events:none
that might make the button unclickable though
the next thing to try is browser dependent
.button-link {
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}
found it on a youtube video last week so let me know.
Related
I'm planning to use this to achieve that
-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
-webkit-tap-highlight-color:rgba(0,0,0,0);
Just wondering, is there a better, or more neat way to achieve that? I only want to disable text selection (copy paste) and image download on mobile. I know user can still do that with otherways and it's not very user friendly. I'm already aware of the negatives assosciated with it.
Thanks!
A media query with the following would prevent the user selecting any of the text. Touch callouts are just the blue highlight.
body, html {
user-select: none;
}
I have a drop down element which works great on desktop.
http://www.c-testing.nl/werkenbijvanaarsen/growing-together/
But on mobile devices, the drop down won't collapse back when tapping again.
I read some answers on this forum, but it doesn't seem to work in this case.
I'm trying to achieve this only with css, but the more I read about this, it seems that online javascript can achieve it.
Does anybody know how I can set something like an un-hover on this element?
.pl-drop_down:hover ul {
opacity: 1;
visibility: visible;
}
Best regards, Mark
It’s unlikely you’ll get what you want using just CSS :hover, as this wasn’t designed for touch screens.
To get it to collapse back on mobile, you could add the javascript:
$('[selector that you want to tap]').click(function() {
$('.pl-drop_down').css({'pointer-events': 'none'});
});
This will remove the hover state on mobile and should make it collapse back, you’ll need jQuery for this solution to work though.
:hovering on a touch screen can be an accessibility problem (dropdowns) or just muck up design elements (changing colour on a button press and not reverting due to the virtual hover).
So I've resolved to having different behaviour when an element is touched and when it is hovered with the mouse. This is easy enough to implement with Javascript and leveraging mousein and mouseout events, and adding a hover class where appropriate. There are two main problems with this:
It's Javascript based which has a number of implications. I wouldn't call not having hover functionality an accessibility issue, as there is a pointer cursor, though.
My main problem is that I will have to manually indicate which elements need the classes added outside of my CSS styling. This is extra work, adds an extra area to make mistakes and isn't semantically nice.
So my question is: is there any pure CSS way to detect if and only if the mouse has hovered over an element? One that doesn't respond to touches.
It is not sufficient to detect if a device is touch capable and remove hover functionality from them. Now that many devices have both mouse and touch, this will hinder a perfectly good mouse-enabled experience.
Method 1: Javascript
Why not start with the body having a .no-touch class on it, and then, using JS, detect the device, and remove the class if the device is mobile.
if(//Code to detect mobile)
$("body").removeClass("no-touch");
Then, in your CSS, code all :hover to be dependent on that parent class.
.no-touch a:hover
{
text-decoration: underline;
}
This will ensure that the hover styles are enabled by default if JS fails, as well as preventing the otherwise long process of delegating each and every element that you want to disable hover for.
The converse of this would be to add a class if the device is mobile, and then code the CSS to exclude the body that has that class:
body:not(.touch) a:hover
{
text-decoration: underline;
}
It's not perfect, as it still requires JS, but there is currently not a known purely-css way to detect touch events as opposed to mouse events, at least as I've been able to find through a somewhat extensive Google search.
Method 2: CSS Media Queries
The other option would be to use media queries, but this still leaves a lot to be desired, as devices continue to get better resolution; some tablets can have screen widths equivalent to some old monitors, and unfortunately, old technology dies very slowly.
This has the advantage of being purely CSS, but has its own pitfalls all the same.
You may have someone using an iPad in landscape # 1024x768 that would be considered a touch device, while an older gentleman is using a desktop on an old 3x2 lcd monitor that has the same resolution: 1024x768
Here's the code though, if you want it:
#media all and (min-width: 1024px)
{
a:hover
{
text-decoration: underline;
}
}
Solution with CSS only, without Javascript
Use media hover with media pointer will help you resolve this issue:
#media (hover: hover) and (pointer: fine) {
a:hover { color: red; }
}
I'm building a web app, but after a click on a button, or at least a clickable object, it gets a blue overlay, like a text selection, but on the object. This only happens on touch devices, not on my desktop machine.
It's built with HTML and CSS, so I hope someone knows an appropriate solution for this.
It took me about 20 screenshots, since this overlay is only visible for less than half a second. For those wondering what I actually mean; check this pic. I've tested this on an iPhone (5) and an Android (Nexus 5) and both (although colors differ) appear to have this visual effect. It's either a HTML thing or device-native thing. One thing for sure: It can be set off, since I've never seen this in a regular app. Note: This happens with any clickable item, not just text links.
Thanks!
Try it...
Working http://jsfiddle.net/XbVUR/
a{
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select:none;
user-select:none;
}
<a href="#" onClick="alert(0)" unselectable='on' onselectstart='return false;' onmousedown='return false;'>lorem ipsum</a>
I've gladly found the correct way to adjust this stupid habit of touch devices. It's extremely easy.
You can either turn this off in general (like the code below) or add your own classes/ID's to the selector.
a {
...
-webkit-tap-highlight-color: rgba(0,0,0,0)
}
Just like that!
Tested on both a few Android and iOS devices, including iPhone 5 & Nexus 5
I have a problem with a navigation menu for which I have applied pie.js (library that allows you to have css3 on ie6-8 browsers). Works well at first sight but if we will play a little bit with the menu, wrong behavior will raise:(. To receive that strange behavior you must move cursor a little faster left and right over the drop-down menu on IE8. This is a function through I call js library.
$(document).ready(function(){
if (window.PIE) {
$('.aahov,ul#menu,ul#menu li ul').each(function(){
PIE.attach(this);
});
}
});
Check this example: http://mainpage.ueuo.com
...and don't forget, only on IE8 browsers ...
Thank's.
It might just be IE8 adding some extra padding.
I noticed from your css that you aren't using a css reset which may help to eliminate browser based differences.
You could have a look at http://meyerweb.com/eric/tools/css/reset/ or something similar.
Also IE8 doesn't support last-child
ul#menu li ul li:last-child{ border-bottom:none; }
So this will also affect the look of your menu items.
Also as a side note from a usability point of view it would be good practice to let the user know that the menu link is a drop down. Possibly add a down arrow to the right of the link.
Your scripting looks good to me, it looks like it's something in your styling. Not really sure what you have there, but you might be able to work it around to use overflow:hidden, or at least that might be a place to start.