matchMedia-setting

matchmedia.html

<!-- LINK with required data attributes to load diff CSS -->
				<link id="mediaLoader" data-mobile="assets/css/mobile.css" data-tablet="assets/css/tablet.css" data-desktop="assets/css/desktop.css" rel="stylesheet">
				<script>
				(function(){
					// Get the Link and data values
					var _link = document.getElementById('mediaLoader'),
					_mobile   = _link.dataset.mobile,
					_tablet   = _link.dataset.tablet,
					_desktop  = _link.dataset.desktop,
					_current = _link.dataset.desktop,
					_new ='';

					// A Function to do all check and settup work 
					// Media is for testing only
					function setMedia(){ 		
						// Mobile check & set
						if (window.matchMedia('(max-width: 480px)').matches){
					  		_current = _mobile;
					  	// Tablet check & set
						}else if (window.matchMedia('(min-width: 481px) and (max-width: 768px)').matches){
					  		_current = _tablet;
					  	// Desktop check & set
						}else if(window.matchMedia('(min-width: 769px)').matches){
					  		_current = _desktop;
						};

						// Avoid Loading src multiple time when resizing
						if(_current === _new){
							return
						}else{
							// Set the HREF attribute
							_link.setAttribute('href', _current);							
							_new = _current;
						};					

					};

					// Resize event for checking 
					window.onresize = function(){
						setTimeout(function(){
							setMedia();
						}, 500)
					};

					// Run the check function
					setMedia();

				})();
				</script>

UDscntest.js

(function(){var a=function(c){var b=this;b.obj=c;b.showData=b.obj.attr("data-showOn");if(b.showData!==undefined){b.init()}else{return}};a.prototype.init=function(){var c=this,b=store.getAll();c.showOn=c.showData.split(" ");c.expLength=c.showOn.length;c.currExp=$.map(b,function(d,f){return d});c.loop()};a.prototype.loop=function(){var d=this;d.count=0;for(var c=0;c<d.expLength;c++){for(var b=0;b<d.currExp.length;b++){if(d.showOn[c]===d.currExp[b]){d.count++;break}}if(c+1===d.expLength){d.validate()}}};a.prototype.validate=function(){var b=this;b.obj.show()};$.fn.setExperince=function(){return this.each(function(){var b=new a($(this))})}})();

		(function() {
			var UDexp = function(obj) {
				var sf = this;
				sf.obj = obj;
				sf.showData = sf.obj.attr('data-showOn');
				if (sf.showData !== undefined) {
					sf.init();
				} else {
					return;
				};
			};
			UDexp.prototype.init = function() {
				var sf = this,
					_data = store.getAll();

				sf.showOn = sf.showData.split(' ');
				sf.expLength = sf.showOn.length;
				sf.currExp = $.map(_data, function(e, o) {
					return e;
				});

				sf.loop();
			};

			UDexp.prototype.loop = function() {
				var sf = this;
				sf.count = 0;
				for (var i = 0; i < sf.expLength; i++) {

					for (var j = 0; j < sf.currExp.length; j++) {
						if (sf.showOn[i] === sf.currExp[j]) {
							sf.count++;
							break;
						};
					};

					// Loop complete test
					if (i + 1 === sf.expLength) {
						sf.validate();
					}
				};
			};

			UDexp.prototype.validate = function() {
				var sf = this;
				sf.obj.show();
			};

			$.fn.setExperince = function() {
				return this.each(function() {
					var udexp = new UDexp($(this));
				});
			};

		})();


	$('.protoExperience').setExperince();

	<style>
   .protoExperience{
      display: none;
   }
</style>
<div class="protoExperience" data-showOn="ssnYes demo-july" style="width: 300px; height: 400px; background-color: red">
   This isSample
</div>