When I retrieve "rgb(18, 115, 224)" from a DOM element, I need to convert this color to hexadecimal in order to assign it to a span element. To get the hexadecimal equivalent of the color, I can use the following code snippet:
"#" + componentToHex(r) + componentToHex(g) + componentToHex(b)
My question is, how do I extract the individual r, g, and b component values from "rgb(18, 115, 224)?"
My goal is to apply the color (whatever it may be) to a span element.
No need, you can simply use rgb(18, 115, 224) directly as a CSS color value. (However, if necessary, see below for obtaining the hexadecimal code.) Here's an example:
$("#the-span").css("color", "rgb(18, 115, 224)");<span id="the-span">I'm the span</span>Alternatively, without jQuery, here's how you can do it:
document.getElementById("the-span").style.color = "rgb(18, 115, 224)";<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span id="the-span">I'm the span</span>However, if you really need the hex value for some reason:
function getRGB(str) {
var result = /rgb\((\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*\d+\s*)?\)/.exec(str);
if (result) {
return "#" +
toHex(+result[1], 2) +
toHex(+result[2], 2) +
toHex(+result[3], 2);
}
return undefined;
}
// Note that this is a basic toHex function only suitable for this purpose
function toHex(num, min) {
var hex = num.toString(16);
while (hex.length < (min || 0)) {
hex = "0" + hex;
}
return hex;
}
function test(str) {
display(str + " => " + getRGB(str));
}
test("rgb(18, 115, 224)");
test("rgb(18, 115, 224, 50)");
function display(msg) {
var p = document.createElement('p');
p.innerHTML = String(msg);
document.body.appendChild(p);
}This function accounts for the possibility of a fourth (alpha) argument, even though we don't utilize it in this case.
No conversion is required; To apply this value as the color of a span, use the following code:
var myColor = "rgb(255, 69, 0)";
$('#spanID').css('color', myColor);
Using Ajax, I attempted to set an Interval for my Google Chart, but unfortunately, the Chart is not being drawn. Instead, I repeatedly receive the error message: "Data table is not defined." every 5 seconds. If you want to see a screenshot of the error mes ...
While browsing through this particular question, I came across a method in node.js to distinguish between html requests and json requests: app.get('/route', function (req, res) { if (req.is('json')) res.json(data); else if (req ...
One issue I encountered involved having an index.tsx file containing all the shared UI components. When I exported the Footer and imported it into my shared Layout.tsx, which is utilized across all pages, the browser would refresh the page every time a cha ...
When it comes to limiting text to a specific width, using white-space:nowrap is usually the go-to solution. However, I am facing a unique challenge where I need to make sure my header text fits within a specific width. I initially tried adding individual ...
How can I successfully implement nested views, where after logging in the user is redirected to in.html, and all links within in.html are directed to a ui-view? Currently, all links redirect to a new page. index.html <!-- more HTML --> <body ng- ...
ArrayOrdered :[ { name :"PRODUCT 1", price :"20", amount:"10", Total 1:" ", discount : "" , Total 2:" " }, { name :"PRODUCT 2", price :"50", amount:"20", Total 1:" ", discount : "" , Total 2:" " }, { name :"PRODUCT 3", price :"15.5", amount:"10", Total ...
After running the code provided, I find that the data returned is in an array format but unfortunately not easily referenced. AJAX: $.ajax({ url: './FILE.php', type: 'post', data: {'action': 'allfolders'}, ...
There is an undefined error in rendering when using the Swagger Editor. Here is the code snippet: swagger: '2.0' info: version: 1.0.0 title: AccountBalance host: localhost:2625 basePath: /accountbalance schemes: - http - https consumes: ...
I have searched extensively online but haven't been able to find a solution for this issue. How can I disable these zurb foundation 5 meta tags in the <head>: <meta class="foundation-mq-small"> <meta class="foundation-mq-small-only"> ...
/* This function clears the default text in a field when clicked on */ $('#edit-field-activity-notes-und-0-value') .each(function() { $(this).data('default', this.value); var mybackground = $(this).css('backgroun ...
I am currently facing an issue where I need to send both form input text and a client-side resized image to a php page. The image upload works fine, however, the text data appending seems to be causing problems. var xhr = new XMLHttpRequest(); xhr.onr ...
I'm currently in the process of developing a function within the constructor, and it is essential that this function be placed inside the constructor. I am interested in implementing a button to trigger this function from an external source, but unfor ...
I have a need to serialize a list of objects in a specific way: Imagine I have the following C# class: public class Test { public string Key; public string Value; } List<Test> tests; When I serialize this list (return Json(tests.ToArray()) ...
Objective: I am aiming to enhance the image upload functionality by enabling users to click on an <img> element to initiate the file selection process, instead of using the traditional <input type="file"> button. There will be three placeholde ...
Setting up Global.asax: void Application_Start(object sender, EventArgs e) { RouteTable.Routes.MapConnection<myconnection>("echo", "echo/{*operation}"); } Creating myconnection.cs: public class myconnection : PersistentConnection { ...
Adding a file upload field on the WooCommerce checkout page is not supported natively due to security reasons. I am in need of a way to incorporate a file upload field so that customers can provide a document to be attached to their order for future refere ...
I am facing an issue with integrating tinymce with webpack. It assigns a property called tinymce to window, so one solution is to use the following syntax to require() it (as explained in the bottom of the EXPORTING section of the webpack documentation): ...
Currently, my project has the following structure and I am facing an issue while trying to access db.js from CategoryController.js. The code snippet I have used is as follows: var db = require('./../routes/db'); Upon attempting to start the No ...
In my experience with React, I've noticed two different ways of importing and extending components. The first way that I typically use is shown below. import React from 'react'; class SomeClass extends React.Component { //Some code } ...
Is there a way to create a carousel in Bootstrap 3 where only one div slides at a time, instead of three? I attempted to use divs instead of images in the traditional carousel structure, but it's not functioning as expected. I'm looking for some ...