I'm building out error pages (404/503) which need to be standalone html files, my server-side is nodejs, but these files will be hosted directly in nginx. I'm trying to automatically embed a stylesheet at the top of a html document and was wondering whether there are any tools for this purpose. Searching on stack overflow and google keeps returning tools to inline css for use in emails, but that is not what I want.
I would like to start out with
before.css
.body { color: black }
before.html
<!DOCTYPE html>
<html>
<head>
<title>A Question</title>
<link rel="stylesheet" href="before.css">
</head>
<body>
<p>Here be the answer</p>
</body>
</html>
Which once the process is complete I would end up with
after.html
<!DOCTYPE html>
<html>
<head>
<title>A Question</title>
<style>.body { color: black }</style>
</head>
<body>
<p>Here be the answer</p>
</body>
</html>
The ideal solution would be a gulp plugin or an idea of how to write one.
I can write this in JS if needed. Also I'm already using EJS and Stylus to derive the original before files.
Many thanks
As many commented, you're trying to find a solution to a very complex problem and there are probably many easy to use workarounds for this. But if you really want to do this then here are a few approaches I think best:
Server-side Templates:
The best, clean and straightforward method of embedding a stylesheet into HTML is to use a server-side scripting language (as #Mr_Green pointed out). There are many to chose from, and as you're using Node.js, the best library would be EJS or Jade. You can also use PHP, Ruby, Python or whatever you think best, but the idea is same:
First, you need to read the contents from the stylesheet and store it in a variable. In Node.js you can use the fs.readFile() to easily read the contents of the .css file.
Then, you have to output the contents of the .css file (stored in a variable) into your HTML. With EJS for example, if the contents of your CSS file is in a variable styleFile, then you can do <style><%= styleFile %></style> to directly put the contents of your stylesheet into your HTML <style> tag.
Using Ajax with JavaScript:
Another solution would be to use Ajax and get the contents of your stylesheet and then use JavaScript to simply put it inside your <style> tag. For example with some jQuery you could do: $("style").html(// stylesheet contents var);.
Of course you can also use Haml, if that helps.
Hope that answers your question.
Related
I just started JavaScript. I wrote some code with javascript using the library: Three.js, now I wanted to do the Backend with Python. Therefore i started using Flask.
So I have my index.html in the templates directory, inside my index.html i call my script.js like this:
<script type="module" src="/static/script.js"></script>
In my script.js I import three.js in the beginning like this:
import "/three.js"
The Three.js file is in the same static folder. But somehow the import doesnt work when i use Flask.
First of all, the 'import' statement hasn't yet widely supported by browsers, so if you really want to use it, you have to use a module bundler e.g. webpack, broswerify, to wrap all files into one big js file. However, if you are not familiar with those tools, to be honest, you have to spend many time to learn how to use them.
So I recommend you to keep things simple. For example, you can first make a copy of the library's source code and save it to your project's static folder, so that it can be served publicly. Second, you can create a HTML file, with following template:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My first three.js app</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script src="/static/three.js"></script>
<script src="/static/script.js">
</body>
</html>
P.S. this example is from Three.js offical document, with a little modification.
Since all scripts in a HTML share a same global environment, after the first <script> tag is loaded, the code in the next <script> tag can access three.js's global variable that is loaded before!
flask is mirco framework, so you need to follow the documentation instruction on using static files.
have a look on this post
where to keep js files in Flask applications?
I know that HTML is read line by line. When you link multiple css files like a normalize file and a stylesheet file the stylesheet file should be linked after the normalize file because of CSS importance specificity and source order. It appears that this doesnt affect JavaScript files that are linked. Can I link my JavaScript files in any order?
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Musical Playlist</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<h1>My Music Playlist</h1>
<div id="listDiv">
</div>
<script src = "js/helpers.js"></script>
<script src = "js/playlist.js"></script>
</body>
</html>
If you’re planning on using any frameworks for JavaScript, make sure it’s linked prior to your main JavaScript files. Each JavaScript link is read sequentially, so if you try to run your main JavaScript file that contains a framework function before you link the framework, it’s not gonna work.
Other than that, if your JavaScript files are simply filled with functions then it doesn’t matter what order you link them in. Unless one of your JavaScript files runs and executed when the website loads that should be run first.
In some cases you can swap order without issues, however like mentioned if you'd use a framework/tool/... that would need to be available for the rest of your code to run it should be included earlier.
This is also why some scripts want to included in the <head> of your page and not at the end of the <body>, otherwise they would not be availble when they are needed.
The same goes for dependencies in the JS files, let's say that I have a file menu.js which I supply with a config variable from config.js I would have to include config.js before menu.js to prevent issues and undefined variables.
I am attempting to use a javascript chessboard here: http://chessboardjs.com/ . Unfortunately, I don't know javascript or CSS, and am rusty in HTML, so I don't understand the documentation, even though this seems to be a standard javascript chessboard.
How exactly does one install and use this package in order to render a chessboard? The "examples" are all snippets of HTML or javascript, useless to me without being embedded in a working web page. And the source to sample web pages do not work when copied to my home directory. For example, the web page http://chessboardjs.com/examples/1000 here purports to render and empty board, and does on their server, but when I copy the source to my local directory, only a blank page renders. The source of that page does not make sense to me anyway, for example, it refers to files "js/chessboard.js" and "js/json3.min.js" , neither of which are in the distribution. (Nor does the render work when "chessboard.js" is replaced with the name of the javascript file in the distribution).
I assume the issue has something to do with where img files are searched for, and where files are stored. And presumably these are so obvious to javascript experts that it's all implicit in this package and aren't ever explained in the documentation.
So, what I would like is a file foo.html that, when copied to my local machine, will render a chessboard using the chessboard.js source.
Create a new text file, and paste this inside:
<!DOCTYPE html>
<html>
<head>
<title>Chess</title>
<link rel="stylesheet" href="css/chessboard-1.0.0.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="js/chessboard-1.0.0.min.js"></script>
</head>
<body>
<div id="board1" style="width: 400px"></div>
<script>
var board1 = ChessBoard('board1', 'start');
</script>
</body>
</html>
Then save it with the .html or .htm extension.
Next, download their distributable from their download page. And unzip the folder.
Next, put your HTML file in the same folder as the js, img, and css folders from the unzipped distributable.
Double click/Run the HTML file. The URL should say file:///C:/path/to/the/file.html.
You should see
I have been using ASP.NET MVC for all my projects and have been using #Html.Partial("_header") where ever I wanted to include a common static html in any of my pages.
But now I am working in a pure HTML CSS and JS web app. Here I am not using any server side technology, just a set of static contents.
Here in the site I have the following layout
----- HEADER -----
----- Changing Content ------
----- FOOTER ------
So, here is what I want, I want to somehow do the thing I used to achieve #Html.Partial()
One way I know is using IFRAMES, is there any other better way ?
i have come across this situation while making chrome extension.
What i did was storing the header footer in variable of js file and then appending that to body using jquery.i was using that js file where i wanted my header and footer to be.i just used to add js in script of head.....Boom i got my fixed header footer in page.
WORKING DEMO
Code:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"> </script>
<script>
function appendheaderfooter(){
var header="<div style='position:fixed;top:0px;background-color:aqua;'>header html</div>";
var footer="<div style='position:fixed;bottom:0px;background-color:aqua;'>footer html</div>"
$("body").append(header+footer);
}
window.onload = appendheaderfooter;
</script>
<style>
div{width:100%;}
</style>
</head>
<body><br/>
<p>Content goes here</p>
</body>
</html>
If your web app is going to be hosted on a web server supporting Server Side Includes (for example Apache) you can just add <!--#include virtual="/header.html" -->
Depending on your web server, you might need to enable the SSI first (Options +Includes in .htaccess on apache)
Frames
Frames used to be the way to go, but as time has gone by they have fallen out of favour with developers for one reason or another - note this article from 2006!
Fortunately, you seem to be in favour of avoiding frames :)
SSI over JavaScript
Secondly, Server-Side Includes (SSI) or some other server-based "include" is favoured over JavaScript, though I accept that this is not necessarily a "pure" HTML/JS/CSS solution.
The format of an SSI statement is as follows:
<!--#include virtual="../quote.txt" -->
http://www.htmlgoodies.com/beyond/webmaster/article.php/3473341/SSI-The-Include-Command.htm
There are many answers that reflect this view on SO - for example, the first three that appeared in searching are
here,
here and
here ...
Note that the accepted answer for that last one is recommending a JS solution, but the final paragraph states a preference for something server-side..
Compilation of your HTML code (my preferred option)
It has been a while since I have needed to create a "pure" HTML/CSS/JS website, but when doing so my preference is to keep the code modular and "compile" the HTML before deployment.
Although it requires a little additional work prior to deployment, it produces the "purest" output to be used within deployed code. You write your code as normal, use a little magic to indicate what you want included and where and then you "compile" this code into bog-standard HTML/CSS/JS files that are deployed onto your site.
This brings the ease and simplicity of using templated header/footer/menu-bar/sidebar files, with the tradeoff of needing to compile the HTML code beforehand.
SASS uses Ruby on Rails to perform this compilation. Unfortunately, a reference for its HTML equivalent is escaping me at this particular moment in time, so I shall update my answer as/when I relocate it.
Are you open to use Frameset, though it is not supported in HTML5?
I have a javascript file main.js and five html files 1.html,2.html,3.html,4.html,5.html
I want to access the javascript file main.as in all files .
I have used in all of the five but I'm not able to access it . Is it possible to share the .js file among the html files.
Plz reply,
Thanks in advance
Prashant Dubey
Yes, it is entirely possible. That's the point of being able to have a JS file instead of having to embed all the code in the HTML.
yes this is well possible. You merely have to include
<script type="text/javascript" src="main.js"></script>
in your HTML files, preferably near the bottom (for faster rendering). What have you done so far?
Yes. Totally possible.
Just reference it in all of the files e.g. by
<script type="text/javascript" src="Scripts/main.js"></script>
Yes, it is possible.
Probably there is something wrong with the way you access the javascript from your html. Show us the <script ...>...</script> part of your html.
Yes. Are you using the correct path to the main.js file in your html files?
Create separate javascript file with .js extension with all your function in it and
just include this javascript file in the head tag of all the html scripts u wanna use that in.
Like::
<html>
<head>
<script type="text/javascript" src="JavaScriptFilePath.js"></script>
</head>
<body>
<!-- use javascript -->
It can happen both ways..
a single html file can use multiple javascript file
2.a javascript file can be used in several html files.
In first case javascript file load can be conditional based on location, user preferences, time, age group, content restriction.
You can see good example when facebook loads its page. I loads number of javascritps.