jQuery: items/classes with same names - javascript

I downloaded 2 plugins http://luis-almeida.github.io/jPages/itemsperpage.html and http://jplayer.org/.
The 2 plugins are both using jp-next and jp-previous names.
Is there anyway i can make this work ?
Maybe i can somehow limit the .js file of one plugin inside a <div> and the other .js file in another <div>?
Or can i possibly rename the jp-next and jp-previous to something else ?

I'm not seeing jp-next or jp-previous as css selectors in the jPlayer documentation http://www.jplayer.org/latest/developer-guide/#jPlayer-predefined-css-selectors however I do see those listed as part of jPages https://luis-almeida.github.io/jPages/. In the case of jPlayer, you can override the default css selectors so if you run into some sort of conflict they can be renamed as docs in the link above show in the constructor.

Related

How to know from where element.style is applied into CSS

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.

Could I use an old Javascript file with a new CSS file in Materialize?

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.

How to remove/reset external css styles with JQ?

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

Different css files to a jquery plugin

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.

Coda-slider Debugging "no-js" tag not being removed

Not really sure what's going on here, been staring at this for hours :/ ... basically, I'm implementing CodaSlider using the same CSS, same div id's, and same code as another project but it's not initializing the script and the "coda-slider-no-js" tag is not being removed.
The only thing that would be different would be that paths for the respective JS files (which I have checked and verified that they are in fact loading).
Any ideas for debugging (there is no coda-slider.css file because I have included the relevant styles inside my main style.css file).
Here's the page where it should be working:
http://easterndancer.com.s66112.gridserver.com/gallery/video/
You had a few issues (but you have just changed the source whilst I was debugging!)
I cannot see the main_slide element that you are trying to use for the slider. When you initialise the coda slider $('#main_slide').length is zero. Are you sure this element exists in the dom?
You are including both full and packed versions of the easing script file. (as a rule do not use packed - it can cause issues, use minified with gzip compression - notice jquery does not come with a packed option anymore)
Also are you sure the plethora of plugins you are using are compatible with the jquery 1.4.2?
You have duplicate id's in the dom "upcoming_events" - (always try to test your dom using the w3c validation tool). Duplicate id's can lead to unexpected results with jQuery.
Off Topic - Your initial page load is 1.2Mb which is very large, consider reducing the image quality/sizes

Categories

Resources