I have an interactive page that changes td background color dynamically, with javascript. Without any style, this page works fine. As a style requirement, table background color should be black, and td background should be white. But due to cascade rules, dynamic changes have lower priority, so javascript is not able to override static style. How can I solve this? Thanks.
Sample 1:
cell.style.cssText = "background-color: gray;" // it works fine
Sample 2:
table {
background-color:black;
}
td {
background-color: white;
}
cell.style.cssText = "background-color: gray;" // it does not work anymore, even with "!important;"
Inline styles override styles defined in <style> and it works even with dynamic styling using cssText (see my code example). Your problem is probably somewhere else, e.g. in the cssText value itself (it should be background-color: gray;, not just gray
function foo() {
document.getElementById("cell3").style.cssText = "background-color: green";
}
table {
background-color:black;
}
td {
background-color: red;
}
<table>
<tr>
<td>cell1</td>
<td>cell2</td>
<td id="cell3" onclick="foo()">cell3</td>
</tr>
</table>
Related
HTML logic vs Javascript logic
I want to do something very simple. Based on the priority description, I want to give different colors to the td.
This HTML is generated dynamically based on the tickets. Now let's say I have 10 types of descriptions the html will start to get messy. Is there a better way or it's ok to do this?
<tr ng-repeat="ticket in tickets">
<td class="color-SOMETHING">{{ticket.TICKET_PRIORITY_DESCRIPTION}}</td>
<tr>
Try using the priority as class:
<tr ng-repeat="ticket in tickets">
<td class="color-{{ticket.TICKET_PRIORITY_DESCRIPTION}}">{{ticket.TICKET_PRIORITY_DESCRIPTION}}</td>
</tr>
Then, in your css add this:
.color-high {
background-color: red;
}
.color-low {
background-color: green;
}
.color-normal {
background-color: yellow;
}
Etc., one for each priority you have.
Apply conditional classes based on the ticket property like this
<tr ng-repeat="ticket in tickets">
<td class="color-SOMETHING" ng-class="{'redColor': ticket.TICKET_PRIORITY_DESCRIPTION=='high', 'yelloColor': ticket.TICKET_PRIORITY_DESCRIPTION=='medium', 'blueColor': ticket.TICKET_PRIORITY_DESCRIPTION=='low'}">{{ticket.TICKET_PRIORITY_DESCRIPTION}}</td>
<tr>
CSS
.redColor {
background-color: red;
}
.yelloColor {
background-color: yellow;
}
.blueColor {
background-color: blue;
}
<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;
}
Is it possible to get the browser's default (or themed, assuming there are browser themes? I've never looked) text selection color?
Background
I'm trying to make an <input type="date" /> act like it has a placeholder attribute, like the HTML5 <input type="text" /> does. In case it matters, I'm using Bootstrap.
So far, I've got
CSS
/* allow date inputs to have placeholders */
/* display placeholder text */
input[type="date"].emptyDate:before {
content: attr(placeholder);
color: #999;
}
/* hide default mm/dd/yyyy text when empty value and not in focus */
input[type=date].emptyDate:not(:focus) {
color: transparent;
}
/* hide default mm/dd/yyyy text when empty value, not in focus, and
selected (ctrl + a) */
input[type="date"].emptyDate::selection:not(:focus) {
color: transparent;
background-color: lightblue;
}
/* hide placeholder text when empty value, but in focus */
input[type="date"].emptyDate:focus:before {
content: "";
}
Javascript
function setEmptyDateInputClass(input) {
if ($(input).val()) {
$(input).removeClass("emptyDate");
} else {
$(input).addClass("emptyDate");
}
}
$(document).ready(function () {
$.each($("input[type=date]"), function (i, input) {
// set initial class
setEmptyDateInputClass(input);
// set class on value change
$(input).change(function () { setEmptyDateInputClass(this);});
});
});
Issues
I'm having two issues. The first, and the one I'm asking in this question (I'll post another question if everyone obeys the rules and no one posts answers to multiple questions) is, is there a way to get the browser's default (or themed) selection background color so that, either with CSS or manually with Javascript, the lightblue isn't static? (Also, light blue isn't the right color, but that's just a matter of a screenshot and mspaint.)
input[type="date"].emptyDate::selection:not(:focus) {
background-color: lightblue;
}
My second, bonus issue is, I'm having issues selecting :before::selection in order to set the background color of selected ::before content.
/* always active when .emptyDate */
input[type="date"].emptyDate::selection:before {
background-color: lightblue;
}
/* never active */
input[type="date"].emptyDate:before::selection {
background-color: lightblue;
}
You can use specificity on ::selection like so:
CSS
.red::selection {
background-color: red;
color: #fff;
}
.green::selection{
background-color:green;
color:#fff;
}
HTML
<span class="red">I am highlighted in red, </span>
<span class="green">and I am highlighted in green,</span>
<span class="">and I am highlighted as per browser default.</span>
Example: http://www.bootply.com/KEEvWSlP0F
I have a table where a row gets added every time I press a "Add" button. I have an "Edit" button which is placed in the first cell of the newly created row.
I want to highlight the row that is being edited. I know that I can get the current <tr> element like
var par = $(this).parent().parent();
But when I use,
par.css('border-color', 'red');
It does not change the color.
What mistake am I making and how should I highlight that particular row?
This is really about the styling of the <tr>. CSS doesn't like to style <tr>'s because they really only exist for semantics. In order to add a border to one, you need to make it display: block;.
Here is a jsFiddle and example code.
HTML
<table>
<tbody>
<tr><td>Some Content</td></tr>
<tr><td>Some Content</td></tr>
<tr>
<td>
Edit
</td>
</tr>
<tr><td>Some Content</td></tr>
<tr><td>Some Content</td></tr>
</tbody>
</table>
Javascript
$(".edit").click(function(e) {
$(this).closest('tr').toggleClass('editting');
e.preventDefault();
});
CSS
table tr {
display: block;
border: 1px solid rgba(0, 0, 0, 0);
}
.editting {
background: #FAA;
border: 1px solid red;
}
Please note how I used an rgba color to make the border opaque. There are other ways to do this, but if you leave the border off it causes the table to "jitter."
Assuming this refers to an element within the tr, then it will be better to use .closest() here
var par = $(this).closest('tr')
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.