Been looking for a solution to what seems like a relatively simple problem. I have a kml layer loaded into google maps. It outputs as a within the dom and I have been able to identify its location.
What I want to do is simply change the opacity. I have tried using simple css targeting and that doesn't seem to work.
I have also tried to add a class to the function calling the kml layer in javascript (however my knowledge of javascript is rudimentary at best)
None of the answers to the other questions directly apply (or at least I cant see how they would)
here is my code: adding the kml layer and below that the div it outputs to in the dom.
KML add -
var geoLayer = new google.maps.KmlLayer('http://www.tijaniogunlende.com/dataviz/doc.kml');
geoLayer.setMap(map);
geoLayer.addClass( "overlay" );
and the DOM output -
By the way, it works just fine when I edit the css directly in chrome, but since it's styled inline I cant pinpoint where to insert the css in my code, nor can I target the element properly. At this point I'd prefer a javascript solution.
Please Help.
There is no implemented method that returns a pointer to the DOMNode that contains the elements of the layer.
But in this case, where all the GroundOverlays will be loaded from the same address, you may use a CSS-attribute-selector to apply a custom styling for the images, e.g.:
img[src^="http://gisatnrel.nrel.gov/"]{
opacity:.5;
}
Related
I've been using Figma a lot lately to draw / edit images and export them as SVG files so I can quickly use inside my apps' code bases.
There's just one drawback with that: Looking through the SVG code to find out what element is what.
Up to this moment I'm having to go through the SVG manually in order to mark the elements (with classes or ids) so that I can manipulate them properly via CSS or Javascript, what's quite tedious :-/
It would be really convenient to be able to set an id or a class to each element (path, line, circle etc..) via Figma and have it reflected in the exported code, I strongly believe that there must be a way to do so...
So here I ask: Is there a way to set certain CSS **class** or **id** atribute in Figma and have it declared on the svg code that gets exported?
There's a checkbox "include id attribute" in the export section.
It inserts the element's layer name as the id attribute on the resulting svg tag.
yay š
I am trying to find what is overriding my CSS element using chromes element selector but am unable too.
This answer seems outdated I can't find how to access "computed styles":
Chrome Developer Tools: How to find out what is overriding a CSS rule?
I don't know why this color is overridden with gray:
chrome
How can I find whats doing it with google chrome?
If you look at the image, it will tell you that the property is changed in the element.style.
In other words, the change is not applied using a selector such as class or id, but rather to the element itself.
This can be done in two ways, as far as I am aware.
1) In HTML, writing the properties directly within the element:
<div style="color:gray;"></div>
2) In Jquery, referencing the specific object (for example, using the id property) and then using the css property:
$('#divname').css({
color:gray;
});
With regard to finding what is causing the issue:
1) Finding out if the change has been made in HTML should be fairly straightforward, as you would just need to have a look at the HTML file.
2) If the change has been made through Jquery, things get a little more complicated: a ghetto method would be to search your script files for the "gray" string. Don't forget that scripts can also be embedded into HTML, however, looking for the property the HTML file would be a good way to proceed :)
I am new to the React javascript framework and have a question about styling using CSS.
Using jQuery, my old workflow was to pick an element on the screen, inspect it in Chrome, note the selector/s that triggered the styling, change the element styling in the browser, and then save it to css/sass etc. If the widget had a hover-state I could make the element visible to see what it looked like.
However using React, and especially for components that someone else has coded, where the component does a 'pop-up' etc, I can't manipulate the DOM to see the component because it is removed from the DOM before I can inspect it.
Now of course I could read the external library code, work out how it works, but CSS inheritance means it would take some time to work out exactly is happening and this seems to be slower than what I was doing before - especially for a simple change.
So my question is, what is the preferred workflow for overloading the CSS for DOM elements that are removed before they can be inspected?
I've tried using SVG cloning/templating using use:xlink (as discussed here), but I don't seem to be able to use CSS to change the path of the cloned graphic to be different from the parent.
Hopefully this pen explains the problem.
Is there a way to do this? Any thoughts would be really appreciated.
I wouldn't think of the elements resulting from <use xlink:href="#marker"> as copies. You're essentially referencing (re-displaying) the original template, and any changes to that template are going to reflect on all referenced instances.
The other thing is that those referenced instances are put in a document fragment that is not accessible by CSS. You cannot select the inner element of your instances with CSS. The styles given to the containing svg element are going to be applied to the outer shape of your template (which is why it works for the tutorial in your question).
I recommend using CSS to create these objects: http://jsbin.com/ijElUZiG/1/edit
Here is a demo SVG file. Please use Firefox for viewing because currently it seems to be the only properly showing browser.
The task is to construct a pure SVG document (e.g. not html-embedded) that will be able to show tooltips using only CSS features (no JS and also no :before/:after pseudo-elements). I managed to achieve this by using the HTML foreignObject element.
However, I can not find if it is possible to position such elements in relation (e.g. 10px to the left and top from it) to other in-document SVG objects without using JavaScript for it and without embedding the SVG file itself into some other document format (e.g. HTML).
In the final version of the file there will be 20-30+ tooltips, so it is desirable to avoid manual positioning. I was hoping there would be something for "attaching" them to other objects (withthe use of their IDs) or at least to their parent objects, but my search results only return documentation and questions regarding JS or HTML implementations.
add. notes:
1) CSS-only SVG file is required because the file is intended to be used on wiki sites, which prohibid SVGs that have javascript in them.
2) If I understand correctly, displaying HTML formatting in HTML foreignObject element is not a current SVG standard requirement for SVG user agents (i.a. web-browsers). However, Firefox seems to properly display them, and Iād rather use that (even not fully supported) opportunity. If I am missing some easier ways of achieving the same thing ā please do tell about them.
3) SVG code backup: pastebin.
Unfortunately, you can't achieve this effect using just CSS because positions in SVG are attributes, not styles.