I would like to add a theme support to my single page application. The requirement is that the theme change must be done locally by javascript (no server calls) to be used in offline mode. I use angularjs, so html will be changed in the router.
The only problem that I have, is how to treat css. Is there any js library to help me load css files? Are there any problems involved in that?
EDIT: I have found the following library https://github.com/rgrove/lazyload/ which should do the job of loading css files. The only downside of the library is that the last update of the library is more than one year ago. A more actively developed library would be appreciated.
style elements can be added and removed in JavaScript. Simply create the element and add it to the page to apply the rules therein, and remove the element to remove its rules. You can do the same with link elements referring to external stylesheets, but if you want to be sure to work in offline mode and if the sheet may not have been cached, style elements with inline rules might work better.
Here's an example using a style element:
(function() {
var css = "body { color: green; }";
document.getElementById("theButton").onclick = toggleStyle;
function toggleStyle() {
var style = document.getElementById("styleOne");
if (style) {
// Remove it
style.parentNode.removeChild(style);
}
else {
// Add it
style = document.createElement('style');
style.id = "styleOne";
if (style.styleSheet) {
style.styleSheet.cssText = css;
}
else {
style.appendChild(document.createTextNode(css));
}
document.body.appendChild(style);
}
}
})();
Live Copy | Source
Using a link would be even easier, because you don't have to deal with browser differences around where the style text goes.
If your theme only change the color, what I will do is using different css class to address this issue. Since CSS can be overwrote, you just need to attach themename as a class to parent element, and create corresponding rule for it. I would suggest to put all theme related css rule in a different file, that will be easier to maintain.
like
.themename.cssclassname{
color: red;
}
will trump
.cssclassname{
color: green;
}
And you can use less to create nested rules easily
By doing this, you will have 3 benefits.
All browsers accept this including IE7. (I think IE7 has some problems when you dynamically insert style tag)
All CSS file will be cached.
easy to maintain. (I really don't like mix CSS and JS together too much.)
Related
How can I do this(or something alike this) tooltip in only javascript without linking any template styles (I don't want to implement It to all the tooltips on the whole page). I'm designing the webpage on SharePoint which deletes all the ...
https://www.w3schools.com/css/tryit.asp?filename=trycss_tooltip_top
You can always add inline styles via JS.
var a = document.getElementsByClassName("class-name");
a.forEach(function(e) {
e.style.property = "value";
});
For adding :hover effects however, I think you need to append a stylesheet. Example.
Your other option is to use mouseover effects, but that is ridiculous when :hover exists.
Is there anyway I can access site CSS file and "ask" it to return the CSS style of the H1 element, or P or any specific element? (without primitive text scraping).
update: Server side solution also applicable
Pseudo code :)
CSSContent = (get CSS file content from external site)
$H1font-family = getStyle(csscontent, h1, get-font-family)
$H1font-size = getStylet(csscontent, h1, get-font-size)
It sounds like you want to override whatever is in the CSS. There are 2 ways of doing this (at least). One is by adding an additional class to the HTML tag; this solution is well outlined in another SO answer Overriding css style?
The alternative is to add inline style and add !important at the end, however the first solution is superior.
There is also the option of using e.g document.getElementsByTagName("H1") , which would identify all of a certain tag and then using that in a function to manipulate the style of that particular tag.
Hope this helps.
I have a situation where I am storing dynamic css data about a text object in a database as json. I need to map that same css data into styles in CKEditor. I am successfully able to load the classes into the CKEDITOR styles dropdown by parsing the json into the style set by running:
CKEDITOR.stylesSet.add('myStyles',styleObj);
Unfortunately this does not fully work with the onscreen text because the css does not exists as a file.
I've also successfully generate the css into the head of the dom by appending the dynamically generated css to a style tag. Unfortunately this still does not connect the actual css generated to the CKEDITOR because it is in a separate context.
Does anyone know how I can either connect document level css to the CKEDITOR instance or generate the CSS in a way that CKEDITOR understands? I'd prefer not to write a temporary CSS file to disk for every single user who needs to view the text object.
I figured out the answer to this by using the CKEDITOR.addCss() function.
Instead of trying to load the css into the document head as styles, the process can be much simpler by running CKEDITOR.addCss() function.
The code looks like:
for each css style found in the json:
styleObj.push({name:this.name,element:'p',attributes: { 'class':cssClassName}});
var cssSheetString = '.'+cssClassName+' {font-family:'+this.fontFamily+'; font-size:'+fontSize+'; font-weight:'+this.fontStyle+'; text-decoration:'+textDecoration+'; } ';
CKEDITOR.addCss(cssSheetString);
after the loop ends then also add the styles object:
if(!CKEDITOR.stylesSet.registered.myStyles){
CKEDITOR.stylesSet.add('myStyles',styleObj);
}
Just for posterity. I've seen answers that say this will work
CKEDITOR.on('instanceCreated', function (event) {
event.editor.addCss(styles);
});
but it does not, you have to use
CKEDITOR.on('instanceCreated', function (event) {
CKEDITOR.addCss(styles);
});
also if your styles variable changes you have to destroy and recreate your ckeditor instance with the new styles.
I am using some javascript on my page to put some addons on page, but javascript add some css styles and those new css styles override existing css styles on page.
Is there a way to disable new css styles. I know I can use javascript to delete new created css rules, but I dont want to use javascript. Is it posible?
Thanks
You can try to raise the priority of your css rules by some simply tricks.
For example, you can give an id attribute to your most external container element in the html, for example id="yourContainerId".
Then you can raise the priority of your css classes by prepending #yourContainerId to all your classes that you want to raise:
#yourContainerId .yourClass1 {
}
#yourContainerId .yourClass2 {
}
etc..
if you want to know more about css priority, this is a good resource:
http://www.w3.org/wiki/CSS/Training/Priority_level_of_selector
Note: this trick cannot work in some particular conditions, because if your javascript writes inline style on your html elements there is nothing to do, you can only remove them with js.
Tell me if you need a jsFiddle example
Just look at this css path and do the next code:
$("rel").each(function(){
if($(this).attr("href")=="insert you path here"){
$(this).attr("disabled", "disabled");
}
});
I have some pixel differences between Chrome and Safari, I haven't been able to find a suitable way to deliver different styles to each of them using a css hack.
I have been able to fix it with javascript but there is a delay as the page loads and before it is applied, so the user sees movement.
function chromeStyle() {
if (window.chrome) {
var a = document.getElementById("id");
if (a) {
a.style.marginLeft = 5px;
}
}
}
I know that it is possible to place the following code into the head of an html document and then use ".JS .mystyle{}" in a stylesheet to apply styles where javascript is enabled.
<script type="text/javascript">
document.documentElement.className = 'JS';
</script>
I wondered if in a similar manner it would be possible to create a selector for Chrome that could be applied in a stylesheet?
if (window.chrome) {
create a selector for chrome here
}
and in the stylesheet apply it as ".chrome .mystyle{}".
Thanks.
I dont know if this is easier then what you're trying to do with JS.
But when i need to override certain styles for a specific browser I just create a check for the browser serverside, and then include an extra stylesheet that overrides the base styles.