I'm starting to learn JavaScript and I had a question.
I have two icons, one with red fill and one with blue fill. Is there a way that with document.getElementById().style.fill I can get the fill they have and then do a comparison.
Something like:
if(document.getElementById("Icon1").style.fill == "red"){ ... }
I tried to do it with: if(document.getElementById("Icon1").style.fill == "red") but it didn't work
Related
I want to select all elements on my page with a certain color, let's say red.
I know I can do it like this: $("div[style=color:rgb(255,0,0)]"). However, my problem is that there are different representations of the color red, e.g. #FF0000 and simply red. But also any number of white spaces in rgb(255, 0, 0) still defines the color red.
I need to do it in a general way which would work for any color and will accept any representation of that color. Is there a way to define such a "smart" CSS selector?
I'm not sure I understand the problem. You want to filter only when the color is 'red' (literally, #FF00000)? Or also kind of for example 'darkred' will be included in your filter?
In the first case I don't really see a problem and a solution of kukkuz could work with some improvements.
According to what I know you cannot do that with CSS selectors
By using this type of selector you are telling jquery to search for a string/sub string that contains the word that you are looking for.
But the options are endless.
Because you are searching for a string you have to consider all possibilities, including white spaces, different character sizes, more style attributes other then color that can contain number like 0 or 255 or ff or 00 etc...
This is not possible with the current support of selectors...
But if you will use jquery to get all elements and then check their color/background-color, you will get a true color representation.
it doesn't matter how the style is written, the browser will return back a color(it can be in hex or rgb depending on the browser).
I think that this behivor derives from the w3c rules...
a non elegent soulation would look like this:
$('div').each(function(){
if($(this).css('color') == "rgb(255, 0, 0)" || $(this).css('color') == "#FF0000"){
$(this).css("color","green");
}
if($(this).css('background-color') == "rgb(255, 0, 0)" || $(this).css('background-color') == "rgba(255, 0, 0, 0)"){
$(this).css("background-color","green");
}});
Fiddle: https://jsfiddle.net/zdu1adr7/4/
This one works on chrome,firefox,edge,ie 11/10/9.
What I'm trying to do is relatively simple but I'm new to JS and D3.js.
I have created a bunch of rectangles using SVG through D3.js.
I added some code to handle a click event and in there I'd like to iterate through all drawn nodes and do something with them as long as a specific property matches the same property in the one that's been clicked.
Here's the code that draws the rectangles (only one of them here);
d3.select("svg")
.append("rect").attr("x", 50)
.attr("y", 10)
.attr("height", 20)
.attr("width", 200)
.attr("title", "catalog")
.style("fill", "#CB4B19")
.on("click", mouseClick)
And here's how I'm trying to retrieve the "title" property of each rectangle drawn and compare it to the clicked one (and in this case, just log it in the console). I know this is probably basic but I can't figure out what I'm doing wrong here.
function mouseClick(d) {
var t = d3.select(this).attr("title"); //store the "title" property of the clicked rectangle
d3.selectAll("rect").each(function(d, i){ //Select all rectangles drawn
if(d3.select(this).attr("title") == t){ //for each one, if the "title" property = the one initially chosen
console.log(t); //do something here
}
})
}
Your code actually seems to be working correctly. At least for me it did. One thing I will say is that d3 does mimic jQuery syntax in that it lets you select elements with attributes with the d3.select('element[attributeName="?"]') syntax. You can read more about selections here.
So for your example, you could do
var t = d3.select(this).attr("title");
// select all rectangles with the attribute title
d3.selectAll("rect[title='" + t + "']").each(function(d, i){
console.log(t);
});
You no longer need the if statement to check because you are only selecting them. I made a simple jsFiddle to show this. I made 3 different types of rectangles with different title attributes and when you click on them, it only selects rect that have the same title attribute.
http://jsfiddle.net/augburto/znqe8nqr/
I am using https://github.com/Leaflet/Leaflet.draw
I am only drawing polygons with different colors. When I enter Edit mode all polygons revert to a single color (no fill, as seen here https://github.com/Leaflet/Leaflet.draw/blob/master/src/edit/handler/EditToolbar.Edit.js#L9 ):
"// Make sure that Polylines are not filled
if (!(layer instanceof L.Circle) && !(layer instanceof L.Polygon) && !(layer instanceof L.Rectangle)) {
pathOptions.fill = false;
}"
I can not find how to keep (or modify) the colors while edit mode is on because the polygons sometimes overlap and are really hard to see when they all have the same color.
Thank you!
Edited:
L.EditToolbar.prototype.options.edit.selectedPathOptions.color can be used to modify the edit color for all, I would like to set individual colors.
This was a missing feature in Leaflet Draw. Added after my comment there.
https://github.com/Leaflet/Leaflet.draw/issues/295
I'm working on fading out certain lines from a chord diagram when a separate chart is hovered over. I'm looking at the code for the "fade" function,
`function fade(opacity) {
return function(g, i) {
svg.selectAll(".chord path")
.filter(function(d) { return d.source.index != i && d.target.index != i; })
.transition()
.style("opacity", opacity);
};
}`
And I was just wondering if someone could explain to me what d.source.index means and d.target.index mean. I generally understand that it's the source of the chord and the target of the chord, but I wanted to gain some more specific insight into the values/meaning of "index" so that I could better manipulate the selection.
My ultimate goal is to over over a box in a separate legend rectangle, and have the chord diagram fade so that only the color hovered over in the legend box retains full opacity.
Every chord has data associated with it. This data has, among other things, source and target attributes, which point to the nodes that the chord connects. In the code above, the index attribute of the source and target nodes is referenced to identify which ones to filter. This can be anything you want though.
In your application, depending on what the legend is for, you would need to check the value displayed in the legend for the source/target nodes or the chord itself.
I want to print something like this
each bubble u see is a "li" element
so i have made float=left so that i can see them horizontally. I am not able to understand, how should i display two different colors dynamically.
Eg: If it is 60% and 40%, then I need to show more blue bubbles and less orange ones and vice versa.
Can't offer specifics without some specific code of yours, but: use the modulo operator (%) together with > or <.
For instance:
var idx = $('ul li').index();
to get the index, and then
var color = (idx % 11 < 6) ? "blue" : "orange";
to pick the color.