I'm working on a table where users will click on cells and drag the mouse across other cells to interact with it.
I want the mouse cursor to stay as 'pointer' the whole time the user is on the table. They should not be able to select any text.
Here's some example code to demonstrate:
<html>
<head>
<style>
td {
user-select: none;
-webkit-user-select: none;
cursor: pointer;
}
</style>
</head>
<body>
<table>
<tr><td>Test</td><td>Test</td></tr>
<tr><td>Test</td><td>Test</td></tr>
</table>
</body>
</html>
This works perfectly in Chrome - the cursor never changes from pointer regardless of how you interact with the cells using the mouse.
However, Safari always changes to the 'text' cursor as soon as you start dragging the mouse over the table (even though -webkit-user-select successfully prevents you from actually selecting text).
I've tried applying the styles above to the :active selector, as well as to parent elements (e.g. ) but no luck.
Does anyone know how to make this work in Safari?
Use mousedown event and event.preventDefault() -
function preventDefault(event) {
event.preventDefault()
}
div {
cursor: pointer;
background-color: lavender;
padding: 1rem;
margin: 1rem 0;
}
<div>
ā click and drag with default cursor
</div>
<div onmousedown="preventDefault(event)">
ā
click and drag with custom cursor
</div>
Related
When you hover your mouse over a button or a link, the curser changes design to reflect that the element is clickable, but when hovering the mouse over an element with the onClick() function, it doesn't.
Is there a way to replicate this behavior on elements with the onClick() function?
Check for: CSS Syntax cursor: value;
Here you can find a list of the cursor css options:
CSS cursor Property
The cursor can also be an image:
.custom {
/* The second value here is a fallback. */
cursor: url(images/my-cursor.png), auto;
/* You may need coordinates to adjust the pointer
for example, the custom cursor is circular and you want
the middle to be where you click */
cursor: url(target.svg) 15 15, move;
}
From : CSS Tricks
You can add css property cursor to that element.
.yourElement {
cursor: pointer;
}
Triggering the click event depends on the value of transform: scale().
When there is a relative big number, it works, but when there is a small one, it does not work properly.
Does anybody know how to fix it?
Here is my Demo
Try to click on the border in order to see it.
document.querySelectorAll("button").forEach((itm)=>{
itm.addEventListener("click",function(){alert("press")});
})
button{cursor:pointer;user-select:none;outline:none;background-color:#c7ffff}
button{border:25px solid red;box-sizing: border-box;}
#b1:active{transform:scale(0.4)}
#b2:active{transform:scale(0.95)}
<!-- Click on the border on each one of then-->
<!-- Then click on the center, and it works in both-->
<button id="b1">Click Me</button>
<button id="b2">Click Me x2</button>
The problem is the div seems to lose the click event as the active button is now too small and therefore the click is no longer inside the button (try the larger button number but click in the bit that turns white and you will see it has the same problem).
https://developer.mozilla.org/en-US/docs/Web/Events/click - The click event is fired when a pointing device button (usually a mouse's primary button) is pressed and released on a single element.
This means when the button is released, as the mouse is no longer in the button because it was scaled down, the click event for that button won't fire
How about using mousedown to capture the event instead:
document.querySelectorAll("button").forEach((itm) => {
itm.addEventListener("mousedown", function() {
console.log("press"); // changed to console so you can see it fire in the snippet as well as the animation taking place (which wuldn't happen with an alert)
});
})
button {
cursor: pointer;
user-select: none;
outline: none;
background-color: #c7ffff
}
button {
border: 25px solid red;
box-sizing: border-box;
}
#b1:active {
transform: scale(0.4)
}
#b2:active {
transform: scale(0.95)
}
<!-- Click on the border on each one of then-->
<!-- Then click on the center, and it works in both-->
<button id="b1">Click Me</button>
<button id="b2">Click Me x2</button>
I'm trying to create a custom outline for a button and I'm facing issues with Chrome and IE and Edge.
See this codepen: http://codepen.io/alansouzati/pen/dXEWLB
.custom:focus {
outline: black solid 2px;
}
.custom:active,
.custom:hover,
.custom:visited {
outline: 0;
}
In Safari and Firefox I get the expected behavior.
To test it, click the second button (Custom focus). In IE and Edge I'm getting the outline even though I did not press tab. In Safari and Firefox the outline only shows up if I press tab, not when I click the button.
Any suggestions on how to fix this issue for Chrome and IE ?
You can use .blur() in jQuery to avoid focusing after a button is clicked.
function myFunction() {
alert('hi');
}
$(".custom").click(function(e) {
$(this).blur();
myFunction();
});
.custom:focus {
outline: black solid 2px;
}
.custom:active,
.custom:hover,
.custom:visited {
outline: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" onclick="myFunction()">Default focus</button>
<br/>
<br/>
<button type="button" class="custom">Custom focus</button>
Your CSS can be simplified to
.custom:focus:not(:active) {
outline: black solid 2px;
}
And then Edge will render the outline just like Chrome, which makes me think the problem has to do with the handling of CSS selector specificity in Edge.
Updated Codepen: http://codepen.io/anon/pen/EgvYPR
Note however that in your example when I click on the second button with the mouse and then move the cursor outside the button before releasing it, the outline appears even if the tab key was not pressed: same behavior in all browsers.
If this is not intended, I'd suggest you switch to a JavaScript solution.
I am attempting to style a Kendo UI DropDownList control to be essentially invisible until you click on it; I have almost succeeded, but the code I've produced has some "twitching" side effects.
The goal is simple; I want to have some text, and then following it is the drop down list; The drop down list should look like whatever line of text it is in, and clicking that word will present the options.
This sample does that, but it has some problems.
The text isn't showing up lined up with its preceding text
Clicking the text makes the drop down appear, but it displaces the other text
You can see a working jsBin here
jsBin
But here is my actual .less code.
.transparent(){
background: transparent;
border: 0;
padding: 0;
margin: 0;
text-indent: 0;
}
.k-dropdown-wrap {
.transparent;
.k-input,
&[class^="k-state-"] {
.transparent;
}
}
[data-shadows="true"] {
text-shadow:
1px 1px 1px rgba(0,0,0,.5),
3px 3px 3px rgba(255,255,255,0.5);
}
HTML
<div class="small" data-shadows="true">
(small) Preceding Text
<em>
<input data-role="dropdownlist"
data-auto-bind="true"
data-value-primitive="true"
data-text-field="ProductName"
data-value-field="ProductID"
data-bind="value: selectedProduct,
source: products"
/>
</em>
</div>
<div class="h1" data-shadows="true">
(large) Preceding Text
<input data-role="dropdownlist"
data-auto-bind="true"
data-value-primitive="true"
data-text-field="ProductName"
data-value-field="ProductID"
data-bind="value: selectedProduct,
source: products"
/>
</div>
Are either of these things that can be fixed? They've been baffling me for a bit, now.
I have finally discovered an answer to this, as it took a bit of plumbing to come to what was eventually a pretty simple solution.
First, I had to set the KendoDropDownList containers to have display: inline; to make sure it rendered on the same block. This is done via the .k-dropdown-wrap class.
.k-dropdown-wrap {
.transparent;
display: inline;
.k-input,
&[class^="k-state-"] {
.transparent;
display: inline;
}
}
This is done to make sure that the actual drop down list itself remains the same way no matter what it's interactive state.
Next, I have to set the actual .k-dropdown class to have display: inline and set its vertical-align to baseline.
.k-dropdown {
display: inline;
vertical-align: baseline;
}
And then lastly, I wanted to make sure that none of this changed while the actual dropdown was selected, so I have to change the .k-dropdown .k-select class to have no display.
.k-dropdown .k-select {
display: none;
}
We can also get rid of the fact that the actual drop down itself is transparent (since we still want it to be skinnable) with the class .k-list-container
.k-list-container {
background: #fff;
}
You can see the fixed and working demo here;
jsBin
Major thanks to the Telerik Support Staff for helping me step by step through this one.
i have created a web page with a modal popup control.
Within this control i dynamically build a html to display data.
Within some of the tables tags i have the following:
<td>
<span>S</span><span class="pop">description</span>
</td>
i want to create a popup effect when hovering over the tag.
My CSS is:
a .pop {
display:inline;
position:absolute;
visibility: hidden;
background-color: #FFFFFF;
border: solid 2px #000000;
padding: 5px;
margin: 0 0 0 10px;
color: #000000;
text-align: left;
font-weight: normal;
}
a:hover .pop {
visibility: visible;
}
This works perfectly when i use the control within a standard HTML page.
It appears to work within the modal popup control, until i need to scroll down the modal control when the table data is larger that the modal window.
The hover effect then appears to not be working. I think this is because im using the "position":"absolute" for the ".pop" class, and the hover effect is working, but its position is no longer relative to the tag because I have scrolled through the page.
I am not able to get round this and its killing me. Do i need to dynamically reposition the control using a "mouseover" event, or can this be achieved via CSS, and Iām just missing something / being a novice.
Karl
Try adding this:
a { display:block; position:relative }
This will make the span.pop be positioned relativily to the a tag it is in.
example:
http://jsfiddle.net/R4Erw/