I have a simple html snippet that I add to the document during runtime. I am using jQuery's selectors but that should irrelevant to the issue I am facing.
When using:
$("#elementID").html()
The code is displayed but with no CSS applied. The behaviour make sense since the CSS has already been loaded and applied.
My questions are:
- Is there away to "refresh" a DOM element in order to re-apply CSS on it after its html content has been changed?
- or is there a way to apply CSS on the code I have in the JavaScript before adding it to the DOM element?
I am aware of various JS\html templates library but at this stage I am trying to minimize the dependency on extra libraries, specially since that the snippets I am generating\injecting are very simple and I dont mind them staying in the JS code
Jamil
You are wrong. CSS is applied all the time (during runtime) - look at this jsFiddle example. You messed up with something else.
Are you sure css is not applied? Because it should be. If you add a new element to the DOM, it should just take on the styling from any css files you have loaded. How are you applying the css?
.trigger('create') on the element will force a re-rendering of the element if needed
Related
My CSS code is causing Codemirror to display incorrectly. See below:
How can I prevent my styles from affecting the elements created by Codemirror so that Codemirror will display correctly?
Even if I manage to tweak my CSS code so that both my page and Codemirror display correctly, it will be a nightmare in the future because any future styles may affect Codemirror. Also my CSS file is generated dynamically depending on values given by the client, which further complicates things.
One possible solution is to create a class called not-codemirror and apply it to every single element on my site, other than elements for Codemirror. This seems like overkill to me, especially considering most pages will not be using Codemirror. All pages share the same CSS file.
Also, I would prefer a non-jQuery solution, if possible. Thanks
EDIT
I now have it displaying as this:
It should look like this:
I added:
display: inline;
margin: 0;
padding: 0;
to .CodeMirror span in codemirror.css.
Codemirror markup has a specific class .CodeMirror (at least in latest version it's present);
So if you want other styles not to clash you can use .not :
clashing-selector:not(.CodeMirror)
You know the problem lies in conflicting CSS declarations, so I would suggest giving each of yours or Codemirror's tags which are conflicting a class to clear up confusion. It's pretty clear that Codemirror should be the one you change since it sounds like you are fairly well bound by your site's dynamic CSS. This 'targeted' solution is a lot simpler than attacking your entire site with not-codemirror tags (and thankfully, does not involve any jQuery), and I don't think it will be that difficult to figure out what to change in Codemirror's source if you are relatively familiar with your own CSS.
If it turns out you run into issues with specificity as well, you may be able to justify using an !important tag, but I would try to stay away from that on principle.
This is a bit of a long shot, but does anyone know of a tool that can export a png from an svg input AND retain the CSS styles applied to it. I have used canvg, but everything appears black in the output, as the styles are kept in css and not part of the svg document.
The solution is web based, and i'd like to perform the conversion client side using a javascript solution if possible.
Update:
I understand that you are using an external stylesheet for your SVG markup. So I think you need a three-step solution:
Make the stylesheet declarations that apply to the SVG markup inline. This is done best client-side. I do not have a solution in source code right now, but it should be possible to use W3C DOM Level 2 Style interface implementations to find out the selectors that apply to an element, and the declarations that have been used in the corresponding blocks (document.defaultView.getComputedStyle() alone will probably result in an SVG fragment having too many inline declarations).
Convert SVG markup with inline stylesheets to PNG. This is best done server-side (e. g., with ImageMagick), so you would need to send the SVG markup to the server.
Serve the PNG resource to the user.
Those two steps could be performed on form submission where in the onsubmit attribute you do step #1 and then call the form's submit() method.
#pluke, you've asked in the comments of the reply of #PointedEars for source code to turn external CSS styling into inline styles for your SVG. I've spent hours of searching for such a tool myself, and found none. However, I've discovered a quite specific solution that applies SVG generated with Rickshaw / D3: #thirdcreed has posted the JavaScript it at: Rickshaw CSS/Axes in JSDOM - just adapt those D3 specific selectors to your custom CSS / SVG elements as needed.
I want to apply ALL the CSS styles 100% with JQuery/JavaScript
But is is bad idea to do this?
Why would you create that overhead in javascript when straight HTML/CSS is fully capable of handling it? (in fact intended to)
Also, you're adding an unnecessary requirement to the styling of your site: having javascript enabled.
Main reason IMHO: Performance! Native CSS is much faster than JS.
Also worth mentioning:
Doesn't work for users with NoScript etc.
Overhead. Not such a big deal i think. There are more important things to optimize.
If you lazy load stuff, e.g. by using jQuery.load(), you have to reapply your styles to these elements. Not nice :/
Conclusion: CSS is made for styling, JS isn't.
If your visitor has javascript disabled, they'll see an ugly white page without any styling.
I don't see why you would do this, to be honest. It's not user-friendly.
Use a stylesheet.
A lot of people say to apply classes not individual styles.
You will see varying levels of performance degradation across different browsers. It's faster and cleaner to let the application render the styled HTML page because that's what it's optimized to do.
If you're dynamically loading content and already have fade effects/transitions so your content is only revealed after it's styled, you might be ok.
if you are going to do this, only apply styles with jQuery (rather than using javascript) to maintain cross-browser compatibility.
I would recommend against your approach because of the time it will take jQuery to loop through all of your elements and apply styles.
something like $('span').css(...); has to traverse the entire DOM and loop through a collection of elements. $('#title').css(...); does not have to loop through the entire DOM because it immediately knows where to look.
Also, browsers are designed to process stylesheets and render your styled elements very quickly.
I am working with an unnamed javascript plug-in.
During a certain operation of said plugin, under a specific circumstance, the plugin changes the style attributes of certain elements on my page.
Without delving into the plugin code itself (I want to avoid that if possible), is there a way to prevent the style attributes of those elements from being altered? I'm thinking perhaps a block somehow, or a way to lock the current style attribute to prevent changes?
I'm leaving the plugin unnamed because, while it would be great if someone actually could walk me though editing a plugin's code to meet my needs, I strongly doubt that's going to happen. And if there is a solution that fits my above perimeters, it would be much more useful and easier to implement.
Thanks in advance for any advice.
You could always add !important to the style rules that you wish to prevent the plugin from overriding (I'm assuming that it inserts inline styles.)
Like this (fiddle)
I have created a Javascript based element that can be embedded into websites. The Javascript itself adds the HTML code into a pre-defined HTML container and dynamically loads the necessary CSS file that contain the element's visual definitions.
The problem starts when the site itself has its own definitions for general items. For example: The site's CSS defines a certain list style which is applied on the element's list because the element's CSS doesn't define an explicit list style or if the site's CSS overrides the element's CSS definition.
For the time being, I was able to solve this specific issue by explicitly defining the list's style and adding the !important definition. However, I would definitely want to go for a more robust solution that will assure that:
1. CSS definitions from the site's CSS that are not explicitly defined in the element's CSS will not be applied on the element
2. I will not need to explicitly add the !important definition to every one of my CSS definitions
Is there a general way in which I can specify that a site's CSS will not be applied on a certain element or that only a certain CSS will be applied to a specific element?
Any help will be greatly appreciated.
You need to use a localised reset.
Grab an existing CSS reset, such as Eric Meyer's Reset Reloaded and namespace all the selectors with your parent element, e.g. #something a { ... }.
I was going to put up the same answer as Alex, but he beat me - but I was also going to add:
If you're not going to use #alex's suggestion then ultimately you have to explicitly style all of your elements the way that you want them to appear; using selectors that keep your styles local too (and don't interfere with the parent site) - in the same way that the localised reset is suggested.
Update
Or you could do what Google Translate and many other widget-type things do, usually a no-no but in dynamic scenarios I think perfectly acceptable; since the visual style of your elements is not just important to you but to the container site: use inline styles.
Final update
So I thought I'd just double check what Google Translate does. And of course it's an iFrame inject in addition to using inline styles. They no doubt use inline styles to maximise compatibility and so that the browser doesn't have to make another request to get the stylesheet; and they would be using an iFrame so they can ensure a consistent look and feel.
Consider both of those points in tandem - and weigh that up against the amount of work that might be required in resettting all the styles for a minority portion of the page; or defining rules for every CSS property you need to control - which, let's face it, is basically all visual CSS properties.
The iFrame solution actually seems to offer the best solution - if you can use it; hence I've +1'd the first comment by #roberkules on your question.