I have the color theme of a website I'm working on change on refresh and would like to display the css background color attribute in my HTML. Is that possible?
i.e.
<footer>The color of the moment is <insert the background color attribute>. Refresh for a makeover</footer>
would display something like
"The color of the moment is #DB0C0C. Refresh for a makeover"
Since the hex color changes based on the style sheet loaded, I don't want to hardcode it. If I had a ruby variable #color which = #ff0000 and wanted to display it in html I could do something like
<%= #color%>
I'm wondering if there is any way to do something similar to access a CSS attribute.
You don't even need jQuery for this.. you can use just vanilla javascript with .getComputedStyle():
<span id='color-map'></span>
var element = document.getElementById("id-goes-here");
var style = window.getComputedStyle(element);
document.getElementById('color-map').innerHTML = style.backgroundColor;
However, it would appear that this does not give the color as a hex, but rather an 'rpg(x, y, z)' string. To get the hex from that, you can parse it using regex and return the result:
function rgbsToHex(str) {
var hex = "#";
var matches = str.match(/rgb\((\d+),\s(\d+),\s(\d+)\)/);
hex += Number(matches[1]).toString(16);
hex += Number(matches[2]).toString(16);
hex += Number(matches[3]).toString(16);
return hex;
}
DEMO
You can use the .css() function in jQuery.
$('footer').find('span').text($('.bg').css('background-color'));
This will give you the color in rgb, if you would like to show it in HEX then check this for more info.
Related
I'm a very basic coding person that needs something to work, but IDK how. I have a website where I have 4 images. When you hover over those img they become slightly darker, but I wish there was a way to show some text as well (preview of how it should work: https://imgur.com/a/r5cOW2R)
Here's the link to my GitHub code: https://github.com/Ezzol/HCI-Portfolio
Can anyone explain to me what I need to do to add that hovereffect you can see in my design at the imgur link?
You would want to use the CSS hover event. Here's a good example on how to do that.
https://www.w3schools.com/howto/howto_css_image_overlay.asp
you probably need to use javascript as well, and do an EventListener to tell when it is being hovered over, and then use .style to change it, for example:
var text = document.getElementById("text");
var exampleimg = document.getElementById("exampleimg");
exampleimg.addEventListener("mouseover", examplechange);
exampleimg.addEventListener("mouseout", examplechangeback);
function examplechange(event)
{
text.style.display = "block";
}
function examplechangeback()
{
text.style.display = "none";
}
add a h1/h2/h3/p element to your page, and give it the id "text" then style it how you want and set the display to none.
Need to find the button color into human-readable format below code is returning rgba value
Here is my code:
WebElement findbuttonColor = driver.findElement(By.id("color"));
String color = findbuttonColor.getCssValue("background-color");
System.out.println("Button color is :"+color);
I am not sure what human-readable format mean, there are millions of colors which is possible to set for the element. Far not all of them have the names like green, blue, red, etc.
You get the value in rgba because the designer set up the value in rgba. The thing you could do is to define a structure that would map some well-known color codes to rgb (even not considering alpha channel) so that you could pich the "human-readable" format from that map.
Here is the example that might give a clue: Convert RGB values to color name
You can get the element color(Background color of element) by:
element.getCssValue("background-color");
You can get the element text/caption color by:
element.getCssValue("color");
For example if you want to get the background and text color of "Sign in" button for LinkedIn, the code is as follows:
driver.get("https://www.amazon.com/");
String buttonColor = driver.findElement(By.id("searchDropdownBox")).getCssValue("background-color");
String buttonTextColor = driver.findElement(By.id("searchDropdownBox")).getCssValue("color");
System.out.println("Button color: " + buttonColor);
System.out.println("Text color " + buttonTextColor);
When you do getCssValue(), it return rgb value. You can convert it into hex by using below
backgroundColor = element.getCssValue("background-color");
Color.fromString(backgroundColor).asHex();
this returns hex code, something like "#def3ff". You can later compare it with your availbale hexcode in yous css.
Assert.assertEquals(def3ff, ExpectedHexCode);
Note:
You can get hex code of your element by inspecting it > Styles. Refer below screenshot for details
how to get Hexcodefrom
Thank You,
I've created a small text editor window that allows the user to change some basic properties of a text area included within the screen. Two of the options available to change the properties of the textArea are font color and font color fill, which are both handled by separate color pickers.
I ran into an issue when testing these buttons using the setStyle method that only one property could be saved at a time. Example, if text color was set to BLUE, and afterwards fill color was set to YELLOW, text color would not remain blue, but instead revert back to its default defined in the stylesheet (black).
To fix this problem, I have created the following method;
private void updateTheSyle()
{
this.textArea.setStyle("-fx-control-inner-background: " + toRgbString(this.colorPickerFill.getValue()) +
"; -fx-text-fill: " + toRgbString(this.colorPickerFont.getValue()) + ";");
}
The toRgbString() method is also called, this is simply passing the user input from the color picker into a string such that the setStyle method can pass the correct parameters to the stylesheet.
This solution does work, as it enables me to change both the fill and the font color without reverting back to default upon selection. However, my program includes more than just fill and font color, which will contribute to a far longer setStyle statement as these options are added.
TLDR: Is there a way to edit a single style included in a CSS stylesheet without affecting the other styles in a given class?
For your first question (longer setStyle statement), If we take into account that the style is defined by a String, and it takes a whole set of details to provide for a single Style, so why not use a List<String> :
List<String> example = new ArrayList<>();
String style = "";
//For example if you use 2 textField to get the (value) and (type):
example.add("-fx-"+textFieldType+":"+textFieldValue + "; ");
//To gather all the properties in a single string
for(String property: example){
style += example;
}
yourNode.setStyle(style);
I do not know if there is a better approach but it works, good luck !
Edit :
I think this tip answers your second question:
private void Update(String type,String newValue){
for(int i = 0; i < example.size(); i++){
if(example.get(i).contains(type)){
example.set(i, "-fx-"+type+":"+newValue + "; ");
//Here you add a (break;) to not alter the other similar styles !
}
}
//Here you use a loop to update the new elements changed
}
I hope this will help you solve your problem !
When the user marks a text, he can define a backgroundcolor with the colorpicker (textcolor.plugin).
Once saved he can change the background-color but not get rid of it.
background-color:white is no solution as the bodycolor can be RGB or even a picture.
How is the colorpicker to configure to remove the style-tag or at least insert a background-color:none?
Found a solution changing the plugin (textcolor). If there is a better way please be free to post it.
I added additional colors to the colorpicker. The Color #FFFFFe (near White) i marked as NO COLOR and changed the plugin as shown.
function onPanelClick(e) {
var buttonCtrl = this.parent(), value;
if ((value = e.target.getAttribute('data-mce-color'))) {
buttonCtrl.hidePanel();
value = '#' + value;
buttonCtrl.color(value);
if (value == '#FFFFFe') { //Changing the value to -1 causes deletion :-)
value = -1;
}
editor.execCommand(buttonCtrl.settings.selectcmd, false, value);
}
}
Researched a bit more since the given answer did not work in my version 4.5.0 of tinymce.
The textcolor plugin uses 'editor.formatter.remove(...)' to remove text color or background color upon selecting 'x' in the last option of the color palette for 'no color'.
While that function is used elsewhere successfully in tinymce (e.g. when removing italics from text), in the context of the textcolor plugin it does not remove color formatting.
Solution:
Replace the following in the textcolor's plugin.js:
editor.formatter.remove(format, {value: null}, null, true);
with:
editor.dom.removeAllAttribs(editor.selection.getNode());
...or in the minified version plugin.min.js:
a.formatter.remove(b,{value:null},null,!0),
with:
a.dom.removeAllAttribs(a.selection.getNode()),
...and things start working as intended.
I need a way to allow each letter of a word to rotate through 3 different colors. I know of some not so clean ways I can do this with asp.NET, but I'm wondering if there might be a cleaner CSS/JavaScript solution that is more search engine friendly.
The designer is including a file like this for each page. I'd rather not have to manually generate an image for every page as that makes it hard for the non-technical site editors to add pages and change page names.
Here is some JavaScript.
var message = "The quick brown fox.";
var colors = new Array("#ff0000","#00ff00","#0000ff"); // red, green, blue
for (var i = 0; i < message.length; i++){
document.write("<span style=\"color:" + colors[(i % colors.length)] + ";\">" + message[i] + "</span>");
}
On the server-side you can do this easily enough without annoying search engines AFAIK.
// This server-side code example is in JavaScript because that's
// what I know best.
var words = split(message, " ");
var c = 1;
for(var i = 0; i < words.length; i++) {
print("<span class=\"color" + c + "\">" + words[i] + "</span> ");
c = c + 1; if (c > 3) c = 1;
}
If you really want dead simple inline HTML code, write client-side Javascript to retrieve the message out of a given P or DIV or whatever based on its ID, split it, recode it as above, and replace the P or DIV's 'innerHTML' attribute.
There’s definitely no solution using just CSS, as CSS selectors give you no access to individual letters (apart from :first-letter).
I'd rather not have to manually generate an image for every page
Then generate the image automatically.
You don't specify which server-side technology you're using, but any good one will allow you to manipulate images (or at least call an external image utility)
So the non-technical users would just need to do something like this:
<img src="images/redblueyellow.cfm/programs.png" alt="programs"/>
And the redblueyellow.cfm script would then either use an existing programs.png or generate a new image with the multiple colours as desired.
I can provide sample CFML or pseudo-code to do this, if you'd like?