CSS background colour validity - javascript

I am adding a div dynamically and adding background colors to these divs. The background color values are coming from the backend, so one div for each colour is added and its background colour is set to that colour. But if some colour that is not valid for CSS background color property comes through, it shows as a white background.
For example 'Leopard' colour. Is there any way to validate colous and not add the div if the color is not a valid background colour?

Make a list from the W3 Specifications.
Then check to see if your color is in that list. Here is an example.
colors = ['lime', 'orange', 'pink'];
if (colors.indexOf(the_color) >= 0) {
// Set background
}

I would absolutely avoid using named colours (eg. red, white, etc...) while using instead the standard hex declaration, eg:
#FF0000 = #F00 = red
#000000 = #000 = black
#ffffff = #fff = white
#ac25B1 = some other *unnamed* colour
This way, you could easily check that the string is a valid HEX string, either 6 or 3 character long.

I think you could re-use this question's solution.
It involves a jQuery script that checks if the submitted color really produces RGB values. I'm copy-pasting it.
colorToTest = 'lime'; // 'lightgray' does not work for IE
$('#dummy').css('backgroundColor', 'white');
$('#dummy').css('backgroundColor', colorToTest);
if ($('#dummy').css('backgroundColor') != 'rgb(255, 255, 255)' || colorToTest == 'white') {
alert(colorToTest+' is valid');
}
Here's how it works:
First, the colorToTest variable is set to the color you wish to validate;
Then, the background of the target div (#dummy in this case) is set to white via jQuery;
At last, the background of the target div is set to colorToTest.
If the color is still white, and colorToTest is not White, the backend color is not valid.
However, since an unvalid color won't produce any layout, you could just set the div background to white and then apply the backend color. If it's vaild, it will change. You could however use the above script to validate it, if you wish.

Related

Change colour of text foreground based on background color input

I have an input element which allows users to set the background colour of the input element.
When the user sets the background colour of the input element, I want the text in the input element to be a contrasting colour to the original colour.
For example: The user inputs "black" as the input background colour; then the text colour of the input will be white. However if the user inputs "white" as the input colour, the text colour would be black. (There are more cases than just black or white.)
How would I achieve this? I know that you can use another element on top of a background and set mix-blend-mode, but I don't want to because that would remove the point of the input.
Thanks!
You could calculate if black or white would have a higher contrast with the color given by the user based on the hexadecimal value of the color.
This link goes into detail on two ways to do this calculation.
https://24ways.org/2010/calculating-color-contrast/

Remove alpha ClutterActor

I have a clutter actor and I need it to be painted without transparency. I can get the background color and set alpha to 255, but that doesn't work with background images or border images. They are defined through CSS by the user, so I can't just edit them.
What I currently do to remove the background-color alpha:
let color = actor.get_background_color();
color.alpha = 255;
actor.set_background_color(color);
I am not who writes the actor. I'm a user of the actor so I can't rewrite its paint methods. Any way to flatten it?

Change Table's Color With JavaScript

I am trying change table's color from blue to red with JavaScript.
function change(idElement){
var element = document.getElementById(idElement);
if(element.style.background = "#00BFFF")
element.style.background = "#800000";
else{
element.style.background = "#00BFFF";
}
}
This is my JavaScript code. It changes color one time, but I want to change its color again its old color when it is clicked.
First Problem - Assignment vs Equality
Your first problem is that you are using an equals sign which is always assigning a value, rather than checking the value as a condition:
if(element.style.background = "#00BFFF")
should be
if(element.style.background === "#00BFFF")
Second Problem - Normalized Color Formats
The second problem is that in some browsers, you can set the background color of an element, but then when you query it, you will see it in a normalized format. For instance, in Chrome, if you open up the dev tools and run the following command document.body.style.backgroundColor = "#FF0000", you will see the background turn red as you expect. However, if you immediately type document.body.style.backgroundColor, it will report the color in rgb format as rgb(255, 0, 0).

Swapping pixels in an icon with javascript?

I have a menu made up of icons and labels. When an icon is clicked the relevant label turns blue. I've recently heard about a technique called swapping pixels, and I wondered if it was possible to make the icon turn blue also?
Pure Javascript if possible!
This is the code that I have at the moment...
function init() {
[].forEach.call(document.querySelectorAll('.navico'), function(el) {
el.addEventListener('click', imageButtonClickHandler);
});
function imageButtonClickHandler() {
this.id.search("aboutnav");
if(this.id.match("aboutnav")) {
grey();
var a = document.getElementById("a");
a.style.color = 'blue';
a.style.fontSize = '15px';
}
the function 'grey' that gets called in the function above is JQuery and was created by my partner so I don't understand it, but it basically turns the selected menu option back to grey after it is deselected or a different icon is clicked.
Thanks in advance.
If the icon is an image, there isn't a way to use JavaScript to modify the image directly. There are, however, techniques for modifying how images look by using other images.
For example, if "turning the icon blue" meant that you wanted to change a specific pattern of colors in the icon you could create another image with just the parts you want to turn blue and everything else in the image transparent (think cut-out). Then, position the image at the same location as your icon with a higher z-index but set its visibility:hidden (or display:none, if you'd rather). Then turning the image blue would just mean showing the image.
If turning the icon blue meant that you wanted it to just have a blue "tinge" to it, you could create a semi-transparent png and use the same technique. You could also accomplish a blue tinge by just creating an element (say a div) and setting the background color to blue, then setting the transparency. In this way you could choose arbitrary colors instead of having to create an image for each color you wanted to use.

How browser handles CSS color names in the source code

Is there a way to override how javascript converts complex CSS color names to rgb values when applying them to DOM elements.
For example: document.getElementById("colorMe").style.background = "lightblue"
will set the div.style object with a background = rgb(...).
However, document.getElementById("colorMe").style.background = "blue"will set the div.style object with a background = blue.
I would like to bypass how javascript is converting that color into an RGB value for complex color names. Is this possible?
The normalised format for CSS colours is rgb(R,G,B) for opaque colours, and rgba(R,G,B,A) for semi-transparent ones. No matter what you give as input, it is converted to one of these formats as output, and there's nothing you can do to chnge that.
However, you can save the name elsewhere, like this:
elem.setAttribute("data-color",elem.style.color = "lightblue");
Then just get elem.getAttribute("data-color") and you have your lightblue input.
There's a standard called webcolors...
http://en.wikipedia.org/wiki/Web_colors
When your browser reads lightblue it just translates it to 173 216 230.

Categories

Resources