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");
}
});
Related
hope you are fine
I just wanted to know if there is a method to reset all the styles that have been altered with js
which appear here in the photo
and Thanks.
Maybe you can try to unset all inline CSS? Try to use
document.querySelector("#elementid").style = "";
Because CSS added with JS is just inline style. These from external CSS sheets or tags would be preserved.
Also maybe think about adding a class to your element with JS using
element.classList.add("class");
and then removing when you need it using
element.classList.remove("class");
instead of adding new inline styles with
document.querySelector("#elementid").style = "some styles";
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.
Is there any easy way to take in a block of CSS from the user from an textarea and add this styling to the styling for a specific div?
See I'm creating a simple code preview tool like codePen, so far I have two textarea inputs, one for Html and one for CSS, as the user types in the Html input this updates the preview pane, this works, now I want to do it for CSS.
CSS textarea could contain a few blocks like:
h1 {
font-size:23px;
}
.myClass {
//Somestyle
}
Now I want this CSS to be contained in the
<div id="preview"></div>
So it doesnt effect the rest of the page, so a manual example would be
$('preview h1').css('font-size','23px');
Anyway to automate this?
Do it like this. Hope it works.
Add a style block for dynamic styling.
<style id="dynamicCss">
</style>
on the apply button click handler, set the style
$('#btnApplyStyle').click(function(){
$('#dynamicCss').html('').html($('#txtaCustomCss').val());
});
See the Fiddle here.
Please use developer tools to see the new style tag added to head section.
This script simply adds rule to the document. If you don't want that behavior, you can use this plugin in combination with my logic to set scope for rule. You will need to place the style tag inside of the container and add a scoped attribute to style for it to work. Please see the documentation.
If you want to use the iframe approach instead, you'll first need an HTML document to host inside of the iframe. The iframe document should be loaded for the same origin (protocol + domain) as the host document (cross-document cross-domain stuff is tricky otherwise). With your application, this is probably not an issue.
Host page:
<iframe id="preview" src="preview.html"></iframe>
To make things easier on yourself, this iframe document could load a script with convenience functions for injecting the HTML and CSS from the host.
preview.html:
<html>
<head>
<script src="preview.js"></script>
<style type="text/css" id="page-css"></style>
</head>
<body></body>
</html>
preview.js:
function setHTML(html) {
document.querySelector('body').innerHTML = html;
}
function setCSS(css) {
var stylesheet = document.querySelector('#page-css');
// Empty the stylesheet
while (stylesheet.firstChild) {
stylesheet.removeChild(stylesheet.firstChild);
}
// Inject new CSS
stylesheet.appendChild(document.createTextNode(css));
}
Now, from the host page, you can call these functions whenever your text inputs change:
document.querySelector('#preview').contentWindow.setCSS(someCSS);
This plugin may come in handy: https://github.com/websanova/wJSNova/downloads .
Edited
Insert the text of the rules in one of the existing cssStyleSheets you have.
It will be something like
window.document.styleSheets[0].insertRule("a{color:red;}",window.document.styleSheets[0].cssRules.length)
The first parameter is the rule to insert and the second is the index.
Fiddle
The only problem here is that this will affect all the DOM on the page maybe looking for a way to add the #preview before each css rule to get something like
#preview h1{}
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.)