How can I load a specific css file in a specific case with 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?

Please do not ask "is that possible"? Some people might take you literally and answer "Yes" (which will almost always be the answer, since we are working with computers, for which most things are possible). If you want to know how to do something, then ask how to do it. Also, please ask one question at a time. The spin loader is a completely distinct issue from dynamically loading CSS. Finally, there is no need to specify "Vanilla JS". That is the default unless you specify some specific framework or library. — user663031
– user663031, Commented Dec 25, 2016 at 13:17
I'm not killing you. I'm making helpful suggestions. If you choose not to accept them, so be it. Another helpful suggestion: take helpful suggestions. — user663031
– user663031, Commented Dec 25, 2016 at 13:51

user3378165 · Accepted Answer · 2016-12-25 15:45:07Z

5

In JavaScript this how you check if a class exists in a page:

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

And this is how you append a css file to a 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);
}

The loader part:

You first have to include your spinner in the 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();

edited Dec 25, 2016 at 15:45

answered Dec 25, 2016 at 9:59

user3378165

6,99618 gold badges66 silver badges108 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Robeala Over a year ago

var checkButtons = document.getElementsByClassName('button');        if (checkClasses .length > 0) {         // Load CSS Files from assets/stylesheet/shortcodes/buttons/button.min.css        } else {        	// Pass to next        }

I will put your complete append script in if ?

user3378165 Over a year ago

Exactly. You have to put the second code snippet within the if

Robeala Over a year ago

But what about spin loader :) . If i can ask you, how do i can integrate it !?

user3378165 Over a year ago

I'm glad it helped, I will answer you later about the loader.

Ivan Chaer · Accepted Answer · 2016-12-25 14:26:48Z

See it in action.

// Let's 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>

Collectives™ on Stack Overflow

How can I load a specific css file in a specific case with JavaScript?

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related