How to create dynamically (working even after editing element background on 'inspect element' option in the browser) text color based on background? I would like it to work on all divs in the body section.
HOW IT SHOULD WORK? Example:
There’s container div with background white (specified in CSS), text is default black (not specified in CSS). I run dev tools -> inspect element and with them I change the container background color from white to black.
Result? The text has also changed - from the default black to white, dynamically - based on the background color. you did not even have to refresh the page. this is how it all should work. Question: how to create that in Javascript, it is possible?
Deeper explain in the comment section
You can use the invert function of css without using JavaScript. Just use the same color for the background and the text, and then add the following code to the css of the text and that's it:
filter: invert(100%);
Related
I have a random image generator, and I have it put inside of a div. Is there a way to change the background color of the div according to which image in generated? (Keep in mind when answering that I'm very new to JavaScript)
I've tried adding in div tags around the images in the JS for the generator, but HTML doesn't work inside the script tag (which I figured it wouldn't, but you never know).
I've also tried using
document.body.style.backgroundColor = "insert color here";
but it changes the entire background of the page, and I only want the background of the div to change.
The colors in the images are not what I want to change the background color to. I want to set the background color to a color that is most likely completely different. The only thing I want to know is if it's possible and how to do it.
Ex: The webpage loads x image, so I want the background color of the div to change to purple. When it loads y image, I want the bg color to change to blue, and so on.
This probably seems like a noob question, but if it is possible, how do I do it? Would I need to use CSS or HTML, and if so, what would I use?
You can do this with Color Thief, it identifies the dominant color in an image.
http://lokeshdhakar.com/projects/color-thief/
https://github.com/lokesh/color-thief
It's pretty simple to set up, download/clone the source files and make sure to include the color thief script in your HTML
<script src="js/color-thief.min.js"></script>
Then in your script:
var colorThief = new ColorThief();
colorThief.getColor(sourceImage);
You can then use this value to set your background color dynamically
document.querySelector('boxx').style.backgroundColor = colorThief.getColor(sourceImage)
I have a CKEditor for editing the content of a blog. Sometimes there are blogs that got dark background color and therefore use white as font color. As the default background color of CKEditor text editing area is white, all text can only be seen with highlight.
While I want something like this (but only when the font color is white):
I am using CKEditor 4.6. How can I change the background color of the CKEditor on the fly according to the font color the user choose?
One option would be to use the Div Editing Area add-on, to inherit the web page CSS styles (font color and background color):
This plugin uses a <div> element (instead of the traditional <iframe>
element) as the editable area in the themedui creator. Much similar to
inline editing, it benefits from allowing the editor content to
inherit from host page styles.
Is there a way to change the fill color of the path of an svg image used as a cursor (like so: cursor: url(cur/play.svg), auto;)?
I don't know the color before i hover the element so it has to be a CSS or a JS solution (i can't just make another svg in advance).
No that isn't possible. The CSS cursor rule loads an external resource and can't pass a parameter, nor can an SVG read the color underneath it.
Make a good cursor with a color contrasting fill and line and it should be visible everywhere.
If you have option to generate SVG file then it's possible.
Theme Option or something has changed color of cursor then Option will generate your assets SVG regenerate to your own color. Then if you refresh the front then cursor color will be changed.
That's the only way.
im creating a way for users to add some buttons to their image. Now i thought it would be cool if the button could change color depending of the background color of the image.
To start with i wanted to go for the black / white contrast.
So if the background is white then the button will be black and if the background color is black then the button should be white.
My question is however is it possible to identify the background of an image using only javascript? and if so how?
This will take care of everything for you just set up the selectors for each condition.
https://github.com/kennethcachia/Background-Check
I have an element with a scroll bar (overflow-y: auto).
I set the background-color of my element to a specific color (say, blue). However, the area of the scrollbar remain with a white background color.
How can i change the scrollbar area background color to the elements background color?
GWT introduced Custom Scroll Panel from 2.4 version. I think you can give this a try. You should make yourself familiar with CSS Resources if you want to change colurs, images and all. You can also refer the following links
GWT CustomScrollPanel example
http://css-tricks.com/custom-scrollbars-in-webkit/
You can't change the colors of the scrollbar. You will have to use 3rd party scroll bar replacement.