I am working on the back end of a website and thought of installing the JavaScript SpellCheck (link here: http://www.javascriptspellcheck.com/). I followed the instructions and installed the plug in with ease and it works like a charm.
The problem is that this plug in overrides my css design for the input box and text area.
I had been trying to come to a solution but could not get anywhere close. Did anyone, who installed JavaScript SpellCheck, encounter this problem and how to solve this.
Update
I even tried putting the css file after the plugins and it does not work.
Put your css files after the plugins' css file, so that your file's css rules would have more precedence.
If you still getting overridden css rules, then use the most relative(nested - more the nesting more the precedence) selectors and !important if necessary.
Related
I'm using CKEditor to allow users to edit HTML documents. I need to allow the users to be able to place any kind of CSS or HTML into their documents. When the user's document CSS has !important rules they change the styling of the CKEditor toolbar.
This can be seen here: https://jsfiddle.net/hqpfjzyr/1/
Click on the "Link Preview" and you'll see the buttons of the toolbar are also red.
This behavior is described by the CKEditor docs here (https://docs.ckeditor.com/ckeditor4/latest/guide/skin_sdk_reset.html) but I can't seem to figure out how to apply it. My skin stylesheet includes a reset.css but it doesn't seem to affect the styling.
The only thing that I can think of is to add more CSS targeting the toolbar and explicitly setting every attribute to the correct value with !important rules but that seems like a daunting task.
What am I missing here?
This behavior is described by the CKEditor docs here (https://docs.ckeditor.com/ckeditor4/latest/guide/skin_sdk_reset.html) but I can't seem to figure out how to apply it. My skin stylesheet includes a reset.css but it doesn't seem to affect the styling.
What is described on CKEditor docs doesn't include case with !important flag, because it can't work like you want to. This flag overwrites other css rules including ones in reset file. If you still want to use !important inside editor you might consider to use classic editor instead of inline. Change CKEDITOR.inline( to CKEDITOR.replace. How does that help? Classic editor is rendered inside iframe, which has separate styles that can't affect anything outside it.
I have a <ul></ul>class in which an element.style{} is getting applied from a .js file. Can I know how to know the exact .js file from which it is getting applied and the line of code? Below is the ss attached.
Check for some file name with flexslider or jquery.flexslider.js. If you have it then css is coming from their only search with .slides or with translate3d. If you don't have any then
the only possible way is with cleaver search. 1st search with ".slides" within your project. If you found any normal class not any library thats the place where it is coming. If you found any file like slider, carousel or owl or any other js file just delete the content of those file and refresh the page if the css is still their look for other file. If nothing happen look with parent class or ID.
If you use an IDE you can do a search for the styles applied in question in the javascript files, the IDE will highlight all the occurrences of the keywords that you use to search for. If the JavaScript file has been minified it can make it impossible because you won't have any idea what is what without a lot of analysis work. If you have the original source code just do a search it will allow you to do analysis really quick.
In Microsoft Edge if you click inspect element the CSS of element will appear on the right side of the screen. You can see which CSS style are being applied and use the checkmark interface to apply or remove the style. This will tell exactly where the CSS is coming from. If you want to know where the JavaScript is coming from I will use the search feature in my text editor to find the specific functions, or remove script tag temporary until I locate it.
This is my short problem, in my page I have an old version of Materialize, and I have seen in the last version of it that they have added the class "xl" to define grid's sizes.
If I upgrade all files, my page will break, because for example, in my JS file I open the modals with the function "leanModal()" and in the new version they use "modal()" and if I upgrade it, is a lot of time!!.
My questions is the next:
If I only need the class "xl" can I upgrade only the CSS File? If I would make it, would have a problem in the future with the JS File?
My version of Materialize: v0.97.7 (2014-2015)
The actual version of Materialize: v0.98.1 (2017-Now)
I'm not all that familiar with Materialize but I believe it has components that are implemented with a mix of CSS, HTML and JS. If you are using any of these components then yes, there's a possibility that other things might break. Typically these components will be expecting a certain HTML structure and CSS classes to be available/used. If the name of something has changed in one area of the framework then it's reasonable that something else could have changed elsewhere. You'd have to verify that yourself.
Yes, You will have problems because the JavaScript calls specific classes in the CSS for that version.
I want to reset remove or make initial all the css properties defined in an external css file. I want the solution should also work when I edited/added/removed properties in css file.
So solutions in here don't work.
For example $('div').css('width','');, is not a solution cause it clears the width property in a HARDCODED way.
Also solutions like $('div').attr('style',''); does not work cause I do not use inline styling, also again $('div').removeClass(''); is not a valid solution.
Any answer would be appreciated, thanx.
You can playaround the code here: http://codepen.io/ertugrulmurat/pen/JEhfe
And; How to dynamically remove a stylesheet from the current page is not a solution, another side effect of this is that it removes all styles for all elements, this is not the case wanted
Just use this $('link[rel=stylesheet][href~="external_css_link.css"]').remove(); and remove the link of the css file which you don't want in similar manner you can again add the file
UPDATE
I tested the same in local file system where css is other file and run the same code and found that the style is removed completely and it behave in complete different manner as it working in the online javascript editor jsfiddle or any other because they internally include the css in the page they don't include the an external link thats why
$('link[rel=stylesheet]').remove();
not work here in your sample
in other way it remove the style completely
I am developing a component for Joomla website. This website has a sophisticated template with fancy css and scripts (namely some K2 components are named) In this component I am using colorbox to display modal picture gallery but what happens is
as soon as this component is called CSS properties and functions of javascript of template fails resulting in some weared page displays.
As I have not written these CSS and javascripts it will be quite cumbersome for me to prevent conflicts among CSS and scripts.
So what is my question is
Is there any way to prevent conflict between these scripts without diving much into the actual scripts.
Please guide me through this.
Thanx in advance
K2 is a content component for Joomla. It's not unusual for framework plug-ins or add-ons to have conflict(s) with one another. Unfortunately, you might have to search into Joomla or K2 forum for answers. Either that, you can try disabling other plug-ins one by one till the conflict disappears (hopefully).
One of the main conflicts in JavaScript is between MooTools (required for some Joomla functionaly) and other JavaScript libraries. Most common is the $ global variable which is commonly used as a DOM selector.
In MooTools, it only selects by ID, while in other libraries like JQuery, it uses CSS selectors.
So if you have a Joomla extension that loads another JavaScript library like JQuery, you'll run into problems. For JQuery, there is a specific solution.
http://docs.jquery.com/Using_jQuery_with_Other_Libraries
For other libraries however, you'll need to dive into the JS, or use an extension that offers the same functionality but uses MooTools.
As for CSS, the only way around this is to edit the CSS files. Good extensions should use some sort of namespacing for their CSS. For example, prefix all CSS classes with the component name. Or wrap all HTML in a wrapper element named after the component, or module etc.
If this doesn't exist, you'll have to add it yourself.
Probably the easiest is to edit the extensions HTML and add:
<div id="extension-name">
<!-- extension HTML here -->
</div>
around the extension.
Then edit the extensions CSS and add
#extension-name
before all CSS selectors.
For example, if you have:
.left-column {
float: left;
}
change it to:
#extension-name .left-column {
float: left;
}
You can even automate this process with a regex search and replace.