Develop Reference

Conflict in code between two JS Libraries

I'm trying to use two different libraries on a single webpage -- Materialize.css and JQuery EasyUI -- but their code seems to be interfering with each other and I'm running into errors. Is there any way I could ensure their codes do not conflict with each other and each run separately?
I guess using an iframe could be a solution here, but that would introduce other problems for me. Is there any other way I can ensure they both run on the same page in harmony?
EDIT: I should point out that I'm using the functionalities of each of of the libraries in two different sections of the page. More specifically, the Materialize.css is used for the navbar, text and the general look of the page whereas I'm using JQuery EasyUI just to display an editable datagrid.

Typically it is impossible to prevent conflicts between libraries that you yourself do not write/manage. If they don't have a means of preventing a conflict (like jQuery's jQuery.noConflict()), you just have a problem, except if you use module bundlers like Webpack which enables to load modules under different aliases so that they don't conflict.

Materialize and jQuery both use the $ prefix. Instead of using $.noConflict();, try assigning jQuery to a new variable as a prefix:
var jq = $.noConflict();
Then you'll be using jquery with the variable name as prefix, ex:
jq("div").click(function(){
//do something
});

Shadow DOM- encapsulate JS and CSS files

I have created a component (custom element) that will use specific version of JQuery and Bootstrap libraries. Now I need to add this component into other applications which are already using different version of JQuery and Bootstrap libraries. Some of the applications in which I will add my component is not using bootstrap library and including it may create other issues.
Now to keep the implementation simple, I am planning to use shadow dom. Is it possible to create a element using Shadow DOM which internally use multiple JS and CSS files but when included in other applications, does not cause any issues with respect to JS and CSS files its using.
What I know is shadow DOM does not encapsulate JavaScript. What are my options here ?

Concerning JavaScript libraries, it depends if the library was designed for that.
It's possible with jQuery thanks to its noConflict() mode.
Concerning CSS libraries, they can be included in the Shadow DOM using the #import url rule.
The rule should be placed at the very beginning of the <style> element.

Change href of anchor in YUI

I know jQuery although I need to use YUI to change the href of an anchor with a class name (which is why I can't use straight up JavaScript).
This is what I have in jQuery, what's the equivalent in YUI?
$("a.magic-link").prop("href", "http://www.magic.com");

Use setAttribute(). See http://yuilibrary.com/yui/docs/api/classes/Node.html#method_setAttribute for reference documentation.
If you're working with DOM nodes in YUI, you should definitely read the Node user guide, it has lots of examples to help you understand how the API works in general: http://yuilibrary.com/yui/docs/node/
Edit: Thanks, Juan! Please also see http://jsrosettastone.com, which maps jQuery methods to YUI methods. The DOM APIs are conceptually pretty similar, they just have different names for things.

I keep editing CSS of dom elements in my javascript. Is there a good model to follow that allows no 'CSS' to be written within my javascript?

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.

Javascript Select Box Style Example (no Javascript framework dependency)

I really like projects like this: http://harvesthq.github.com/chosen/ but they use jQuery, which is not an option for the project I am on. I just need a regular Javascript example that styles select boxes but I cannot find any. Does anyone know of one that does not have a dependency on a Javascript framework?
Edit: Since someone thinks they should close this question, how about this instead: could you provide an example of how one would use Javascript to mimic a select box with html/css and still get the form value from a select box?

If your site is in HTML5, you could use the <datalist> element which basically does the same thing as the jQuery chosen plugin (the datalist element in the HTML5 specification).
The problem is that it is far from being implemented in all modern browsers yet and there’s no polyfill I’m aware of that do not rely on jQuery (but you can always make it degrades gracefully using this fallback solution).