I am making a jquery shooting/aim game and I'm not entirely sure how to make the focus of the mouse shift to the center (i.e. the crosshair property), like so (the bottom line):
#num {
position: relative;
height: 20px;
left: 45%;
top: -40px;
text-align: center;
width: 10%;
background: gray;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: url(c_hair.png), crosshair; /* HERE IS THE PROBLEM */
}
THANKS!!!
UPDATE
I am trying to make the focal point of the cursor image in the center (with the crosshair or 'precision' cursor, for example), not the default top-left (with the pointer, for example).
A friend told me that this is a solution, and it works
cursor: url(c_hair.png), auto x y
...would offset the cursor first by x pixels then by y pixels.
Since you have image why do you need crosshair?
cant you use this
cursor: url(c_hair.png), auto;
Related
So first of all, thank you for reading and helping me out.
I've spent the last 4 hours on the web searching for a solution for my strange problem.
Problem
I create a <div> with (click) action. Style it with CSS classes, :hover, :active and :focus. When I click it with mouse, everything is good. But when I touch it with a touchscreen, a oddly gray overlay appears (see the linked GIFs)!!
Behaviour when mouse-clicked
Behaviour when touched
Here is a snippet like my code:
#btn-container {
margin: 5px;
text-decoration: none;
cursor: pointer;
float: left;
border-radius: 25px;
border: none;
transition: 0.3s;
background-color: rgb(230,230,230);
color: black;
}
#btn-container:hover {
background-color: rgb( 200,200,200 );
}
#btn-container:active {
background-color: rgb( 150,150,150 );
transition: 0s;
}
#btn-container:focus {
outline: 0;
}
.standard-btn {
padding: 12px 20px;
display: inline-block;
}
html {
/* Prevent user to select text */
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer, Edge */
user-select: none; /* Non prefixed version: Chrome, Opera */
}
<div id="btn-container" class="standard-btn">Touch me</div>
PS: I'm developing in Angular. I've tested this strange behaviour on Chrome for Android, Safari on iOS, Chrome, Edge, IE on Windows.
The oddity is that, for example, on JSFiddle (here) or here on StackOverflow this doesn't happen. And it doesn't happen also on another Angular app of mine.... and I wasn't able to find out WHY, CSS/HTML/JS are exactly the same between the two apps. That's crazy.
Ok, solved. I'll post here the solution for future reference.
I just needed to add the property -webkit-tap-highlight-color: transparent on the main button class. As it is here described, this is not a standard property. But it worked!
Referencing to the code snippet from the question, I've modified the #btn-container class, in this way:
#btn-container {
margin: 5px;
text-decoration: none;
cursor: pointer;
float: left;
border-radius: 25px;
border: none;
transition: 0.3s;
background-color: rgb(230,230,230);
color: black;
-webkit-tap-highlight-color: transparent; /* <-- this is new */
}
http://codepen.io/leongaban/pen/ztIua
I have a custom styled select here with a svg dropdown arrow on top of it. However if you try to click on the arrow itself it does not open the select because of some sort of layered hierarchy. Is there anyway to disable that div from being clickable with just CSS?
<h2>
<div class="drop_arrow"></div>
<select id="getRoute">
<option class="routeSelector">Onboarding</option>
<option class="routeSelector">Engagement</option>
<option class="routeSelector">Popular Searches</option>
<option class="routeSelector">Unregistered</option>
</select>
</h2>
#getRoute {
margin-right: 5px;
margin-left: -20px;
padding: 5px;
width: 180px;
font: 16px LatoBold;
-webkit-appearance: none;
}
.drop_arrow {
position: relative;
float: left;
top: 10px;
left: 150px;
width: 18px;
height: 12px;
background-position: -520px 0px;
background-size: 1600px 1600px;
background-image: url(http://leongaban.com/images/dash.svg), none;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
}
Give the drop down list relative position (so that it is above the arrow in the stack order), and a transparent background (so the arrow is visible through the drop down):
#getRoute {
...
background-color: transparent;
position: relative;
}
http://codepen.io/anon/pen/bcjgJ
I believe i have found a solution.
adding the JS:
function dropDown(){
var dropdown = document.getElementById('getRoute');
var event = document.createEvent('MouseEvents');
event.initMouseEvent('mousedown', true, true, window);
dropdown.dispatchEvent(event);
}
and triggering this on the arrow click should do the trick .
http://codepen.io/anon/pen/xiDmw
css is for display not for click events.
You need to use js to forward the click to the element you want
I have a table and I used the CSS:
table.grid {
cursor: default;
}
So the cursor now stays as a pointer when I hover over words.
But when I double click on something in the table it is selected. How can I make it so that a double mouse click does not select inside of that table?
You can use user-select property for that
Demo
table {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: default;
}
Still, if you refer MDN, it will show a big red box which says that the property is Non-Standard so it's better to have JavaScript fallback by using onmousedown and onselectstart event with return false
<table>
<tr>
<td onmousedown='return false;' onselectstart='return false;'>Prevent from selecting this</td>
</tr>
</table>
Demo 2
Try this...and make change as you need.Is this you need?
<span class="test2">
Double click me
<em tabindex="-1"> </em>
</span>
and css is
.test2 {
padding: 10px 0;
position: relative;
}
.test2 em {
position: absolute;
top: -6px;
left: 0;
right: 0;
bottom: -1px;
z-index: 100;
}
.test2 em:focus {
display: none;
}
Sometimes clicking isn't perfect, the mouse might move slightly and the button/elements end up with little 'selected' artifacts around them as seen here:
Of course clicking somewhere gets rid of it, but it's kind of annoying and looks crappy. Is there any way I can disable this so that the app seems more solid?
HTML/CSS:
<td id="controls">
<span id="ccw" class="menuitem"></span>
<span id="cw" class="menuitem"></span>
<span id="zin" class="menuitem"></span>
<span id="zout" class="menuitem"></span>
</td>
#cw{
background-image:url('icons/rotatecw.png');
}
#ccw{
background-image:url('icons/rotateccw.png');
}
#zin{
background-image:url('icons/zoom_in.png');
margin-top: 2px;
}
#zout{
background-image:url('icons/zoom_out.png');
margin-top: 2px;
}
.menuitem{
background-repeat:no-repeat;
width: 32px;
height: 16px;
display: inline-block;
}
In many browsers (except Opera and IE before IE10), you can use user-select with its various browser-prefixes. See MDN docu for details.
.controls {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
I have an image being hacked in as a background image (as shown here). I've noticed that if I drag my mouse over it though, it selected the image so that it can't be deselected. I've tried the following code to no avail:
<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
}
img#bg {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
}
#content {
position:relative;
z-index:1;
top:0px;
left:0px;
}
*.unselectable {
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
user-select: none;
}
</style>
Any ideas?
Add this to your style sheet
.selectDisable {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
.selectEnable {
-webkit-user-select: text;
-khtml-user-select: text;
-moz-user-select: text;
-o-user-select: text;
user-select: text;
}
Just add the class selectDisable to the element you want to prevent from being selected.
The drag effect occurs on webkit(chrome, safari, opera). It does not happen on Firefox.
Don't this apply to your whole document if you have textual content because then you won't be able to select text, which is not very user-friendly.
You could also prevent dragging by adding another empty div on top of your image with the same selectDisable class.
Here is a working example:
http://jsfiddle.net/xugy6shd/3/
draggable="false" worked for me
If you load image as div's background you can't select it.
EDIT
<div style="background-image: url(../images/test-background.gif); height: 200px; width: 400px; border: 1px solid black;"> </div>
If you are using jQuery I've written a tiny jQuery plugin - wrapper that does pretty much what ppumkin wrote:
(plugin is in js part along with an example usage) http://jsfiddle.net/gryzzly/HtvB8/