Develop Reference

Make anchor elements not highlightable

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.

Automatic Tooltip on Mobile

I would just like to be pointed in the right direction for the quickest way to make an automatic tool tip appear over the > arrow to notify users to continue updating their profiles. This should be on the mobile site only. Are there any libraries that would help me accomplish this?
Screen Shot

// FOR ODD REASON I CAN'T FORMAT THE CODE IF I PUT IT BELOW
// Hide it by default
[role="tooltip"].tooltip {
display: none;
}
// show it on mobile
#media screen and (max-width: 480px) {
[role="tooltip"].tooltip {
display: block;
}
}
You can use EnquireJS, basically this is just a media query in JavaScript which you can use to dynamically append a tooltip you wanted if that tooltip is created using Javascript
Bootstrap Tooltip you can anchor this tooltip to an element of your choice or just any tooltip library you want and basically use CSS Media Queries to hide the tooltips presence if not mobile and show it on mobile. refer to the example above
hope that helps

You can take a look at balloon css, it's quite versatile and it achieves everything with just css, so it's fast and small:
https://kazzkiq.github.io/balloon.css/
You can choose the position for your tooltip to appear on and the size of the box for it to be in. You can modify the colours etc so follow your own style guide.

Pure css for :hover only with mouse

: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; }
}

Magnifier coming in Nexus on touch input

I am working on a asset which used html,css and javascript. when i run it on nexus then a magnifier coming which is actually magnifying the touched area for user input. Is there any way to disable it using js,jquery.

use this in your css
-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);

Turn off overlay selection on onClick elements on a Touch device

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