I want to include a css file to a jquery plugin.
I can choose one css file from several css files I have.
The plugin shouldn't work without a css file because it will be unordered - the user of this plugin must specify which css file she wants.
I want include the css file in such way I can change tomorrow easily.
What is the best way to do it?
If your plug-in needs to load in, or have the url of, a css file then I'd suggest any of the following:
have the plug-in show an text input element requesting the url of the preferred CSS stylesheet, or
pass a stylesheet as one of the plug-in's arguments, for example: $('#element').plugIn({'stylesheet':'example.com/css/stylesheet1.css'})
I'd probably also specify a set of default styles in the plug-in itself, so that the plug-in has some defaults to work from.
Further to all of the above, though, if your plug-in assigns class, or id, names to elements in your mark-up it's probably worth including a comment in your plug-in outlining the various names that are assigned, and under what circumstances, and simply suggest to the users that they add css for those names in their usual css, or in the head of their document.
Related
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.
I am using bootstrap to build my design, but it is too rigid.
I want to clear the defaults and override the styling for a specific element.
In other words, I want to style my active class from scratch making use of defaults of JavaScript, without overriding every single style on that element.
How can I do that?
You can either directly edit your stylesheet, or better, create a new stylesheet and call it something like custom.css, and link to it from your header.
Then you can proceed to add classes to that stylesheet, and as long as it is loaded after bootstrap, the styles should override.
you can also use the built-in bootstrap customizing tool before downloading a package here: http://getbootstrap.com/customize/
or you can use this tool: http://bootstrap-live-customizer.com/
of course these two tools would work if you're looking for something better looking but not necessary specific like a design comp, otherwise, a custom stylesheet as mentioned above is the best way to go.
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
My web site changes the CSS of some DOM elements when certain events occur, but I find it icky to have CSS in both my static CSS files and in my javascript files. Is there a good model that I can stick to that allows me to change the CSS of elements in javascript while not having explicit CSS in my javascript code?
Currently I'm using calls like:
$domElement.css ('cssProperty', 'cssValue');
in my javascript code, but I don't want to do that since the CSS info should be in its own file.
What good options do I have?
I appreciate any help!
One option is to define different classes in your CSS file, then do this instead,
$domElement.addClass("theclassname");
Of course, if you're generating the 'cssValue' part of your example dynamically, then you can't specify the CSS ahead of time, so you have no choice but to modify it directly with JavaScript as you are currently doing.
hope you can help me, again :)
i want to build a little webbased gui designer. the user can switch into editor-mode and can place the components wherever (s)he wants via drag'n'drop. when (s)he switches back to user-mode i want the position-details in the external css-file to be updated via javascript.
i looked into some examples that sort of do what i want, but i can't seem to figure out, how to get it working.
thnx in advance,
dg
In order to edit external stylesheets with JS you'll need to use the methods listed here : http://www.quirksmode.org/dom/w3c_css.html (see Accessing Stylesheets and Changing Style Sheets). As you can see from PPKs tables, there some significant CSS incompatabilities - this is edge case stuff and I do not know how you would save this generated CSS file.
I would look at posting (possibly with ajax) the values back to the server which generates the new CSS file which is then called by the user-mode page.
In the edit mode I would have all the styles inline (style="...") and then when the page is submitted, enumerate each element's style property to extract the values and use them to build a POST request. Then create the new file on the server.
you want to use jquery... it uses css to select groups of elements and allows you to manipulate the css style on the elements you have selected
lets say you have an div element with the class awesomeDiv:
<div class="awesomeDiv">some content</div>
you can select it using jquery with the following line:
$(".awesomeDiv")
and you can change the css like so:
$(".awesomeDiv").css({'background-color': '#000000', 'width': '250px'});