import external CSS file into JavaScript innerHTML [duplicate] - javascript

This question already has answers here:
Programmatically load CSS using JS
(3 answers)
Closed 19 days ago.
I have created a webpage using the InnerHtml function in JavaScript. I now want to import some icons into this JavaScript file.
These icons have come from an external site, which contains a CDN link.
How could I do this?
I have tried to write the CDN link inside the tags of the InnerHTML function, as well as in the HTML part of the InnerHTML function. However, neither way imports the icons correctly.

You can use <ion-icon></ion-icon> and specify the name in it like
<ion-icon name="home-outline" class="home-icon"></ion-icon>
Note: It works with ion-icons package only.
Simple example:
* {
box-sizing: border-box;
}
<html>
<head>
</head>
<body>
<div class="container">
<ion-icon name="home-outline" class="home-icon"></ion-icon>
</div>
<script type="module" src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.js">
</script>
</body>
</html>

Related

Replace Head Stylesheet Path in Javascript [duplicate]

This question already has answers here:
Changing the href of a link tag using JavaScript
(2 answers)
Closed 7 years ago.
I have the following HEAD tag
<head>
<title>Test</title>
<link id="css1" href="demo.css" rel="stylesheet" type="text/css">
</head>
What I want to be able to in Javascript is somehow
document.head.children["css1"].href = "demo2.css";
Any ideas, I would like to be able to the change by id as there might be more tags in the head
In a script tag anywhere after that link, you can indeed update its href:
document.getElementById("css1").href = "demo2.css";
Normally, it's best to put your script tags at the end, just before the closing </body> tag. In your case, since you're changing CSS, to avoid having the previous styling "flashing" at the user, you might want it higher up so it's handled sooner, though.
This page shows you how to do that:
DEMO
javascript
function swapStyleSheet(sheet) {
document.getElementById('pagestyle').setAttribute('href', sheet);
}
html
<link id="pagestyle" rel="stylesheet" type="text/css" href="default.css">
<button onclick="swapStyleSheet('1.css')">1 Style Sheet</button>
<button onclick="swapStyleSheet('2.css')">2 Style Sheet</button>
<button onclick="swapStyleSheet('2.css')">3 Style Sheet</button>

Why does this Javascript document.write not execute? [duplicate]

This question already has answers here:
JavaScript: Inline Script with SRC Attribute?
(3 answers)
Closed 8 years ago.
When I launch this in chrome, nothing appears on the page.
<!DOCTYPE html>
<head><title>test 4000</title><head>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
document.writeln("test")
</script>
</body>
</html>
you are inserting code in a script tag that you are also using to load an external script (jQuery). you should either do the one or the other.
<script>
document.writeln("test");
</script>
if you want both do:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
document.writeln("test");
</script>
the reference states:
If the src has a URI value, user agents must ignore the element's contents and retrieve the script via the URI.
you do not need to include jQuery to use document.writeln()

Html inside script tags? [duplicate]

This question already has answers here:
style and script tags in HTML body... why not?
(7 answers)
Closed 8 years ago.
Is it possible to put things normally found in between the body tags in a script?
Like even an image:
<img src="url" alt="some_text">
Could I have that in <script> <img src="url" alt="some_text"> </script>
I want the user to be able to just copy something like :
<script type="text/javascript" src="script.js"></script>
And it would include html code too, or even something like:
<script type="text/javascript" src="script.js"></script>
<script type="text/html" src="htmlstuff"></script>
If you need to mix scripts and HTML (which I highly don't recommend) you can mix individual script blocks with that HTML. E.g.
<script>
//some JS code goes here
</script>
<img src="url" alt="some_text">
some more HTML goes here
<script type="text/javascript" src="script.js"></script>
some more HTML goes here
<script>
//some JS code goes here
</script>
But again - this is bad practice.
If you want your user grab link just to JS and have it produce HTML - your JS code have to produce that HTML programmaticaly - look up document.createElement, element.appendChild etc.
Note that if you can use jQuery - your life becomes a lot easier in both manually creating DOM elements as well as ability to load complete HTML e.g. using .load() method.

Is it possible to use Bootstrap without it taking over the entire style?

Is there an easy way to use Bootstrap in an existing project?
Currently it adds styles for table,a etc. which messes up everything in the page.
I really love the modal window, some buttons, but I don't want to hunt bootstrap css all the time to switch items back to default styles.
Bootstrap 3 // Less 1.4.0 edit:
After Bootstrap 3 and Less 1.4.0 has come out, bootstrap has started using the :extend() pseudo selector. This means that certain things will fail in the original code I've posted (you'll get some .bscnt .bscnt form-horizontal code which means you have to nest two divs inside eachother, which is just dumb). The easy way to fix this is to remove the first two lines from bootstrap.less (#import variables.less and #import mixins.less) and instead import these files outside of the .bs-cnt scope:
#import "variables.less";
#import "mixins.less";
.bscnt {
#import "bootstrap.less";
}
You can also download bootstrap from here: Bootstrap source and then enter the "less" directory and add a file called "bootstrap-custom.less" where you'll enter the following content:
.bs-cnt {
#import "bootstrap.less";
}
"bs-cnt" for BootStrap-CoNTainer. You can make it longer if you want, but remember that it'll be pasted in a lot of places in the compiled CSS, so it's to save space in the end file.
After you've done this, simple compile the bootstrap-custom.less file with your favourite less compiler (SimpLESS is pretty good if you're on Windows), and then you'll have a compiled bootstrap file that only works when you place a container element with the class of "bs-cnt".
<div class="bs-cnt">
<button class="btn btn-success btn-large">This button will be affected by bootstrap</button>
</div>
<button class="btn btn-danger">This however; Won't</button>
You can use the "customize" feature on the bootstrap website to get only those features you want: Twitter Bootstrap Download Page. Most of bootstrap's rules are explicit. You'll probably only want to leave out the reset rules which are implicit by default.
I think the link in answered section is not already updated. Here is where you can customize your Bootstrap directly on GetBootstrap site:
Customize and download - GetBootstrap
Using IFrame
Just make one html document with bootstrap in it, have your bootstrap element that you want on that page, and use Iframe to get it on the other one..
element_name.html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<title>Element</title>
</head>
<body>
<!--Code for the actual element-->
</body>
</html>
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<style>
iframe {
border: none;
}
</style>
</head>
<body>
<iframe src="element.html"></iframe>
<!--Other stuff on the page-->
</body>
</html>
The element in the element.html will be integrated in the index.html like it's own element, without even importing a single bootstrap stylesheet in the index.html and there is no need to make custom bootstraps, which can be tedious.
You can tag the styles you want to not get overwritten by a special tag. Just put the !important tag. It can take a long time to paste it after every line of code but it'll be worth the time. Or you can use the bootstrap.css file instead of the bootstrap link and delete all the styles that are overriding your styles. You can download the bootstrap css file here

Why does self-closing script not working for ExtJS? [duplicate]

This question already has answers here:
Why don't self-closing script elements work?
(12 answers)
Closed 2 years ago.
I am following ExtJS tutorial and tried creating a new page. It works.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title id='title'>HTML Page setup Tutorial</title>
<!-- ** CSS ** -->
<!-- base library -->
<link rel="stylesheet" type="text/css" href="ext-3.3.1/resources/css/ext-all.css" />
<!-- overrides to base library -->
<!-- ** Javascript ** -->
<!-- ExtJS library: base/adapter -->
<script type="text/javascript" src="ext-3.3.1/adapter/ext/ext-base.js"></script>
<!-- ExtJS library: all widgets -->
<script type="text/javascript" src="ext-3.3.1/ext-all-debug.js"></script>
<!-- overrides to library -->
<!-- extensions -->
<!-- page specific -->
<script type="text/javascript">
// Path to the blank image should point to a valid location on your server
Ext.BLANK_IMAGE_URL = '../../resources/images/default/s.gif';
Ext.onReady(function () {
console.info('woohoo!!!');
}); //end onReady
</script>
</head>
<body>
</body>
</html>
However, if I change the script tag line to use self closing tag, like following, it doesn't work.
<!-- ExtJS library: base/adapter -->
<script type="text/javascript" src="ext-3.3.1/adapter/ext/ext-base.js"/>
In Firebug, it complains Ext.EventManager is undefined. I have two questions
Is it generally a bad idea to use self-closing tag for script? I have read this post but it sounds to me it's talking about xhtml.
I am trying to learn Javascript. Although I know the way to fix it is to not use self closing tag, I would still like to know why FireFox think Ext.EventManager is undefined?
Yes, it's a bad idea. The script tag needs an ending tag, as you can see in the HTML specification - The script element
Different browsers have different ways of handling incorrect code. Each browser tries to make the best of the situation, but they have different opinions about what's best in each situation. One way to handle some of the incorrect code is to ignore it, which is likely the reason why the script is not executed in Firefox.
Besides, as you don't have a doctype tag the page is by default HTML, not XHTML, so you can't use self-closing tags at all.

Categories

Resources