How to load a specific css file in a specific case using JavaScript?

Question

I want to:

// Display loader spinner // Check if ID or Class exist in HTML Page // If ID or Class are found, load a specific css file // Display HTML PAGE 

Is it possible?

Answer 1

In JavaScript, this is how you check if a class exists on a page:

 var isClassExist = document.getElementsByClassName('yourClass'); if (isClassExist .length > 0) { // elements with class "yourClass" exist } 

And here is how you add the css file to the page:

 var cssId = 'myCss'; // you could encode the css path itself to generate id.. if (!document.getElementById(cssId)) { var head = document.getElementsByTagName('head')[0]; var link = document.createElement('link'); link.id = cssId; link.rel = 'stylesheet'; link.type = 'text/css'; link.href = 'http://website.com/css/stylesheet.css'; link.media = 'all'; head.appendChild(link); } 

Part of the bootloader:

First you need to enable your counter in html:

 <div id="dvReqSpinner" style="display: none;"> <br /> <center><img src="~/images/loading_spinner.gif" /></center> <br /> </div> 

Then in JavaScript (using jQuery):

 $("#dvReqSpinner").hide(); 

Answer 2

Look at the action .

 // Let load the bootstrap CSS, for example. var css_file_path = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css?" + (new Date()).getTime(); function show_spinning_loader() { var el = document.createElement("div") el.id = "overlay"; el.innerHTML = '<i class="fa fa-spinner fa-spin spin-small"></i>'; document.body.appendChild(el); } function hide_spinning_loader() { var overlay = document.getElementById("overlay"); if (overlay) { overlay.outerHTML = ""; delete overlay; } } function remove_class(name) { document.body.className = document.body.className .replace(new RegExp('(?:^|\\s)' + name + '(?:\\s|$)'), ' '); } function css_load_callback(m) { hide_spinning_loader(); remove_class('loading'); }; // Load the stylesheet. var url = css_file_path, head = document.getElementsByTagName('head')[0], link = document.createElement('link'); link.type = "text/css"; link.rel = "stylesheet"; link.href = url; // Show the loader. show_spinning_loader(); document.body.className += " loading" // Trigger stylesheet import. head.appendChild(link); // Listen for the DOM onreadystatechange event. if (link.addEventListener) { link.addEventListener('load', function() { css_load_callback(); }, false); }; // Hide loader when done. var cssnum = document.styleSheets.length; var ti = setInterval(function() { if (document.styleSheets.length > cssnum) { css_load_callback(); clearInterval(ti); } }, 10); 

 body.loading * { display: none; } body.loading #overlay { display: block; } #overlay { width: 100%; height: 100%; display: block; background: rgba(0, 0, 0, 0.5); top: 0; left: 0; right: 0; left: 0; position: absolute; } #overlay i { position: absolute; left: 50%; top: 50%; display: inline-block; vertical-align: middle; text-align: center; } .spin-small { text-align: center; margin: auto; font-size: 20px; height: 20px; width: 20px; } 

 <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet" /> <h2>Twitter Bootstrap</h2> <p>These styles were loaded from bootstrap.</p>