To simplify, I have a label set in my html as:
<label id ="lblApptDateTime" >Appointment</label>
On an event I am changing the lext of lblApptDateTime to Appointment with an asterisk. I want the asterisk to be red color and in bold font. How do i achieve that ?
Here's what I am changing the text on the event:
$("#lblApptDateTime").html("Appointment" + "*");
Need to change the color of asterisk to red and in bold font.
You can add the asterisk in an :after pseudo-element. This way you can style it to your liking, apart from the text.
.asterisk:after {
content: '*';
color: red;
}
In your JavaScript, instead of adding the asterisk inside the label, you just add the class asterisk to it:
$("#lblApptDateTime").html("Appointment").addClass("asterisk");
You can also use toggleClass() instead of addClass() if the asterisk should be toggle-able.
Here's a working fiddle. Since I didn't have any other event available, I used hover.
Wrap it in a span and use a class
$("#lblApptDateTime").html('Appointment' + '<span class="red">*</span>');
.red {
color: red;
font-weight: bold
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<label id="lblApptDateTime">Appointment</label>
HTML:
$("#lblApptDateTime").html("Appointment" + "<span class="red">*</span>");
CSS:
span.red {
color: red;
font-weight: bold;
}
You'll need to put it in a new styled element like a span, which you can do with append:
$("#lblApptDateTime").append($("<span>").css("color", "red").text("*"));
Or addClass() instead of using css() and style it appropriately.
Related
I have an HTML Textarea, which contains a custom-made live editable JSON file where you can see the results of the edits in real-time. I also have something that can cycle through the entries in a "points" attribute, being a list, where it shows the results in the canvas where the JSON results are seen, such that one can see what point is being selected.
I want the point in the textarea to be able to be formatted when selected, such as the selected point in the textarea JSON to be highlighted yellow or have the text color changed to blue or something like that.
I have tried this:
<textarea id="objtext">
not orange
<span style="color:orange">
orange
</span>
not orange
</textarea>
It just showed the textarea having that in it as text, instead of formatting inside the textarea.
How do I make it formatted (and editable and readable by code with textarea.value ideally without the formatting)?
I don't think this is possible with textarea. I think epascarello is trying to tell you that it is possible using a div with the attribute contenteditable="true".
Check out this similar question - Is it possible to have several different textcolors in one textarea?
You will need to style the div to look and feel like a textarea. Here's a basic mockup, you may need to add some Javascript to extend this.
<div id="objtext" contenteditable="true">
not orange
<span class="orange-text">
orange
</span>
not orange
</div>
#objtext {
-moz-appearance: textfield-multiline;
-webkit-appearance: textarea;
border: 1px solid gray;
overflow: auto;
padding: 4px;
width: 400px;
height: 200px;
font: medium -moz-fixed;
font: -webkit-small-control;
}
.orange-text {
color: orange;
}
::selection {
color:orange;
}
::-moz-selection {
color:orange;
}
https://jsfiddle.net/miainchambers/g07rcb5o/2/
Text value can be retrieved by using document.getElementById("objtext").textContent
Unfortunately, it's not possible to do this with a textarea nor input tags.
You can use instead:
contenteditable attribute
<div contenteditable="true">
Lorem Ipsum <span style="color: red;">Lorem</span>
</div>
WYSIWYG editor like https://github.com/tinymce/tinymce
Similar tools depending on the complexity you have to provide
Check out Highlight.js + an editable div.
Example:
<link rel="stylesheet" href="/path/to/styles/default.css">
<link rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/highlight.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', (event) => {
document.querySelectorAll('code').forEach((el) => {
hljs.highlightElement(el);
});
});
</script>
<pre><code class="hightlight-json" contenteditable="True">{
"menu": {
"id": "file",
"value": "File",
"popup": {
"menuitem": "None",
}
}
}
</code>
</pre>
<td colspan="4" valign="top">
<label for="state_1" id="state_1">
Text:
</label>
another text
</td>
Can i add css to "another text" without a html tag o id/class on td class?
Short answer: not easily.
Longer answer: yes, but if you don't want the style to also apply to the <label>, you'll need to also negate those style changes.
While it would definitely be easier to just wrap the text in a <span> and target it with td span as the CSS selector, you could apply CSS to td, and then "undo" those changes to td label:
td {
color: red;
}
td label {
color: black;
}
You have to first target the td you want. Since you don't want to add an id or class to it, you'll have to use general selectors, i.e td or table tr td. In order to only affect the text and not the label, you'll have to "undo" the styles you add to the td text:
td {
color: red;
}
td label {
color: black;
}
If you have other tags inside the td in addition to the label, you'll have to exclude those as well.
Well, yes you can target "td" in your css, but it will affect as well since css works in cascade, so you'll have to write extra css to overwrite it. Like so :
td{
color: red;
}
td label{
color: black;
}
I am trying to have the classes change depending on what is clicked from the two headings.
If heading one is clicked, I want the font color to change to red and have it underlined with red, which in the class it currently does with a bottom border. If the other heading is clicked then I want that heading to take on the red characteristics. The one that is not clicked will just stay grey according to the no highlight class.
Here is the JSFiddle: http://jsfiddle.net/7ok991am/1/ I give an example look also of what I am trying to accomplish.
HTML:
<div id="page_headings">
<h2 class="no_highlight">Heading One</h2>
<h2 class="no_highlight">Heading Two</h2>
</div>
CSS:
#page_headings{
overflow: hidden;
margin-bottom: 32px;
}
#page_headings h2{
float: left;
margin-right:24px;
font-size: 14px;
cursor:pointer;
}
#page_headings h2:hover{
font-weight: bold;
}
.red_highlight{
color:red;
border-bottom: 1px solid red;
}
.no_highlight{
color:#898989;
}
JS:
$('#page_headings').on('click', function(){
if($('#page_headings h2').hasClass('no_highlight')){
$(this).removeClass('no_highlight').addClass('red_highlight');
}else{
$('#page_headings h2').addClass('no_highlight');
};
});
Building on #RDrazard I think you want them to switch between the two correct?
http://jsfiddle.net/7ok991am/3/
$('#page_headings h2').on('click', function(){
if($(this).hasClass('no_highlight')){
$(this).removeClass('no_highlight').addClass('red_highlight');
}else{
$(this).addClass('no_highlight');
}
$(this).siblings('h2').addClass('no_highlight');
});
JSFiddle: Link
First off, add a border-bottom property with none to the no highlight class to ensure that it looks just the same before the click.
Next, you want to the click event associated with the h2 elements, so it should be $('#page_headings h2')
Use this to impact the h2 we're clicking on.
Try this code
$('#page_headings h2').on('click', function(){
if($(this).hasClass('no_highlight')){
$(this).removeClass('no_highlight').addClass('red_highlight');
}else{
$(this).addClass('no_highlight').removeClass('red_highlight');
}
});
Check this fiddle
JS
$('.no_highlight').on('click', function(){
$(this).parent().find('.no_highlight').css('border-bottom','none');
$(this).css('border-bottom','1px solid red');
});
The above method changes the border of the currently clicked headinh which i think is what you want.
AND
if you want addClass() and removeClass(), then see this fiddle
JS
$('.no_highlight').on('click', function(){
$(this).parent().find('.no_highlight').removeClass('red_highlight');
$(this).addClass('red_highlight');
});
This method adds a red_highlight class to the active link and removes the red_highlight when not active.
Please try it..
I'm wondering if it's possible to change just a section of the a text input box's color. I am creating a comment widget want everything between the # and the : to change to a different color:
<input type="text" placeholder="Want To Say Something?"
value="#user556: This is a test comment" ng-model="Comment" ng-click="getCurrentPosition()"
class="form-control ng-valid valid ng-dirty">
Is this possible to do with jQuery or javascript? Or do I have to convert the text input to a div?
Possible, within a contenteditable element,
and with some JS and a bit of RegExp to replace the desired match:
function colorify() {
this.innerHTML = this.textContent.replace(/#([^:]+):/g, "#<span class='user'>$1</span>:");
}
function uncolorify() {
this.innerHTML = this.textContent;
}
[].forEach.call(document.querySelectorAll(".comment"), function(el){
el.addEventListener("blur", colorify);
el.addEventListener("focus", uncolorify);
});
[contenteditable] {
background:#fafafa;
padding:8px;
border-radius:3px;
border:1px solid #ddd;
}
[contentEditable]:empty:not(:focus):before {
/*http://stackoverflow.com/a/18368720/383904*/
content: attr(data-placeholder);
color: #777;
}
.user{
color: #f0f;
}
(Copy the following text into the contenteditable)<br>
#user547794: Use contenteditable. #johnDoe: nice suggestion btw.
<div class="comment" contenteditable data-placeholder="Want To Say Something?"></div>
Than click outside of the contenteditable.
I want to replace all #111 color (example color) with #222 (new color) in html file using jQuery. I want to do this to change the theme of website by single click.
Initial css:
body{
bg-color:#111;
color:#111;
}
div1{
bg-color:#111;
color:#111;
}
.
.
.
divn{
bg-color:#111;
color:#111;
}
After click event:
body{
bg-color:#222;
color:#222;
}
div1{
bg-color:#222;
color:#222;
}
.
.
.
divn{
bg-color:#222;
color:#222;
}
The best solution here is to define 2 css classes with cascaded styles to nested elements.
body { color:#111 }
.theme1 { color: #222; }
.theme2 { color: #333; }
.theme2 a { color: #003366; }
...
Then you can change the css class of your body element and all elements on the page will inherit new styles.
// theme1 color
<body class="theme1">
...
</body>
// theme2 color
<body class="theme2">
...
</body>
jquery code:
$('body').addClass('theme1');
The best way to change theme with one click is give some class to your body tag.
Then in your css:
body{ color: #111;}
body.secondTheme{color : #222; }
And you can bind change it for click event in jquery
$("#yourButton").click(function() {
$("body").toggleClass("secondTheme");
});
the proper way to do this would be to assign a css class to every html element you want to change color.
HTML:
<div class="colorChange">
CSS:
.colorChange{ color:#111;}
Then you would have a button that triggers a javascript function, which would change the color attribute of the colorChange class, I would recommend using jQuery:
$(".colorChange").css('color', '#222');
If you can toggle between classes I think it will be better; if you can't/don't want you can use the .filter function in jQuery:
$('yourselector').filter(function(){
return $(this).css('color')=='rgb(0, 1, 17)';
}).css('color','rgb(0, 2, 34)');
This will change all elements selected by yourselector with color rgb(0, 1, 17) to color rgb(0, 2, 34).
Obviously you can also do the same with other css attributes.