This question already has answers here:
How to completely DISABLE any MOUSE CLICK
(5 answers)
Closed 5 years ago.
I want to hide the cursor until my function is done but I can't find how to disable it. I mean I have found how to hide it and show it but when it's hidden I can still click So how to disable it?
window.document.styleSheets[0].insertRule('* {cursor: none;}', window.document.styleSheets[0].cssRules.length);
Meteor.call("lockTheMachine", machine.nameMachine, Session.get("loggedUser"), function(err, res) {
if (!err) {
Session.set("lastMachineUsed", machine.nameMachine);
window.document.styleSheets[0].insertRule('* {cursor: default ;}', window.document.styleSheets[0].cssRules.length);
} else {
console.error(err);
}
});
}
There's a CSS property for that called pointer-events.
The CSS property pointer-events allows authors to control under what circumstances (if any) a particular graphic element can become the target of mouse events.
In addition to indicating that the element is not the target of mouse events, the value none instructs the mouse event to go "through" the element and target whatever is "underneath" that element instead.
If you were to disable any click interaction on your whole site you could simply add:
body.block { pointer-events: none; }
And trigger the class .block programatically via Javascript.
You can solve your problem by simply adding the following style in your CSS file.
button {
pointer-events: none;
}
The problem with this is that the button is not clickable but the cursor is still displayed when you hover on the button.
To overcome this problem you can add "disable" attribute to the button and add the following CSS.
button {
cursor: not-allowed; // or cursor: none;
}
When you add the css "cursor": "not-allowed" or "none" to a input type or a button, the button is still clickable. For doing the input type or button non clickable you have to add "disable" attribute.
A disabled input element is unusable and un-clickable. The disabled attribute can be set to keep a user from using the element until some other condition has been met (like selecting a checkbox, etc.). Then, a JavaScript could remove the disabled value, and make the element usable.
But when you using bootstarp library, when you disabled a button or input type, then you can't see any cursor when hover onto that element. At the newest bootstrap library, we can find this rule:
.btn.disabled, .btn[disabled], fieldset[disabled] .btn {
pointer-events: none;
cursor: not-allowed;
filter: alpha(opacity=65);
-webkit-box-shadow: none;
box-shadow: none;
opacity: .65;
}
So I assume that bootstrap tried to implement the cursor: not-allowed for disabled buttons, or input's.
So for doing this you have to overwrite the bootstrap class for it.
But it works fine when you don't link bootstrap library in your html.
e.g.:
HTML code:
<button class="disabled-button" disabled>
I am disabled and not clickable too
</button>
CSS code:
.disabled-button {
cursor: not-allowed;
}
or you can trigger ".disabled-button" class programmetically by javascript to unclickable it.
Related
I would like to learn more about the "HTML contenteditable =' true '" attribute and the javascript focus () function.
For example, I would like to know how I can influence the position of the focused line or how to edit the background of a focused line.
I have already googled some things but I can't find the right information.
Does anyone have a good tip?
You can check which element is on focus by writing in the Google Chrome console:
document.activeElement
The contenteditable attribute specifies whether the content of an element is editable or not.
If you want to trigger the focus on a contenteditable element you can do it by:
$(".contenteditableClassName").focus();
Any other background change on this element is done by CSS for example you can use
.no-touchevents &:hover, &:focus, &:active {
border-color: white;
color: blue;
You can apply different changes on the element on focus this way.
Also you can remove the focus border on click by using:
.pointer-focus &:focus {
outline: none;
}
This question already has answers here:
Can I have an onclick effect in CSS?
(14 answers)
Closed 6 years ago.
In javascript, you can easily execute onclick events directly from the html element:
<div onclick="..javascript here.."></div>
I know that you can change the css styles with the <style> tag, but I was wondering if you were able to execute it similarly to the example below:
<div onclick="..css here.."></div>
if you want to do it purely through css you have to use :active or maybe :focus:
div:hover { color: red; } /* mouse-over */
div:active { color: red; } /* mouse-down (this cause also focus) */
input:focus{ color: red; } /* got focus (by tab key or mouse-down) */
/* for <a> element: */
a:link { color: red; } /* unvisited links */
a:visited { color: red; } /* visited links */
Note: the :active does not stay permanent after the user release the mouse button for elements that does not take focus (like as a div) but it works for elements like as text inputs or buttons. there is a workaround for it called "Checkbox Hack" where you use a connected label and checkbox input and some other element you are trying to control..
Also, if you want to change css class or inline styles, you could do as following:
<div onclick="this.style['border'] = '2px solid red';">Click me</div>
There is, but the element needs to have a tabindex attribute.
With a tabindex on the element you can use:
element:focus {
/* some_CSS; */
}
'some_CSS' will kick in when the element is clicked.
You can use javascript to change the style of a div or any other element. But I donot know whether there is a way to change css by onclick event without using javascript.
I can explain my method.
<script>
function change_css(){
document.getElementById('change_css').className='newClassName';
}
</script>
<div onclick="change_css()" class="initial_class">content</div>
The above code will help you change the style by changing the class, provided you have already created a class with css. It replaces all the previously provided classes for that div and add the new one.
To add an additional class to the div without replacing the existing classes, use the following statement in javascript:
document.getElementById('change_css').className+=' newClassName';
I got CSS or jQuery/JavaScript question.
I set on many elements tabindex="0" because I need to provide tabbing through page, but I'm wondering why on pages like stackoverflow.com or developer.mozilla.org when I click by mouse I can't see outline on focus, but on my page when I click by mouse I can see outline.
Are they really setting some jQuery/JS preventing showing outline or maybe there is some good way of setting outline in css to prevent showing it?
Edit:
1. Elements on my page should have outline when user is tabbing through page by tab key,
2. Elements on my page should not have outline when user is clicking on elements by mouse
You Can Use
input,button,textarea,-----{
outline: 0; //or outline: none;
} (OR)
// Create One Class With Above Property ,Give That Class To Particular Html Element Like Below ,
.className{
outline: 0; //or outline: none;
}
I am currently using :hoverCSS pseudo-class for displaying tooltip-like elements (i.e. tables) in a way similar to what is suggested here:
div.tool:hover div.tooltip { display:block; }
I like the fact that this does not require any JavaScript.
Is it possible to add a further constraint to the effect that the hover only applies if no mouse button is pressed? The reason is that I want to prevent interference of these tooltips with other functionality (drag-and-drop, drop-down menus) that is based on jQuery UI. (As it happens, the tooltips are currently dragged together with their corresponding "tool" elements.)
Basically the if mouse clicked css selector method id :active so what you would have to do is this:
.tool {
min-height: 18px;
height: auto;
}
.tool:active .tooltip {
display: none !important;
}
.tool:hover .tooltip {
display: block;
}
.tooltip {
display: none;
}
The order is crucial because the higher rules take priority
Here is a working fiddle: http://jsfiddle.net/Hive7/bsnnb6sf/
Also you might want to consider using visibility instead of display because otherwise you need to set the height of the parent:
.tool:active .tooltip {
visibility: hidden !important;
}
.tool:hover .tooltip {
visibility: visible;
}
.tooltip {
visibility: hidden;
}
Example fiddle: http://jsfiddle.net/Hive7/bsnnb6sf/1/
Is it possible to add a further constraint to the effect that the
hover only applies if no mouse button is pressed?
One option could be to use :active pseudo-class to hide the tooltip. According to the spec: (my emphasis)
5.11.3 The dynamic pseudo-classes: :hover, :active, and :focus
The :active pseudo-class applies while an element is being activated
by the user. For example, between the times the user presses the mouse
button and releases it.
For instance:
div.tool:hover div.tooltip { display:block; }
div.tool:active div.tooltip { display:none; }
I think that's not possible because the hover event will always launch before the click event. If you want to disable that effect once the user clicks the element, you could add custom style rules to the css in the click event overriding the hover rules via element.addClass() or element.css()
I'm trying to display a file chooser when a user clicks a link on my page. I've looked around a bit, but still haven't found a complete solution.
I have ruled out binding a listener to the click event on my link and simulating the click event on my form's file field because I've read that Safari doesn't support programmatically clicking on an input[type=file].
Currently I am using the approach where I set the opacity of the file field to 0 and absolute position it over the top of the link, effectively intercepting any clicks on the link. The problem with this is that I can't figure out a way to change the user's cursor when they hover the link since it is obscured by the file input, which doesn't allow for such styling. I have given all immediate parent elements the css style cursor: pointer, but still no luck.
Does anyone have an idea of a different approach I could take in order to get the cursor to change to a pointer on hover of my link? Is my best bet going to be going with something like they have at http://www.uploadify.com/?
EDIT
To explain a little better, I have this file input on my page:
<div class="logo_file">
<input id="logo_file_field" type="file">
</div>
With this css:
.logo_file {
position: absolute; /* this element's parent has position: relative */
top: -65px;
left: 0;
width: 175px;
overflow: hidden;
cursor: pointer;
}
input#logo_file_field {
opacity: 0;
-moz-opacity: 0;
filter: alpha(opacity=0);
cursor: pointer;
}
And I am trying to show the file chooser corresponding to that field when the user clicks this link:
<div class="logo_link_wrap">
<a id="logo_change_link">Change Photo</a>
</div>
Which has this css:
.logo_link_wrap {
margin-top: 38px;
cursor: pointer;
}
Right now I am placing the invisible file field over the link, but the cursor is not turning into a pointer like it should when you hover over a link. The file chooser does display, it's really only the cursor not changing that is holding me up. Thanks
The problem is that you are placing the input field over the link and making the input field invisible by using opacity:0;. But the input field is still there and is blocking the cursor access to the link.
Would it not be better to replace the opacity with display:none?
With display:none you hide the input field and remove it from the flow. I'm assuming that you want the link to be used to active the upload function of the input field, and I'm also assuming that you know how to do that.
Try wrapping the input tag in an anchor tag
<input type="file" ... />