I am using it in JavaScript to enable and disable a div element:
$("#divbutton").css("pointer-events","auto");
But I want a property that enables and disables the element. How can I do that?
html
<div class="buttonSender" id="divbutton">Invia</div>
While I strongly recommend using a <button> instead of a <div>, I can think of one case where you might not be able to change the HTML markup to do that.
I start below with the case you should strive for, using a <button> for a button, but follow further below with how you can "disable" a div that is acting as a button.
You can make a div act like a button by adding a click handler to it, then disable it simply by adding a class with the proper CSS, mainly by disabling pointer-events.
Here, the <div> is acting as a button by using a class, and it gets disabled by adding another class, "disabled". The click handler on the div demonstrates it is clickable by using an alert, and you will see that it no longer reacts to clicks when the "disabled" class gets added to the div.
$('#divbutton').click(function(e) {
// This is where you would put your code that
// does something when the div is clicked.
alert('The Fake Button was Clicked');
});
// This is how you can disable the fake button...
$('#demo-disable').click(function(e) {
$('#divbutton').addClass('disabled');
});
// ...and re-enable it
$('#demo-enable').click(function(e) {
$('#divbutton').removeClass('disabled');
});
div.buttonSender {
margin: 1px;
padding: 4px;
border: 1px solid darkgray;
border-radius: 2px;
max-width: 20em;
pointer-events: auto;
color: black;
background-color: peachpuff;
}
div.buttonSender.disabled {
background-color: lightgray;
pointer-events: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
<div id="divbutton" class="buttonSender" role="button">
This is the div that is acting like a button.<br> Click Me
</div>
</section>
<section class="demo-buttons">
<button id="demo-disable">Disable</button>
<button id="demo-enable">Enable</button>
</section>
I've added the role="button" on the div for the purposes of accessibility, but that is not all you would have to do for proper accessibility — see the "Note:" in the ARIA: button role documentation.
You would be much better off using a <button> instead of a <div> since you are able to put any HTML in the button tag that you could put in the div.
The only reason (that I can think of) that you would "have to" use a div is if the HTML is written by someone else and you have no access to change it and no way to influence the author of the HTML.
In that case you also aren't able to add classes or an ID, or write any new CSS, and would have to work with what is already there.
This demo does that by modifying the CSS using jQuery's .css() method, disabling then restoring the pointer-events — note jQuery uses the camelCased property name, so it is pointerEvents not pointer-events.
/*
* This is NOT your code - this would be the click handler that already exists.
*/
$('#divbutton').click(function(e) {
// Assume there is already a click handler, and you want to disable it.
// This code would be the existing handler, somewhere else, not written by you.
alert("Invia was clicked");
});
/*
* This would be your code, and it wouldn't be packaged with the code above
*/
// This is how you can disable the fake button...
$('#demo-disable').click(function(e) {
$('#divbutton').css('pointerEvents', 'none');
});
// ...and re-enable it
$('#demo-enable').click(function(e) {
$('#divbutton').css('pointerEvents', 'auto');
});
#divbutton {
border: 1px solid darkgray;
border-radius: 2px;
padding: 5px;
max-width: 5em;
}
#demo-controls {
margin-top: 2em;
border-top: 1px solid gray;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
<p>
This area would be part of the page that you don't control.<br>
The div acting like a button is below, and you can't change it.
</p>
<div class="buttonSender" id="divbutton">Invia</div>
</section>
<section id="demo-controls">
<p>
This area would not be part of the HTML, over which you have no control,
but somehow you need a way to fire your code that disables the existing div#divbutton
<br>
There needs to be <em>something</em> that fires your javascript;
these buttons simulate that.
</p>
<button id="demo-disable">Disable</button>
<button id="demo-enable">Enable</button>
</section>
Try creating a CSS class with the value of pointer-events that you want like in the following example:
document.querySelector('button').addEventListener('click', () => {
document.getElementById('divbutton').classList.toggle('disabled');
});
#divbutton.disabled {
pointer-events: none;
user-select: none;
background:yellow;
}
#divbutton {
height: 2rem;
}
<div class="buttonSender" id="divbutton">Invia</div>
<button>click me</button>
Related
I'm trying to make an animated input field, such that every letter animates in/out on type/backspace. I imagine that I will have to wrap every letter with a span, like so:
<span class="animateLetter">A</span>
<span class="animateLetter">B</span>
<span class="animateLetter">C</span>
But then I lose the dynamic nature of the <input> tag.
The ultimate goal is
<input onChange=animateLetter />
Where animateLetter is a function that determines the letter just typed or deleted, and animates its addition or deletion.
Since you cannot wrap the letter values of the value property on the 'input' tag, let alone add a class to those spans, this becomes rather tricky.
You know, you can make it like how element in gmail work. in gmail. each time you add people to recipient, it add one div besides of the text area. so in your problem, whenever javascript detect change in input, you add an element (span or div) right before the input text. You can mask it like the one I do below.just remember that, everytime onchange fired, you need to delete the text in add or text before the input. I don't really have time to implement the script to add text and the animation. for animation, you can take it from https://daneden.github.io/animate.css/. it has many great animation that you can use.
.wrapper {
border: solid 1px #cccccc;
display: inline-block;
font-size: 0;
}
.wrapper .letter {
letter-spacing: 0px;
display: inline-block;
vertical-align: top;
font-size: 16px;
}
input {
border: none;
}
input:focus {
outline-width: 0;
}
<div class="wrapper">
<div class="letter">h</div>
<div class="letter">e</div>
<div class="letter">l</div>
<div class="letter">l</div>
<div class="letter">o</div>
<input onchange='addTextAnimation()'/>
</div>
I asked this question earlier from my phone but it became very convoluted and confusing so I decided to start over after finding a usable PC. Note that I can't give the full original code nor images due to the project's classified nature which is also located offline. The bare-bones version below contains the same problem anyway, so I'm quite certain being able to solve the problem in this example code will be adequate for me to troubleshoot anything else in the actual application.
I have the following code: https://jsfiddle.net/mssdjrzk/
<!DOCTYPE html>
<html>
<style>
button {
width: 24px;
height: 24px;
padding: 4px 0 0;
}
img {
width: 16px;
height: 16px;
}
</style>
<body>
<button type="button">
<img src="https://cdn1.iconfinder.com/data/icons/famfamfam_mini_icons/action_refresh_blue.gif">
</button>
<hr>
<a>Sample link</a>
</body>
</html>
When the cursor hovers over the button, a default browser-based behaviour is triggered. In the case of IE 11, the button is highlighted.
Next, I add additional CSS for a:hover: https://jsfiddle.net/yLrznyss/
<!DOCTYPE html>
<html>
<style>
button {
width: 24px;
height: 24px;
padding: 4px 0 0;
}
img {
width: 16px;
height: 16px;
}
a:hover {
color: red;
}
</style>
<body>
<button type="button">
<img src="https://cdn1.iconfinder.com/data/icons/famfamfam_mini_icons/action_refresh_blue.gif">
</button>
<hr>
<a>Sample link</a>
</body>
</html>
Now, when I hover my cursor over the button, the behaviour is messed up - the behaviour does not render, although other events like onclick renders normally. I have done a lot of troubleshooting and attempts to workaround without success, but here are my findings:
The offending element is :hover. It doesn't matter what element/class/id is attached to it, its very existence in the stylesheet is enough. Even a:hover {} which contains no styling will cause the problem too, as does span:hover {} when no <span> elements even exist in the HTML.
I tried it on Chrome, but the problem does not exist since Chrome's default hover behaviour for buttons is rendered differently. This is thus a browser-specific problem.
The problem only exists for buttons containing images, as opposed to buttons containing text, empty buttons or standalone images not inside anything.
My guess is that the existence of the :hover CSS in the stylesheet, even if it's empty, is causing issues in how IE renders the resultant web page and its behaviour.
How can I prevent the button and/or its internal image from being affected, thus returning to the default IE button hover behaviour? I can change anything, as long as the desired hover style on the hyperlinks is achieved without affecting the buttons.
The full application which uses this code will use IE11 on Windows 10 - not any other browser. Solutions using HTML, CSS or JavaScript are acceptable but no external libraries are available to my project.
Maybe I'm missing something, but I don't see any anchor links inside the button. I used this code:
button:hover {
background: red;
}
And was able to get the hover effect you are looking for
I have found a successful workaround. Since I can't use the :hover selector, I have to mimic it via JavaScript. Credits to Javascript onHover event for the solution.
<!DOCTYPE html>
<html>
<style>
button {
width: 24px;
height: 24px;
padding: 4px 0 0;
}
img {
width: 16px;
height: 16px;
}
.isHovered {
color: red;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
var links = document.getElementsByTagName("A");
for (var i = 0; i < links.length; ++i) {
(function() {
var link = links[i];
var hoverTimer;
link.addEventListener("mouseover", function() {
hoverTimer = setTimeout(function() {
link.className = "isHovered";
}, 0);
});
link.addEventListener("mouseout", function() {
clearTimeout(hoverTimer);
link.className = "";
});
}());
}
});
</script>
<body>
<button type="button">
<img src="https://cdn1.iconfinder.com/data/icons/famfamfam_mini_icons/action_refresh_blue.gif">
</button>
<hr>
<a>Sample link</a>
</body>
</html>
I would welcome any better answer though, or at least an explanation of why I have this problem - if you are able to replicate it on your machine.
When I use .prop('disabled',true) to disable a button, it works, but the button does not look disabled. I remember in the old days when I used .attr('disabled','disabled') to disable buttons, they would become more visibly disabled, i.e. the text would be greyed out or something so the user wouldn't try to click. Now I think the button border fades a bit but the text is not.
What's the easiest way to get the old behavior back? I am lazy and don't want to write one line of code to disable the button and another to make it look disabled - I want to get both effects in a single command if possible. Should I use a different element other than a button? A different method of disabling?
I made a fiddle here: http://jsfiddle.net/ak2MG/. Here's the code.
HTML:
<button type='button' id='mybutton'>Click Me</button>
<div id="mydiv"></div>
Javascript:
$('#mybutton').click( function() {
$('#mydiv').append("<p>Button was clicked.</p>");
$('#mybutton').prop('disabled',true); } );
Or change the opacity of the button
$('#mybutton').click( function() {
$('#mydiv').append("<p>Button was clicked.</p>");
$('#mybutton').prop('disabled',true).css('opacity',0.5);
});
Fiddle
I would add a disabled class to the button.
This lets you control the styling from CSS instead of javascript so all of your styling is in one place (where it should be).
Demo: JSFiddle
HTML
<button type='button' id='mybutton'>Click Me</button>
<div id="mydiv"></div>
JS
$('#mybutton').click( function() {
$('#mydiv').append("<p>Button was clicked.</p>");
$('#mybutton').prop('disabled',true).addClass('disabled');
});
CSS
.disabled {
color: #999;
}
it is pretty simple, just change the text style
$('#mybutton').click( function() {
$('#mydiv').append("<p>Button was clicked.</p>");
my_button_disable(this);
});
function my_button_disable(btn) {
$(btn).prop('disabled',true);
$(btn).css('color', 'lightgray');
// put whatever else you want here
}
http://jsfiddle.net/ak2MG/6/
Simplest - Add a state in CSS
Target it with CSS to change the style,
importantly the pointer-events: none will make it unresponsive. :
button:disabled {
background: #F5F5F5;
color : #C3C3C3;
cursor:none;
pointer-events: none;
}
The change from attr() to prop() was only to the jQuery API and has nothing to do with any difference you are observing in the style of a disabled button.
A disabled button's style is decided by the browser. The fiddle you provided looks very "disabled" in Google Chrome (Version 33.0.1750.154 m). If you'd like to alter the style of a disabled button to your liking, I recommend adding a class OR styling based on attribute
button[disabled],
button.disabled {
color: #999;
background: #DDD;
border: 1px solid #CCC;
}
What I'm trying to do is make it so that, when a user clicks in the textarea, it expands the div to show the 'Post' button.
Here's a picture of what I mean:
So, when the user clicks in the textbox area, I need the background div to expand and show the 'Post' button.
Here's the JSFiddle I started: http://jsfiddle.net/MgcDU/6018/
HTML:
<div class="container">
<div class="well">
<textarea style="width:462px" placeholder="Comment..."></textarea>
<button class="btn btn-primary" type="button">Post</button>
<div class="clearfix"></div>
</div>
CSS:
textarea {
margin-bottom: 0;
}
.btn {
float: right;
margin-top: 12px;
}
.container {
margin:20px 0 0 20px;
}
.well {
width: 476px;
padding: 12px;
}
I have no JavaScript experience, but I think this is a simple enough project to look at when finished to be able to understand the basics.
Add the following to your markup and styling and include the script.
HTML
<button class="btn btn-primary btn-toggle" type="button">Post</button>
CSS
.btn-toggle{
display: none;
}
Javascript
$("textarea").click(function(){
$(".btn-toggle").slideDown();
});
$(document).click(function(e){
e.stopPropagation();
if($(e.target).parents(".well").length == 0){
$(".btn-toggle").slideUp();
}
});
This segment of Javascript binds click event handlers to the textarea and the document. The event handler bound to the textarea simply slides down the button to make it visible.
The event handler bound to the document is fired on every click on the page since the click events propagate up the DOM to the document. Once the document fires the event, the handler checks to see if the target (aka element clicked) has a parent inside the well. If it does we do not perform any actions since we do not want to hide the button when the user clicks inside the textarea or the button itself. If the click is outside of the well we call the slideup function on the button to hide it in a stylish manner.
Working Example: http://jsfiddle.net/MgcDU/6025/
Kevin's answer is the one you want, but I was just feeling experimental with some CSS I had, so I just wanted to post it. This is a fadeInDown button. You may want to host the CSS on your website. I just used some code I had. You can change this fiddle to fadeIn or something else (just search Google for animate.css). http://jsfiddle.net/shaansingh/MgcDU/6024/embedded/result/
I have now one page which has a default.css style
I have one style1.css file and another one is style2.css file.
I have one UI dropdownlist which has two options.
When I select one then apply style1.css and same thing for other.
The page should not be refresh.
How can I do this?
Given you have no specific context I would suggest looking into using jQuery toggleClass().
Say you have HTML like this where the div in this example uses a default style style1 and a button will switch out styles:
<div id="myDiv" class="style1"></div>
<button id="myButton">Switch Styles</button>
In addition to style1 you have also another style defined, say style2 likes this:
.style1{
width: 100px;
height: 100px;
border: 1px solid red;
}
.style2{
width: 200px;
height: 150px;
border: 3px solid blue;
}
To switch them when clicking on the button using the toggleClass() method you can do this:
$(document).ready(function(){
$("#myButton").on("click", function(){
$("#myDiv").toggleClass("style2");
});
});
See DEMO
You can off course trigger the toggle from anywhere, not just the button, this was only an example.
look at http://api.jquery.com/addClass/ and http://api.jquery.com/removeClass/