I'm trying to build a HTML template with a small javascript code. Here is the stuff... At the root, I built two files :
index.html
<!DOCTYPE html>
<html lang="fr">
<head>
<title>HTML Template</title>
<!-- Header initialized with /header-footer.js -->
</head>
<body>
<footer>
<!-- Footer initialized with /header-footer.js -->
<script type="text/javascript" src="/headerfooter.js"></script>
</footer>
</body>
</html>
headerfooter.js
(function () {
/*************** HEADER *****************/
const headerBeforeAppend = document.querySelector('head')
document.querySelector('head').innerHTML = `
${headerBeforeAppend.innerHTML}
<meta charset="UTF-8">
<meta content="width=device-width,initial-scale=1" name="viewport">
<!-- CSS -->
<!-- Google fonts -->
<link href="https://fonts.googleapis.com/css?family=Montserrat:100,400,700" rel="stylesheet">
<!-- Bootstrap, Materialize, etc... you see the idea -->
<!-- Javascript -->
<!-- Fontawesome -->
<script src="https://use.fontawesome.com/45d80bbe59.js"></script>
<!-- jQuery, Bootstrap scripts, etc... you see the idea -->
`
/*************** FOOTER *****************/
const footerBeforeAppend = document.querySelector('footer')
document.querySelector('footer').innerHTML = `
${footerBeforeAppend.innerHTML}
<!-- JQuery (for Bootstrap) -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<!-- Bootstrap CDN v4 alpha-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
`
})()
The idea is, when I load the index.html in a browser, to have the headerfooter.js script to write my <head> section and my <footer> section with the <links> and <script> I need.
It's actually working perfectly when, for the script, the code I write is the relative path to the script : <script type="text/javascript" src="headerfooter.js"></script>, but it's not working with the absolute path to the root: <script type="text/javascript" src="/headerfooter.js"></script>.
This is a problem, because I would like this to be a template, so that I include this script in every html page I will create in my web folder without having to re-write the path everytime. Did I make a mistake somewhere ?
(PS: is it a bad practice trying to build a template like that ?)
How you run your page will matter.
If you're trying to run it with the file:// protocol (by just opening index.html), an absolute path won't resolve correctly. You'll want to somehow run an local server (there are dozens of ways to do this, depending what all you're using, too large a scope for this question).
If you are running some kind of local server (i.e., http://localhost), then try opening the file directly with http://localhost/headerfooter.js. If that doesn't work, your file isn't quite where you think it is.
Related
It is my first time using bootstrap 3, what I want to do is to make a header so that I will just call the file whenever I will create a new page but the problem is that when I created a folder and inside is index.php when I put the code from the original file it didn't work.
Here is the image of what I did
Here is the image of the original
Here is the code in html (only the link and script)
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<link
href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"
rel="stylesheet">
<!-- Custom styles for this template-->
<link href="css/sb-admin-2.min.css" rel="stylesheet">
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Core plugin JavaScript-->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Custom scripts for all pages-->
<script src="js/sb-admin-2.min.js"></script>
<!-- Page level plugins -->
<script src="vendor/chart.js/Chart.min.js"></script>
<!-- Page level custom scripts -->
<script src="js/demo/chart-area-demo.js"></script>
<script src="js/demo/chart-pie-demo.js"></script>
I don't clearly get it, I mean I accessed the file path and try to recode it but still it won't show the design and functions in jquery, I hope someone can explain me since I am new to this.
add / to all src or href. it's different between /vendor and vendor.
you need to access file at root but not page/vendor
I was trying to host an existed project on Firebase which already have a css and js file. But it didn't seem to include my css and js files into the website.
I followed all of these steps:
https://www.youtube.com/watch?v=meofoNuK3vo&index=21&list=PLl-K7zZEsYLmnJ_FpMOZgyg6XcIGBu2OX
The project directory now looks like this:
\public (folder) (containing: index.html 404.html)
\css (folder) (containing: style.css)
\js (folder) (containing: index.js)
firebase.json
.firebaserc
Here is the website: https://together-cb.firebaseapp.com/
The index file looks like:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../css/style.css">
<!-- update the version number as needed -->
<script defer src="/__/firebase/4.8.0/firebase-app.js"></script>
<!-- include only the Firebase features as you need -->
<script defer src="/__/firebase/4.8.0/firebase-auth.js"></script>
<script defer src="/__/firebase/4.8.0/firebase-database.js"></script>
<script defer src="/__/firebase/4.8.0/firebase-messaging.js"></script>
<script defer src="/__/firebase/4.8.0/firebase-storage.js"></script>
<!-- initialize the SDK after all desired features are loaded -->
<script defer src="/__/firebase/init.js"></script>
<script src="/__/firebase/4.8.0/firebase.js"></script>
<script src="../js/index.js"></script>
</head>
<body>
<div class="main-view">
....
</div>
</body>
</html>
I had the same issue but I added this line below my body tag and it solved.
<script src="/__/firebase/6.1.1/firebase-firestore.js"></script>
also, you can see the instruction here
https://firebase.google.com/docs/web/setup
Make soure that all your assets(css,js,img) and html are in /public
I have quite a bunch of script and libraries that I am using in my website, which takes like 5 to 8 seconds to load.
ex.
<script type="text/javascript" src="../lib_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="../lib_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../lib_components/angular/angular.js"></script>
<script type="text/javascript" src="../lib_components/angular-resource/angular-resource.min.js"></script>
<script type="text/javascript" src="../lib_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script type="text/javascript" src="../lib_components/angular-cookies/angular-cookies.min.js"></script>
<script type="text/javascript" src="../lib_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script type="text/javascript" src="../lib_components/lodash/dist/lodash.min.js"></script>
<script type="text/javascript" src="../scripts/js/overdo.js"></script>
I want to show a loading bar till all the scripts have been loaded, can anyone guide me on whats needs to be done for that?
There is very simple approach you can use in case when all the scripts you want to load are loaded synchronously (you don't use modules loader, async attributes, etc) - like in your example.
The trick is add progress indicator script the very first on the page, before all your heavy scripts. It is also make sense to inline this script (because it shouldn't be too big ideally):
<script>
// some progress bar implementation progress.show()
console.log('showing progress, loading bar, etc.');
</script>
<script src="../lib_components/jquery/dist/jquery.min.js"></script>
<script src="../lib_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../lib_components/angular/angular.js"></script>
<script src="../lib_components/angular-resource/angular-resource.min.js"></script>
<script src="../lib_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script src="../lib_components/angular-cookies/angular-cookies.min.js"></script>
<script src="../lib_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="../lib_components/lodash/dist/lodash.min.js"></script>
<script src="../scripts/js/overdo.js"></script>
<script>
// hiding loading bar
console.log('scripts loaded')
</script>
Now, for the implementation of the actual progress bar, it's up to you how and what to render. However, remember that depending on where you put those scripts DOM tree might not be loaded yet (if scripts are in <head>). I would anyway recommend to place scripts before closing </body>. The ideal structure for this approach would be:
<!DOCTYPE html>
<html>
<head>
<!-- some styles, no scripts here -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<link rel="stylesheet" href="assets/styles.css" />
</head>
<body>
<div class="loading" hidden>Loading...</div>
<!-- Some application HTML code -->
<script>
// show/create progress/loading
var loading = document.querySelector('.loading')
loading.hidden = false
</script>
<!-- many script tags ... -->
<!-- ... -->
<script>
// hide/remove progress/loading
loading.parentNode.removeChild(loading)
</script>
</body>
</html>
Apologies if this is an old question. I have spent a few hours searching for an answer but had no luck.
I'm attempting to convert an existing (primarily jQuery) application to use AngularJS. I've hit a problem where a JavaScript file I am including in index.html is being run too early when being included in my AngularJS application. i.e. by using a <script> tag:
<script type="text/javascript" src="/components/js/theme.js"></script>
This file contains a lot of jQuery which needs the rest of the page to have been rendered to have an effect. So is there a way I can include this script and ensure it is only loaded after the rest of the page has finished loading? I have a set of directives on the page and the script is being loaded before these are rendered.
Update:
Here is the structure of my index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>App Title</title>
<base href="/">
<!-- icons and CSS -->
<link href="/img/ico/favicon.ico" rel="shortcut icon"
type="image/vnd.microsoft.icon">
<link href="/css/bootstrap.min.css" media="screen" rel="stylesheet"
type="text/css">
<!-- External Libraries -->
<script type="text/javascript" src="/external/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="/external/angular/angular.js"></script>
<!-- Angular Components -->
<script type="text/javascript" src="/components/services/ui.js"></script>
<script type="text/javascript"
src="/components/navigation/js/navigation.js"></script>
<!-- App set and config -->
<script type="text/javascript" src="/js/app/app.js"></script>
<script type="text/javascript" src="/js/app/config.js"></script>
<script type="text/javascript" src="/js/app/routes.js"></script>
<!-- endbuild -->
<!-- Precompiled HTML templates -->
<script type="text/javascript" src="/js/templates.module.js"></script>
</head>
<body ng-cloak>
<!-- directive -->
<top-nav-bar></top-nav-bar>
<div class="content">
<div class="container">
<!-- directive -->
<side-nav-bar></side-nav-bar>
<!-- angular view -->
<div ng-view></div>
</div>
</div>
<!-- directive -->
<adysis-footer></adysis-footer>
<!-- Bootstrapper -->
<script src='/js/app.bootstrap.js' type='text/javascript'></script>
<!-- JAVASCRIPT FILE WHICH NEEDS TO RUN AFTER PAGE HAS LOADED! -->
<script type="text/javascript" src="/components/js/theme.js"></script>
</body>
</html>
As you can see, the "theme.js" file is the last item of the <body>. I have stopped in the file to ensure it is being loaded. But this is always done before the rest of the page has rendered. Could some other JavaScript be interfering upsetting things? Note that I have not included all of the JavaScript files that are being included.
Update 2:
I've added further break points in the JavaScript functions for the directives you can see in my index.html. Each of them is stopped in after the theme.js is executed. I don't know why this is, so I'm mentioning this in case it gives more clues as to the problem.
Update 3:
The first line of the "theme.js" file is:
jQuery(document).ready(function($)
And then the function contains a long series of jQuery selectors to setup events and so on. My understanding is the point of this line is to wait until the document has been loaded. But could something in my setup, e.g. Angular, be preventing this from happening?
I've tried changing this line to:
angular.element(document).ready(function($)
and whilst this does lead to the content on the function to be run later, it's still not after the whole document has loaded.
Make sure it's at the end of your HTML Body and not in the header section. If it's in the head section it'll load before the page renders.
I am trying to add a route.js file in the layout.ejs.
<!DOCTYPE html>
<html ng-app="scratchpad">
<head>
<title>Scratchpad</title>
<!-- Viewport mobile tag for sensible mobile support -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!--
Stylesheets and Preprocessors
==============================
You can always bring in CSS files manually with `<link>` tags, or asynchronously
using a solution like AMD (RequireJS). Or, if you like, you can take advantage
of Sails' conventional asset pipeline (boilerplate Gruntfile).
By default, stylesheets from your `assets/styles` folder are included
here automatically (between STYLES and STYLES END). Both CSS (.css) and LESS (.less)
are supported. In production, your styles will be minified and concatenated into
a single file.
To customize any part of the built-in behavior, just edit `tasks/pipeline.js`.
For example, here are a few things you could do:
+ Change the order of your CSS files
+ Import stylesheets from other directories
+ Use a different or additional preprocessor, like SASS, SCSS or Stylus
-->
<!--Twitter Bootstrap-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!--Twitter Bootstrap END-->
<!--STYLES-->
<link rel="stylesheet" href="/styles/border.css">
<link rel="stylesheet" href="/styles/tablerow.css">
<!--STYLES END-->
</head>
<body>
<nav class = "navbar navbar-default" role = "navigation">
<div class = "container-fluid">
<div class = "navbar-header">
<a class = "navbar-brand" ui-sref = "scratchpad">MY SCRATCHPAD</a>
</div>
</div>
</nav>
<p>hello world</p>
<div class = "container">
<div ui-view></div>
</div>
<!--SCRIPTS-->
<script src="/js/dependencies/sails.io.js"></script>
<script src="/js/dependencies/bower_components/jquery/dist/jquery.min.js"></script>
<script src="/js/dependencies/bower_components/angular/angular.min.js"></script>
<script src="/js/dependencies/bower_components/angular-resource/angular-resource.min.js"></script>
<script src="/js/dependencies/bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="/js/dependencies/bower_components/moment/moment.js"></script>
<script src="/js/dependencies/application.js"></script>
<script src="/js/dependencies/route.js"></script>
<!--SCRIPTS END-->
</body>
</html>
Whenever i add this and save it. Its got saved. But when i try to run sails lift. The route.js script getting gone and the layout.ejs file changes into old state. Can anyone figure this out? Any idea of what may be the bug? cause of grunt?
As long as I remember, everything inside
<!--SCRIPTS-->
...
<!--SCRIPTS END-->
section is generated by sails. Try just to put your link after , so it will be like
<!--SCRIPTS-->
<script src="/js/dependencies/sails.io.js"></script>
<script src="/js/dependencies/bower_components/jquery/dist/jquery.min.js"></script>
<script src="/js/dependencies/bower_components/angular/angular.min.js"></script>
<script src="/js/dependencies/bower_components/angular-resource/angular-resource.min.js"></script>
<script src="/js/dependencies/bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="/js/dependencies/bower_components/moment/moment.js"></script>
<script src="/js/dependencies/application.js"></script>
<!--SCRIPTS END-->
<script src="/js/dependencies/route.js"></script>