Change richselect's input color - javascript

I wonder if it's possible to change the input's color in runtime.
Here's my select (Webix ui.richselect): http://webix.com/snippet/c64f9b12
{
view:"richselect", label:"Status", options:[
{ id:1, value:"Done", $css:"done" },
{ id:2, value:"Processing", $css:"process" },
{ id:3, value:"On hold", $css:"on-hold" },
{ id:4, value:"Failed", $css:"failed" },
],
on:{
onChange:function(newV, oldV){
webix.message("Status changed to "+this.getList().getItem(newV).value)
}
}
}
Each $css key related to the CSS class that is applied to the item.
<style>
.webix_list_item.done {
background:#ddf7dd;
}
<!-- . . . -->
.webix_list_item.webix_selected {
color:black;
font-weight:bold
}
</style>
After changing the richselect's value, I need to set the background color of the newly selected item as the background color of the richselect.
In my opinion, it can be done through the onChange event, but I have no idea how exactly I can solve it.
Any suggestions? Thanks in advance.

Here is your solution:
http://webix.com/snippet/08e187a7
1) First, dynamically get the class name of the element clicked in order to fetch that element
var className = ".webix_list_item." + this.getList().getItem(newV).$css;
var element = document.querySelector(className);
2) Next, just get the computed background color of that element and set the same to the "newly selected" element.
document.querySelector(".webix_el_richselect .webix_inp_static").style.backgroundColor = window.getComputedStyle(element,null).getPropertyValue("background-color");
I have written it one line, you could may be create variables and break it into more statements. say something like -
var clicked_bgcolor = window.getComputedStyle(element,null).getPropertyValue("background-color");
document.querySelector(".webix_el_richselect .webix_inp_static").style.backgroundColor = clicked_bgcolor;
I prefer doing these 2 in one line though(above mentioned).
So your final onChange code would be :
on:{
onChange:function(newV, oldV){
webix.message("Status changed to "+this.getList().getItem(newV).value);
var className = ".webix_list_item." + this.getList().getItem(newV).$css;
var element = document.querySelector(className);
document.querySelector(".webix_el_richselect .webix_inp_static").style.backgroundColor = window.getComputedStyle(element,null).getPropertyValue("background-color");
}
}
Let me know if any issues.
PS: Try to use JQuery more often, you could avoid such lengthy complicated JavaScript statements.

Thanks #Nikhil for the answer, it helped me to apply my combo logic on the richselect in the webix way.
So, the difference was that in the combo i was applying the style on the input and it was working but for the richselect applying the style on input was wrong rather i have to apply on the .webix_inp_static .
1. CSS
In your style for each of your custom css on webix_list_item you have to also add css for .webix_inp_static as shown:
<style>
.done .webix_inp_static,.webix_list_item.done {
background:#ddf7dd;
}
</style>
2. onChange function
You have to removeCss on the oldV if existing and addCss on the newV as:
onChange:function(newV, oldV){
if(oldV) webix.html.removeCss(this.getNode(), this.getList().getItem(oldV).$css);
if(newV) webix.html.addCss(this.getNode(), this.getList().getItem(newV).$css);
}
Please check the snippet here.

Related

How do i change the color of an appended string?

I've a div
<div class="display-container"></div>
Inside this div i want to append some text using a JavaScript event listener
const calculatorDisplay = document.querySelector(".display-container")
function appendNumber(number) {
calculatorDisplay.append(number)
}
// number event listener
one.addEventListener("click", () => {
calculatorDisplay.append(1)
})
it work perfecly, but the problem here is that the background color of the display-container div is black, and the default color for string is black, so, how do i change the color of an appended string?
i've already tried using the style tag, but that does not work, i've tried using fontcolor() too, but that too doesn't worked.
I've noticed that the appended string have an id of #text, but i cannout use it if i try.
Define css class
<style>
.colored-text {
color: red;
}
</style>
And then create span element with colored-text class and append it
// number event listener
one.addEventListener("click", () => {
const newSpan = document.createElement('span');
newSpan.classList.add('colored-text');
newSpan.textContent = 1;
calculatorDisplay.append(newSpan);
})
BTW. why are you defining appendNumber function and not using it?
There are several ways to achieve this.
javascript
const calculatorDisplay = document.querySelector(".display-container")
// changing the color to red
calculatroDisplay.style.color = 'red';
// it accepts also Hex colors
calculatorDisplay.style.color = '#FF5733'
// OR rgb
calculatorDisplay.style.color = 'rgb(255,0,0)
CSS
It is also possible to append a classname to your div. Like this you could
make the code probably more reusable and may apply more styles than just colors in a simple manner. (There are multiple ways to include CSS in your html, google it^^ )
// within in the <head> tag in the html add a <style> tag.
<html>
<head>
<style>
.red-color {
color: red
}
</style>
</head>
<body>
<!-- ..... --->
</body>
</html>
In the code you can now add a classname using element.classList.add() OR element.classList.remove() to remove classes!
function setRedColor(el) {
el.classList.add('red-color')
}
function removeRedColor(el) {
el.classList.remove('red-color')
}
const calculatorDisplay = document.querySelector(".display-container")
setRedColor(calculatorDisplay)
// ...
removeRedColor(calculatorDisplay)
Note that the element.classList API generally does not allow classnames with a whitespace in it. So if you have mutliple classes you have to apply them one by one or you'll run into an error.
Feel free to leave a comment

Vue2 add class to focused input

froI have a form with many inputs and I want to add a class to focused input label tag and remove class when another input selected.
I make such code
onInputSelected: function(e) {
var label = e.target.previousElementSibling;
label.classList.add('highlight');
}
but how can I remove class from one input and add to another when I change focus?
Updated:
I found solution but looks like it's to complicated :)
data: {
allInputs: document.getElementsByTagName('input')
},
methods: {
onInputSelected: function(e) {
e.target.previousElementSibling.classList.add('highlight');
[].forEach.call(this.allInputs, function (currentValue, index) {
if(currentValue.name == this.name) {
return;
}
currentValue.previousElementSibling.classList.remove('highlight');
}, e.target);
}
}
First of all you're not being very clear what you want to do.
2nd of all you have found solution so just clean up your code.
3rd of all I'd try using el.closest.
const input = document.getElementById('yourInput');
const label = input.closest("label");
// or if you want to add ids to labels
const label2 = input.closest("#yourLabel");
Link to docs
With this solution you will be little bit more save. Couse in yours, lets just imagine that somebody change HTML structure... Then very high risk your code stops working.

Hiding content depending on variable value

I am making a price estimator.
How would correctly write a jQuery function that checks a variable and depending on that amount hides/shows a certain div element accordingly.
So if I had:
a HTML div with the ID 'Answer'
<div id="answer">Hide Me</div>
$("#answer")...
a variable (this variable would change)
var x = 30
Now I know the css to hide the div would be:
#answer{
visibilty:hidden;
}
What would be the correct way to hide the function checking these certain parameters? for example if x > 20 then hide etc
Now I know there will be many ways to do this and they may not require jQuery, please inform me if this is the case. Perhaps it just needs JS. I know there will be many ways to do it not just one so if you have a different way please comment as I am keen to learn.
Any help would be greatly appreciated.
Cheers
F
Note that you can also remove or add a class:
$('#answer').removeClass('hide');
$('#answer').addClass('hide');
But what you want to do is $('#answer').hide(); or $('#answer').show();
Execute this function providing the variable v:
var checkVar = function(v) {
var target = $('#answer');
if (parseInt(v) > 20) {
target.hide();
} else {
target.show();
}
}
For example, if the variable comes form a selection:
$('#selectId').on('change', function() {
checkVar($(this).val());
});
Remove the CSS. You can do it in jQuery
if(x>20){
$('#answer').hide();
}
You can use this one
$("#answer").hide();
#kapantzak's answer looks good. But keep your logic and style separated and if your not going to use the variable for the actual element twice, I wouldn't make it. So go:
var checkVar = function(var) {
var element = $('#answer');
if (parseInt(var) > 20) {
element.addClass('hidden');
}else{
element.removeClass('hidden');
}
}
And in your CSS go:
#answer.hidden{
display: none;
}
Also, depending on your preference, display: none; doesn't display anything of the object whereas visibility: hidden hides the object but the space the object was occupying will remain occupied.
HTML
<input id="changingValue">
...
<div id="answer">Hide Me</div>
CSS (not mandatory if you check values on loading)
#answer{ display:none;}
JS
var limit = 20;
$(function(){
$("#changingValue").change(function(){
if(parseInt($("#changingValue").val())<limit) { $("#answer").show(); }
else { $("#answer").hide(); }
});
});

Need to highlight the label when it is clicked in css or jquery

I need to highlight the label, when it has been clicked. As same way it also needs to highlighted when we select the check-box. i resolve the check-box issue but unable to resolve the label click problem.
I solve the check-box issue by
input[type=checkbox]:checked + label {
background: #D7D5D5;
}
Reference code : http://jsfiddle.net/uU82C/
please help me to solve the label click problem in css, if not then in jquery.
I would change handle the selection in "myclicktest" method and change the css a little bit like this.
label.selected,
input[type=checkbox]:checked + label {
background: #D7D5D5;
}
function myclicktest(event){
var target = event.target;
target.classList.toggle ("selected");
if(target.classList.contains("selected")) {
target.previousSibling.checked = "checked";
}
else {
target.previousSibling.checked = "";
}
}
Note:
I would suggest you not to use inline event registration like this
onclick='myclicktest(event)'
Its very bad idea, you should create elements dynamically and register the event handlers.
var inputEl = document.createElement("input");
inputEl.addEventListener("click", myclicktest);
1) The "for" attribute in the label should be mapped to the "id" of the checkbox.
2) The "id" contains space which is incorrect.
check the fiddle
http://jsfiddle.net/7KxUn/
I took the liberty to change the structure of your mydata
var mydata = { "fulldata":[
{
"child": {
"id":"c1",
"name": "child 1"
}
},
{
"child": {
"id":"c2",
"name": "child 2"
}
},
{
"child": {
"id":"c3",
"name": "child 3"
}
}
]
};
return mydata;
}
Mapped your id data to the checkbox and used for to map to this id.
$('input[type="checkbox"]').on('click', function() {
if ($(this).is(':checked')) {
$(this).css({background: '#D7D5D5'});
}
else {
$(this).css({background: '#FFF'}); // change this to whatever the background color normally is
}
});
The id which was given to the child had spaces in string. Remove it and it will work. If you want your labels to check the checkboxes, you have to keep for attribute of label and id attribute of input type same.
Here is the updated jsfiddle:
http://jsfiddle.net/uU82C/12/
your code was very dirty!!

jquery -Get CSS properties values for a not yet applied class

i have a same question asked here(wasnt able to comment on it,maybe dont have a priviledge) , i want to get css width value defined in stylesheet but not yet applied on any element in dom ,(its bootstrap css with grid with responsive media queries)
.span6 {
width: 570px;
}
However solution provided in above referenced question return 0 i.e like this
$('<div/>').addClass('span6').width();
but works if i do something like this
$('<div/>').addClass('span6').hide().appendTo('body').width();
any easy way without appending that div?
In order to read a CSS property value from a nonexistent element, you need to dynamically insert that element (as hidden) to the DOM, read the property and finally remove it:
var getCSS = function (prop, fromClass) {
var $inspector = $("<div>").css('display', 'none').addClass(fromClass);
$("body").append($inspector); // add to DOM, in order to read the CSS property
try {
return $inspector.css(prop);
} finally {
$inspector.remove(); // and remove from DOM
}
};
jsFiddle here
Great answer by Jose. I modified it to help with more complex css selectors.
var getCSS2 = function (prop, fromClass, $sibling) {
var $inspector = $("<div>").css('display', 'none').addClass(fromClass);
if($sibling != null){
$sibling.after($inspector); //append after sibling in order to have exact
} else {
$("body").append($inspector); // add to DOM, in order to read the CSS property
}
try {
return $inspector.css(prop);
} finally {
$inspector.remove(); // and remove from DOM
}
};
JSFiddle

Categories