I am disabling a button until atleast one checkbox has been selected like so:
var checkboxes = $("input[type='checkbox']"),
submitButt = $("input[type='button']");
checkboxes.click(function() {
submitButt.attr("disabled", !checkboxes.is(":checked"));
});
My buttons initial state is disabled but I need it to be like faded out or opacity added to it, im not sure what the best approach would be either do it with adding a class or just adding CSS? im not really sure?
If you mean you want to adjust the appearance of a disabled button, you do that with a CSS attribute presence selector (input[type=button][disabled]) or a CSS :disabled pseudo-class selector (input[type=button]:disabled):
input[type=button][disabled] {
color: red;
opacity: 0.5;
}
/* or: */
input[type=button]:disabled {
color: red;
opacity: 0.5;
}
The attribute selector works because a disabled button has a disabled attribute, and an enabled one does not. But in modern code, I'd probably use :disabled instead.
Example:
var btn = $("#toggle");
setInterval(function() {
btn.prop("disabled", !btn.prop("disabled"));
}, 1000);
/* Here I've used each of the two possible options
to provide half of the styling you wanted.
You'd obviously just choose one of them and use
it to handle both parts of the styling.
*/
input[type=button][disabled] {
color: red;
}
input[type=button]:disabled {
opacity: 0.5;
}
<input type="button" value="This is enabled">
<input type="button" disabled value="This is disabled">
<input id="toggle" type="button" value="This one goes back and forth">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Here is one way you can add the styling:
<button class="btn-disabled" disabled> Test </button>
button:disabled.btn-disabled {
opacity: 0.5;
}
$("button").addClass( "btn-disabled" );
Related
I'm clicking on a checkbox to add some animation to a div, but when I want this animation to disappear I can only make it happen through $(document) click. Checkbox must add and then remove the class.
JS
$('#inOrder').click(function(e) {
$('.border').addClass('colorsborder');
e.stopPropagation();
$(document).click(function(e) {
$('.border').removeClass('colorsborder');
});
});
$('#inOrder').click(function(e) {
e.stopPropagation();
});
HTML
<input id="inOrder" type="checkbox" />
You may call toggleClass() method on the jQuery object (element) that you want to add or remove the class from. The method toggleClass will either:
add the desired class when the element doesn't have it.
or remove that class when the element has it already.
Here's a basic, live demo to illustrate the functionality:
const checkbox = $('#inOrder'),
relatedDiv = $('#related');
checkbox.on('change', () => relatedDiv.toggleClass('custom'))
/** just for demo purpose */
#related {
margin: 15px 0;
padding: 10px;
border: 1px solid #ccc;
}
#related.custom {
border-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="inOrder" type="checkbox" />
<div id="related">My appearnace will change on checkbox click</div>
The above demo is pnly meant as a showcase of a possible solution that could be applied to your current problem and it WON'T do the exact thing you want to have unless you apply the required changes you need to suit your actual code/structuring.
Then you want to toggle the class not add it when you click on checkbox
$('#inOrder').click(function(e) {
$('.border').toggleClass('colorsborder');
....
I'm searching online and I didn't find anything.
I'm trying to update the placeholder color of a textbox using javascript, but how can I do that?
I have a color picker and the color is changing.
If I have something like this in my CSS, how can I update it?
::placeholder {
color: red;
}
<input placeholder="placeholder" />
Is there a javascript command to edit this?
Something like
document.getElementById('text').style.placeholderColor = newColor;
Use CSS variables. You can also target only the needed element
function update() {
document.querySelector('input[type=text]').style.setProperty("--c", "blue");
}
::placeholder {
color: var(--c, red);
}
<input type="text" placeholder="I will be blue">
<input type="number" placeholder="I will remain red">
<button onclick="update()">change</button>
CSS variables are useful when it comes to modify pseudo elements that you cannot access with JS such as :before/:after/::placeholer/::selection, etc. You simply define your custom property that you can easily update on the main element and the pseudo element will inherit it.
Related : Selecting and manipulating CSS pseudo-elements such as ::before and ::after using jQuery
As stated in the other answers, you cannot change pseudo-element styles inline. However, you can modify the CSS rule in the <style> itself, and you don't need a browser support ing CSS variables for that. Access the stylesheet and either get the existing rule or insert your own, then play with its style declarations like you would with an element .style:
const {sheet} = Object.assign(document.head.appendChild(document.createElement("style")), {type: "text/css" });
const placeholderStyle = sheet.rules[sheet.insertRule("::placeholder {}")].style;
placeholderStyle.color = "red";
Object.assign(document.body.appendChild(document.createElement("input")), {
type: "button", value: "Color!", onclick() {
placeholderStyle.color = "#"+Math.round(Math.random()*0xFFF).toString(16).padStart("0",3);
}});
<input placeholder="placeholder" />
There is another approach, but it's somewhat hacky: use JS to append more CSS to the end of the body. Browsers will override current CSS with the newest CSS, assuming the rules are identical.
function changeColor(toColor) {
addCSS = document.createElement('style');
addCSS.innerHTML = "::placeholder { color: " + toColor + "; }";
document.body.append(addCSS);
}
::placeholder { color: green; }
<input type="text" placeholder="placeholder">
<button onclick="changeColor('red')">red</button>
<button onclick="changeColor('blue')">blue</button>
The snippet below works without needing to make any changes to any existing CSS. You would need to modify it to work with your color picker, but hopefully this will give you something to start with.
const placeholder = document.createElement("style");
placeholder.innerHTML = `::placeholder { color:red;font-weight:bold;font-size:1.25rem;} #plchld { font-size:1.25rem;text-align:center; } `;
const plchld = document.getElementById("plchld");
plchld.addEventListener("click", function () {
plchld.setAttribute("placeholder", "Now I'm Bright Red!");
document.form.appendChild(placeholder);
});
plchld.addEventListener("blur", function () {
plchld.setAttribute("placeholder", "now I'm a dreary gray again...");
document.form.removeChild(placeholder);
});
<form name="form" action="">
<input type="text" id="plchld" size="28" placeholder="I'm currently a dreary shade of gray...">
</form>
If the placeholder color semantics depends on some state, it can be set indirectly
::placeholder { color: green; }
.warn::placeholder { color: red; }
<input id="test" placeholder="hello">
<button onclick="test.classList.toggle('warn')">Warning!</button>
In many cases this doesn't require javascript at all:
::placeholder { color: green; }
.color::after { content: 'green'; }
:checked + .color + ::placeholder { color: red; }
:checked + .color::after { content: 'red'; }
<input type="checkbox" id="color01">
<label class="color" for="color01">Color: </label>
<input placeholder="hello">
I have a form with an input with the attribute required set. When i submit the form and the input is empty, it shows a red border around it.
I am now looking for a javascript method to remove this, and reset the display of the input to the initial state.
After resetting and submitting again, the input should be checked again and show a red border if empty. Therefore i think setting css with :required does not give the desired solution.
A quick fiddle to illustrate my question:
jQuery(function() {
jQuery('#reset').click(function() {
//Clear red border of input
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myform">
<input id="myinput" required>
<input type="submit" value="submit">
</form>
<button id="reset">reset</button>
After clicking reset, the form should be shown as when the page is just loaded.
Edit
I tested this in firefox. In chrome the style automatically is removed when the element is onfocussed. However, i am still looking for a js solution to remove the message.
Edit, Updated
I want to reset the style, not prevent it from happening (when i dont
focus on it).
You can add a className to #myinput element which sets box-shadow to none and border to inherit at click on #reset element. Remove className at focus or change event on #myinput element, depedning on whether you want the box-shadow and border removed at focus on invalid input, or when user inputs a value.
.reset:-moz-ui-invalid:not(output) {
box-shadow: none;
border: 1px solid inherit;
}
When submitted, it shows a message like "This field is required". This
is removed when i unfocuss, but i am looking for a js method to remove
that message.
You can use invalid event, .setCustomValidity(" ") with a space character as parameter, called on event.target within handler.
You can use css :focus, :invalid to set border to red only when input gains focus and input is invalid. At html can add pattern attribute with RegExp \w+ to set input to invalid if value of input is empty string or only space characters
jQuery(document).ready(function() {
jQuery("#reset").click(function() {
jQuery("#myinput").addClass("reset")
});
jQuery("#myinput").focus(function() {
jQuery(this).removeClass("reset")
})
.on("invalid", function(e) {
e.target.setCustomValidity(" ");
})
})
#myinput:focus:invalid {
border: 1px solid red;
}
#myinput:focus {
outline: none;
}
.reset:-moz-ui-invalid:not(output) {
box-shadow: none;
border: 1px solid inherit;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myform">
<input id="myinput" pattern="\w+" type="text" value="" required/>
<input type="submit" value="submit" />
</form>
<button id="reset">reset</button>
I cannot reproduce it here. But probably your problem is the pseudo-class applied to the input.
Given that you cannot remove pseudo-classes, maybe you can override the style. Something like:
:invalid {
box-shadow: none;
}
:-moz-submit-invalid {
box-shadow: none;
}
:-moz-ui-invalid {
box-shadow:none;
}
If you just need to apply the style when the reset button is clicked, add the styles to your own class and add/remove the class when needed.
The initial keyword makes a CSS property take the browser's default style, if this is what you're looking for...
jQuery(function() {
jQuery('#reset').click(function() {
//Clear red border of input
jQuery('#myinput').css('border-color', 'initial');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style type="text/css">
#myinput {
border-color: red;
}
</style>
<form id="myform">
<input id="myinput" required>
<input type="submit" value="submit">
</form>
<button id="reset">reset</button>
Code below makes that on each click all checkboxes which are not disabled, are checked/unchecked. Also at the first click background of chackboxes parents are chanhging to red.
var clicked = false;
var target = jQuery(".editcheckhour:not(:disabled)");
jQuery(".checkalledit").click(function() {
target.prop("checked", !clicked).closest('label').css('background-color','#c00');
clicked = !clicked;
});
On next click I want to change background color back. So the function will not only check/uncheck inputs but also will alternately change checkboxes parents background.
On this JSFIdle demo only first click change backgrounds.
https://jsfiddle.net/xLg7eszb/1/
Is anybody help me do this?
Try using toggleClass()
var clicked = false;
var target = jQuery(".editcheckhour:not(:disabled)");
jQuery(".checkalledit").click(function() {
target.prop("checked", !clicked).closest('label').toggleClass('bgcolor');
clicked = !clicked;
});
label {
background-color: #558;
color: white;
padding: 5px 12px;
}
label > input:disabled {
opacity: 0.5
}
button {
display: block;
margin-top: 20px;
}
.bgcolor {
background-color: #c00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<label>
<input class="editcheckhour" type="checkbox">onet</label>
<label>
<input disabled class="editcheckhour" type="checkbox">two</label>
<label>
<input class="editcheckhour" type="checkbox">three</label>
<label>
<input class="editcheckhour" type="checkbox">four</label>
<button type="button" class="checkalledit">on / off</button>
Its simple. Add one class to label default in your code and define that class as default color in your css file.
<label><input class="editcheckhour defaultColor" type="checkbox"> onet</label>
<label><input disabled class="editcheckhour defaultColor" type="checkbox"> two</label>
<label><input class="editcheckhour defaultColor" type="checkbox"> three</label>
<label><input class="editcheckhour defaultColor" type="checkbox"> four</label>
the defaultColor class will be in css like
defaultColor {
background-color: #558;
}
another new color will be red like this.
newColor {
background-color: red;
}
on button click simply remove the class and add class to labels on status of the button. To maintain button status write code as:
<button type="button" class="checkalledit" data-status="0">on / off</button>
after click it will change label background first and then change self status.
jQuery(".checkalledit").click(function() {
var status = $(this).attr("data-status");
if(status == 0){
target.prop("checked", !clicked).closest('label').removeClass("defaultColor");
target.prop("checked", !clicked).closest('label').addClass("newColor");
$(this).attr("data-status","1");
}
else{
target.prop("checked", !clicked).closest('label').removeClass("newColor");
target.prop("checked", !clicked).closest('label').addClass("defaultColor");
$(this).attr("data-status","0");
}
});
I have check boxes which I have images set for the labels, and I'm using code which applies an effect when hovered over. However when tested in a fiddle the hover effect stays when selected and doesn't show the actual check tick box, only issue with the fiddle is that this only works on the last checked not all checked.
However when I apply this to my site only the hover effect works, the effect doesn't stay on any selected and the tick boxes stay visible.
The fiddle: http://jsfiddle.net/Zgh24/1169/
The only differences between that in my code is that the DIV it is in also has classes, I'm using bootstrap.
HTML:
<div id="sites" class="navbar navbar-inverse" style="padding:5px">
<input type="checkbox" name="site" id="so" value="stackoverflow" /><label for="so"><img src="http://sstatic.net/stackoverflow/img/favicon.ico" alt="Stack Overflow" /></label>
<input type="checkbox" name="site" id="sf" value="serverfault" /><label for="sf"><img src="http://sstatic.net/serverfault/img/favicon.ico" alt="Server Fault" /></label>
<input type="checkbox" name="site" id="su" value="superuser" /><label for="su"><img src="http://sstatic.net/superuser/img/favicon.ico" alt="Super User" /></label>
</div>
CSS:
.input_hidden {
position: absolute;
left: -9999px;
}
.selected {
background-color: #ccc;
}
#sites label {
display: inline-block;
cursor: pointer;
}
#sites label:hover {
background-color: #ccc;
}
#sites label img {
padding: 3px;
}
JS:
<script>
$('#sites input:checkbox').addClass('input_hidden');
$('#sites label').click(function() {
$(this).addClass('selected').siblings().removeClass('selected');
});
</script>
So my issue is sort of 2, I have a Fiddle which sort of does what I want, and then the fiddle I do have doesn't full work when I implement it.
I'm assuming I possibly have some css which is conflicting with that I'm trying to do, but I don't see how or what.
Any help is very appreciated -Tom
You could use only CSS pseudo class :checked and targeting next sibling label:
input[type=checkbox]:checked + label img
Finally, you should use as CSS rules:
#sites label:hover img,
#sites input[type=checkbox]:checked + label img {
background-color: #ccc;
}
DEMO jsFiddle
FYI, you could wish in some case to use instead of checkboxes radio buttons as in this jsFiddle:
http://jsfiddle.net/Zgh24/1173/
That could let you use persistant style on some element using only CSS with radio buttons hiddden:
http://jsfiddle.net/Zgh24/1174/
May be not sure.. the class .selected is used by bootstrap core and that style is applied to your label element.
Use your browser to see what style is applied.