I have an HTML table and I want to set the color of an specific part of the table (border-top-color of a cell classed "first").
To get the color I need to access to an specific value within a css class.
Example:
Table
<table class="tabla">
<caption>Title</caption>
<tr>
<td class="first">A</td>
<td class="first">157</td>
</tr>
</table>
CSS
This is the class where I need to be able to get the color
.color { fill: #95ccee;
background-color: #95ccee;
}
To achieve, I'm using d3.js in the follow way
var selectTablas = d3.selectAll (".tabla");
selectTablas.selectAll(".first")
.style("border-top-color", "Here the function that will get the color");
The function should loop a dataset and, depending of the "d", get different values of different classes.
Here, the extended code
http://jsfiddle.net/ploscri/dHYcd/
Thanks in advance.
Ok here's my first stab at it. The question isn't super clear, but this function provides you with a way to pass a class name into it and retrieve the color on that class. I updated your example with the color you have in the question. I assume you have a function somewhere else that maps the difference value into a classname.
http://jsfiddle.net/dHYcd/1/
First thing I did here was make a container of hidden classes that carry the colors for testing. In order to grab the value from the css, it needs to be present in the html, which I assume it is already somewhere. If it's not I have no idea why you'd be doing it this way rather than just defining the color in the javascript.
<div id='colors'>
<span class='color1'></span>
</div>
Next, added the css declaration that you have in your question but was not in the jsfiddle, but changed out fill and background-color for just color. I also made sure the div containing the colors was hidden so it wouldn't interfere with the example.
#colors { display: none }
#colors .color1 { color: #95ccee }
Finally, the function to actually get the color from the class is fairly simple. The code is reproduced below:
function get_color(classname){
var el = document.querySelector('#colors .' + classname);
return getComputedStyle(el).getPropertyValue('color');
}
This function just grabs an element based on a class name that you provide as an argument, then grabs the css value of color. You can see that it would be easy to swap out color if you wanted to get another property value, or even to add the property value as a second argument to the function, but I didn't see a need for this in this example.
Hope this helps, and if this isn't quite what you were after, I apologize, the question was a little difficult to interpret. Feel free to add a comment or edit to clarify the question and I'll update the answer to get closer to what you are after (if I didn't nail it this time).
EDIT
OP clarified that they are looking for the best way to store color values and figured it would be in the css. I would say this is not the best way to store color values, and recommend storing them in an object in the javascript, since they are only needed in the javascript. Here is an updated fiddle that stores the colors in a better way:
http://jsfiddle.net/dHYcd/2/
If you change colors.blue to colors.red you'll see that you can easily swap between the different colors, and the syntax is native to javascript anyway.
Related
Alright, so I'm working on a custom vue component and one of its props is a color.
I would like to be able to match this color to all possible use cases. The ones I can think of are
Predefined browser colors like white, black, etc.
Hex/RGB color codes (or others that browser parses).
Custom color variables (such as var(--pa-primary-accent)
For the first 2 cases, just passing the color and using it would work, however for the third, if the user just passes in pa-primary-accent then I have to append it with the var(--${color}). How would you have something that is fully compaitable with both cases?
This is an excerpt of the code:
// Current implementation, breaks if user passes `white` for example.
computed: {
style () {
return `
background-color: var(--${this.bgColor});
`
},
So an approach to fixing this as proposed by #vrugtehagel is to use fallbacks, I have done this for all my color related CSS values and it worked fine.
Example:
background-color: var(--${this.bgColor}, ${this.bgColor});
Bear in mind this will always prioritize the custom -- prefixed values if a normal value with the same name is valid.
Can some one show how I can change the InnerHTML of the titles class to be the same as the alt attribute. For the actual website jarretonions.co.za
Thanks
$(document).ready(function() {
$(".pic").on("click", function() {
$(".modal").show();
var srclong = $(this).attr("src");
var srcshort = srclong.split("_");
var srcextension= srclong.split(".");
$(".modal img").attr("src", srcshort[0]+'.'+srcextension[1]);
************is it something like this********
var title = $(this).attr("alt");
$(".modal span").InnerHTML= title;
OR
document.getElementByClassName('titles').innerHTML = title;
})
+
echo
"<div class='art'>
<img class='pic' src='img/".$row["name"]."_tnail.jpg'
alt='".$row["name"]." • ".$row["year"]." • ".$row["type"]."'
height='auto' width='100%'/>
<div class='modal'>
<img class='big'/>
<span class='titles'></span>
</div>
</div>"
;
Since you're using JQuery, you can select those elements using $(".title") and change them directly. Something like so:
$(document).ready(function() {
$(".pic").on("click", function() {
$(".title").text( $(this).attr("alt") );
})});
Here's a fiddle: https://jsfiddle.net/wmjtfLja/1/
Note that if you have more than one element of class .title, they will all change. So you may want to select the title element by id or by relative path from the clicked image.
Realizing in advance, the danger of providing an answer that is not (superficially) fully aligned with the question, I was struck by the comment from melpomene, whom I initially thought was refering to things not existing in jquery.
melpomene is 100% correct, since getElementByClassName does not exist.
The correct syntax is getElementsByClassName.
Having said that, helloworld is also correct (syntax errors aside), since loading jquery for every little task is really redundent, and one can manipulate by class with little more half a dozen lines of pure javascript.
But, getting elements by class has dangers, since the return is a 'live' array.
For example, with dylan's original question, getting by class is only useful to return the first instance (the array length is just a guide of how many elemnts it applies to). Therefore, for dylan to make changes as he proposed, each requires its own button. (which also means, michael that I believe you are incorrect when you say it will affect all elements with same class name - oth, you are fully correct in noting that one should inpsect for other values (or change the class name) when running loops on the attribute).
Consider the following (on the fly class change);
function otf_cls_change(cls_original,cls_replace){
var a=document.getElementsByClassName(cls_original);
l=a.length;
if (l==0){return 0;}
do {
a[0].setAttribute('class',cls_replace);
a=document.getElementsByClassName(cls_original);
l=a.length;
} while (l>0);
}
This is effective for changing class names on the fly.
But, if we modify the code and
//change this a[0].setAttribute('class',cls_replace); // to
a[0].innerHTML='this_html';
It will cause the browser to hit an endless loop.
Why? because the live array returned by ElementByClass will only process the first item (even if you try to loop the array).
Therefore, while changing the class on the fly is fun and very do-able, I'd strongly suggest that using it to change any attrib that is not specific to the class id is a bad idea.
Changing the class attrib in conjunction with another attrib is fine.
For example,
a[0].innerHTML='this_html'; //do this first
a[0].setAttribute('class',cls_replace); //then this
The above will work to loop class defined elements.
On a point of massive personal hypocrisy, I do get annoyed when people ask for pure javascript solutions, and then some wing nut chimes in with jquery. I guess I'm doing the opposite here, since evidently, the question was jquery related, and here I am throwing out pure javascript. Sorry bout that.
btw, dylan, good luck with it. glad you bit back on the negative comment. Too many people here are terrified of offending, and wind up get bullied.
hth,
Gary
http://jsfiddle.net/10h8t3ah/
function changeHeight(rowNum) {
document.getElementById("demo").style.height= "70px";
var fooBar = document.getElementById(rowNum);
fooBar.style.height = "100px";
}
What I am trying to accomplish here is to pass through a variable defined as row1, row2, row3, and row4 as rowNum and it will change the height of both the link and the paragraph with the corresponding row#.
I am trying to pass the ID of both the paragraph and the link so that if you hover over the link and vice versa, the height will change.
Essentially, if you hover over either the link or the paragraph, the corresponding containers side by side of each other will expand in height and the text in the paragraph will be visible. The paragraph text I have set with wrap-text property of break word but it seems to just overflow out anyway.
OK - there are couple of concepts that need to be corrected to understand why this is not working:
the id of a DOM object must be unique (your jsfiddle uses the same ID on both of your "rows" - I've updated your code to use a class instead of an id so that)
the parameter you are passing to your changeHeight function must be a string (if you pass row1, then row1 must be a defined variable, instead you should pass 'row1' -- again, see my updated fiddle code)
Here is a jsfiddle that does most of what you want, I think : http://jsfiddle.net/zwyr4hn1/10/
There were also a couple of little things that I've fixed up:
1. you need to return the other rows back to the smaller size when a new one is hovered (I've used the class row on all the row objects to do this ) 2. this css is needed to get your a objects to resize in the way you want : a { display: inline-block; }
I haven't addressed the wrap-text issue you mentioned because I didn't see that on the jsfiddle.
Instead of designing the complex JavaScript functions on your own, ust use accordion to expand the contents. Here's the Bootstrap framework accordions, especially designed for these purposes.
Link to page where you can learn more about it.
http://www.w3schools.com/bootstrap/bootstrap_collapse.asp
I have a search page that is used in multiple places with multiple 'themes' throughout my site. I have a few divs that can have their background color changed based on a radio button selection (whether they are enabled or not). I can do this just fine by changing the css class of the div on the fly with javascript.
However, these themes could potentially change, and the background color is grabbed from a database when the page is created. Right now I do this in the C# codebehind:
string bgStyle = "background-color:" +theme.searchTextHeaderColor +";";
OwnerSearchHeader.Attributes.Add("style", bgStyle);
In the Javascript I need to change this color to make it look disabled, and when the user clicks back to this div I need to re-enable it by changing it back to its original color. But since I only knew this color in the code-behind, I don't know what it was in the Javascript.
So my thought was to create a css class in the resulting HTML page when the page is loaded with the background color I need. Then I could simply switch from the divEnabled and divDisabled class in the javascript. But I'm not exactly sure how to do that.
Alternatively I could create a hidden element, assign it the 'enabled' style, and use that as a reference in the JavaScript when enabling my div. This seems like a hack but maybe its the easiest way. I'm still new to a lot of this, so I'd appreciate any suggestions. Thanks for the input!
So my thought was to create a css class in the resulting HTML page when the page is loaded with the background color I need. Then I could simply switch from the divEnabled and divDisabled class in the javascript. But I'm not exactly sure how to do that.
Yes, this is the anser; do this. In the <head> of your document add a <style> and put your CSS in there like so: (my Asp.NET is a little rusty so forgive me if it has some hicups ;) )
<style>
<!--
.divEnabled {
background-color:<%=theme.searchTextHeaderColor%>;
}
.divDisabled {
background-color:gray; /* or wtv */
}
-->
</style>
You could also put it in an external CSS file, which may be a good idea.
Then write some JavaScript to add/remove the class attribute (I'm going to ask that you don't call is the "CSS Class" ;) )
var ownersearchheader = document.getElementById("<%=OwnerSearchHeader.ClientId%>");
// changing the class attribute to `divDisabled`
var newClassAttribute = ownersearchheader.getAttribute("class").replace(/\bdivEnabled\b/, "divDisabled")
ownersearchheader.setAttribute("class", newClassAttribute);
// ... or,
// changing the class attribute to `divEnabled`
var newClassAttribute = ownersearchheader.getAttribute("class").replace(/\bdivDisabled\b/, "divEnabled")
ownersearchheader.setAttribute("class", newClassAttribute);
This is indeed a mouthfull, so, like #Haydar says, you might want to use jQuery, which offers easy-as-pie addClass(), removeClass() and toggleClass() methods.
You can use the jquery .toggleClass method.
Description: Add or remove one or more classes from each element in the set of matched elements, depending on either the class's presence or the value of the switch argument.
Here is the link to the api doc.
Jquery API
I have asp:Table with number of asp:Label inside asp:FormView, it represents short stats info.
I need to set Label.CssClass to "red" if it's text isn't "0".
Currently I do this on FormView.DataBound event. But think that it's better to use JavaScript and probably jQuery. How can I do that?
Sorry for dummy question - I'm new to jQuery. Thanks!
You can do this using jQuery (you can also give the Table or FormView a class, probably easier in aps.net instead of the ID like I have below):
$("#formViewOrTableID span").filter(function() {
return $(this).text() !== "0";
}).addClass("redClass");
If you give the labels a class you want affected, say set all the Labels you want included to CssClass="styleMe", you could change $("#formViewID span") to
$("#formViewID span.styleMe") to be more specific.