Is there a way to automatically parse colors in text and apply them to CSS? For instance, if I type #40464f, I want the color to be caught and included in some CSS styles.
I am familiar with how to achieve this by adding markup:
<span data-color="">#40464f</span>However, I am curious to know if it is possible to do this automatically without manually adding markups?
Uncertain of the specific question, I will offer a method to identify (HEX) colors within an HTML element.
Here is the sample HTML code:
<p id="subject">
Here is a color: #fff. Red is #ff0000 while #9ab57d is another color.
</p>
Utilize JavaScript:
$(function() {
var colorMatches = $('#subject').text().match(/#(?:[0-9a-f]{3}){1,2}/gi);
// ['#fff', '#ff0000', '#9ab57d']
$.each(colorMatches, function(index, value) {
// `value` represents each identified color...
});
});
(See Demo)
Update:
Demo showcasing the usage of colors:
HTML:
<p id="subject">
Here is a color: #fff. Red is #ff0000 while #9ab57d is another color.
</p>
<ol id="result"></ol>
JS:
$(function() {
var colorMatches = $('#subject').text().match(/#(?:[0-9a-f]{3}){1,2}/gi),
$resultList = $('#result');
$.each(colorMatches, function(index, value) {
$('<li />').text(value).css('background-color', value).appendTo($resultList);
});
});
Second Update:
As per suggestions, replacing inline styles (view demo):
HTML:
<p id="subject">
Nous obtenons les 2 couleurs suivantes : #40464f & #0f131a
</p>
JS:
$(function() {
var $subjectElement = $('#subject'),
content = $subjectElement.html();
content = content.replace(/#(?:[0-9a-f]{3}){1,2}/gim, "<span style=\"background-color: $&;\">$&</span>");
$subjectElement.html(content);
});
It seems like you need to compare the text within a span using regular expressions as the best approach.
Here is a filter that enables regex selection of elements:
Check out this example on JSFiddle.net
<input /> <button>Modify</button> <div></div>
<script>
$(function(){
$('button').click(function(){
$('div').css('background-color', $('input').val());
});
});
</script>
If you want to change the text color instead, just use .css('color', $('input').val())
Remember to improve your selectors for better performance!
As someone who is not a designer, I find myself doing a lot of cutting and pasting for my side hustles. I believe many others can relate to this experience. Currently, I am working on a personal project that involves using tailwindcss, appwrite, and svelte ...
I've been wondering about the popularity of 3 column flow layouts compared to using a table with 3 columns and one row. Can someone explain the advantages and disadvantages of using a flow layout versus a table layout for this scenario? Thank you ...
Is it possible to create a dynamic pager that can be customized using parameters from the URL? I have noticed that when I hardcode the perTime variable, everything works fine. However, as soon as I try to use a parameter from the URL, the page starts behav ...
By using the onchange event in the parent dropdown (first dropdown), I am populating the child dropdown (second dropdown). Subsequently, upon selecting an option from the child dropdown, I automatically fill in three text boxes. However, I am facing an iss ...
I anticipate receiving criticism from certain users for not conducting enough research. However, I have dedicated two days to this issue and the lack of guidance is starting to frustrate me. Therefore, I offer my apologies if this question has already been ...
How can I make the polymer paper spinner display while the body tag is set to unresolved? I'm experiencing a brief blank screen before the page finishes loading. I'm feeling lost and unsure of how to begin. Check out the Polymer Project documen ...
My useStyles hook code is meant to create a full-page background that changes on hover, but for some reason it isn't working. I came across a similar solution in CSS which works perfectly. Can you help me figure out the issue? Code snippet that' ...
I have been working on a project involving core PHP, jQuery, and AJAX. Currently, I am faced with a situation where I have a select box populated with data from a database. When a particular option in the select box is clicked, I need to retrieve data rela ...
Trying to create a link to an anchor on Page 1 from Page 2, both of which have fixed headers. I'm utilizing the following script on both pages: $(document).ready(function(){ $('.testlink').bind('click', function(e) { e ...
Recently, I added some new fonts (specifically Roboto) to my Linux Ubuntu PC and wanted to incorporate them into my CSS using the @font-face rule. However, I encountered an issue when specifying different font weights within the src: ; property as shown in ...
I am attempting to manually insert social icons into my project. projectname/app/design/frontend/projectname/default/template/page/html/footer.phtml This is the HTML code: <a src="../">facebook</a> What is the proper method to link the imag ...
My issue pertains to text placement on images, which is behaving oddly in my code. The problem seems to stem from a hover system I have implemented, where the text only displays correctly when triggered by a hover event. My code snippet below addresses the ...
My current jQuery code is set up to fetch the next set of records from a database and display them when I scroll down. The page initially displays 25 records, and as I scroll down, an additional 15 records are fetched. However, I am having trouble implem ...
Trying to achieve the look of the attached image with a few divs. I know I can use a background image like this: background:url(image.png) no-repeat left top; But I'm curious if there's another way to achieve this without using a background ima ...
Within a larger div, I have a very wide inner div that scrolls left and right based on the position of the mouse. I found the code for this from an answer at There are two transparent divs above everything else, which capture the mouse position to determ ...
Is it possible to create dropdown menus in the navigation bar that slide in from the bottom with a smooth transition effect, similar to this example: Although I am working on building my own template, so my code may differ from the original theme. Here is ...
Just a quick query. I've been using ajax POST and GET methods to send JSON data to a server and then fetch it back. However, I'm facing some confusion while trying to extract JSON information from the GET call. getMessage = function(){ $.ajax ...
I am currently working on integrating AJAX functionality into my code for a 'like' button. I have both the 'Like' and 'Dislike' buttons displayed on the screen. An AJAX request is made to check my database, and depending on th ...
Looking to stylize the list items with decimal, upper-alpha, lower-alpha, upper-roman, and lower-roman for each of the first five levels? I attempted to achieve this by adding CSS in my pad.css file. .list-number1 li:before { content: counter(first)") " ...
This is a question related to design and technology. When using ASP.NET MVC, it is possible to create a simple application with two views: one master view that displays all records in tabular form in read-only mode, and another details view for creating n ...