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
Related
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.
I want to stop copying images from my website. Is there any solution?. I don't want to use watermark. I don't want to disable right click. Please...
This is my code.
<div style="width:148px;height:198px;border:0px solid red;background-image: url(<?php echo $MyPhoto[$NP];?>);background-size:100% 100%;background-repeat: no-repeat;"></div>
Once the user sees the image from your website, its already on his computer in the browser directory where it saves its resources.
The best solution is to use low resolution images or use watermarks since you can never stop image download process even if you disabled right click, dev tools can be used.
If it is on the Internet it can be copied. If you do not want your images copied then do not place them on the Internet.
I have used PanoJS to do this. It's a tool that take all tiles of your picture and use the viewer to "assamble" the picture using tiles.
The browser always receive all tiles, and if the final user want to reuse all the tiles it could, but it requires and extra effort to do that.
You need to make an extra process to your picture, but the provides many script (Perl and python to do this).
When you publish a picture via web, you always are serving the file and it could be copied.
Now this will not be able to completely prevent the copying of digital files, but may help in reducing the likeliness.
.unselectable {
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all */
-ms-user-select: none; /* IE 10+ */
user-select: none; /* Likely future */
}
The code above is the CSS addition which can prevent the selection of specific objects, and can reduce the right click save function.
Again this is not a complete prevention just a deterrent. I found this when I was learning HTML now if someone accesses the developer function they can still grab the images/content.
There may be more webkits that can fix your issue but it would take a bit more research.
The only known fixes that can be implemented are by these ways, for more details please write to me directly will tell you the code its no use giving it out in public if you want to have it safe and unbreakable.
Direct path - Create a PHP script to "hide" the direct path.
Drag and drop - Placing a 1x1 transparent GIF on top of the image.
Hotlinking - using .htaccess, to prevent hotlinking
Screenshot - not much you can do here. add a watermark to your image
: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 am building a web page that uses slidejs image slider to show a series of images.
When I run my page from firefox and safari the page looks the way it should. However, when I run the same code from within MSIE 9, it looks horrible. IE is putting borders around my slidejs images and buttons. I went through all my css and turned off every border I could find, but still MSIE makes it look terrible.
Page: http://107.22.173.10/print.html
user: test2
login: abc111
Any ideas why this is happening and how can I fix it?
Remove the border in CSS b/c IE typically adds borders to image href's... Something below should work:
a img {border: none; }
Most people use a reset stylesheet to correct issues like this and others before using their own css.
Add the css outline property if a img {border: none; } not works for you.
outline: none;
I would like to enhance a depth effect by hiding the mouse cursor as it passes over a div, is there a method that will work across all browsers?
Finding something that works across browsers is a pain.
The code below works on Chrome, IE, and Firefox.
IE likes .cur files, Chrome likes the embedded png, and some browsers actually respect the none :)
#div {
cursor: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjbQg61aAAAADUlEQVQYV2P4//8/IwAI/QL/+TZZdwAAAABJRU5ErkJggg=='),
url(images/blank.cur),
none !important;
}
Looks like:
/* css */
div {
cursor: url(url/to/transparent.gif), auto;
}
should do the trick or:
divEl.style.cursor = 'url(path/to/transparent.gif), auto'; // javascript
But hiding the cursor can annoy visitors immensly.
Addendum: In the examples I wrote .gif files, but you might actually need to convert to .cur or .ani files for better browser support.
Why don't you simply reduce the size of the cursor as it gets closer to the center of the deep field?
You can change the type of cursor you use (pointer, help, crosshair,...) but to hide it... Even if this would be possible in modern browers, older browsers won't support this. Also I can't imagine why you would hide the cursor.
EDIT: in firefox when adding cursor:none; to the body element it hides the cursor untill I go over a link, it's maybe a start.
Using a full transparent picture will not help. (It won't let you do that:()
You should use a 1x1 1% transparent image instead, plus cursor:none.