Properly load external markup into multiple pages - javascript

I'm working on a required static page assignment. (not my choice)
I have a navigation that I'd like to be available for dozens of static html files.
I'm getting the markup via jQuery/javascript
$(function () {
// get navigation menu
$.get('nav.html', function (data) {
$('.navigation').replaceWith(data);
});
});
Things start to get funky here
The markup I'm loading into multiple pages are as such:
I'm adding no body tag since the idea is that this content will be loaded into existing HTML pages.
nav.html
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
My problem is that none of the styles applied to nav.html were loaded.
Then in order to get the css styles into nav.html I added a head tag which smells like a very bad practice and is where I'm seeking guidance here.
nav.html (with head tag)
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="xlib/bootstrap/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="app.css" />
<link rel="stylesheet" type="text/css" href="nav.css" />
</head>
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
What is the best practice to load same HTML markup into multiple pages, while doing so asynchronously and getting all the needed styles for the same HTML markup.?

While "best practice" may be objective and a matter of opinion, I have been working with static and non-static web pages and for me the thing that seems to make the most sense and be the cleanest implementation is having a common css file that can be added in the head of the primary html files for each page needed.
If you like to organize your files bases on the different functional areas so that you have matching nav.html and nav.css (even nav.js) files I would look into a bundler tool that will generate the common css file (even common js file) for you. The bundler tool to use depends on the technology you use to compose the website.
Hopefully this is helpful, if you want anymore specifics let me know.

Related

How to link mulitple css&js files in our project without explicity mentioning it in every other file

My project is on angularjs and php. I have been placed in a project that has been previously done by a group of 3 and the documentation was not clear. What I observe from that code is that whenever I declare any bootstrap class or id
without explicitly linking it in that html file
Eg:
<html>
<head>
<title>some title</title>
<!-- No CSS file linked here -->
</head>
<body>
<button class="btn btn-primary">Here</button>
</body>
For above document bootstrap classes "btn btn-primary" are applied. However, they have included that bootstrap file in a folder named "css" but DID NOT include/import that in that html file.
How does my html file know where to search for suitable css file?
Does it search all the available css files?
Is that a good practice or do I need to change that?
when I go to inspect -> sources
<html lang="en" ng-app="quiz">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-3.2.1.slim.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="script/angular.min.js"></script>
<script src="script/angular-route.min.js"></script>
<script src="app.js"></script>
<script src="controllers/displayController.js"></script>
<script src="controllers/quizController.js"></script>
<script src="controllers/welcomeController.js"></script>
<script src="controllers/csvController.js"></script>
<script src="controllers/loginController.js"></script>
<script src="controllers/adminController.js"></script>
<style>
body
{
background-color: bisque;
background-repeat: no-repeat;
background-size: cover;
/*border: 1px solid red;*/
}
</style>
</head>
<body>
<div ng-view>
</div>
</body>
</html>
This is the default html for every page, now if I add anyother .js(In js file) or .css( In css file) it doesn't show up here or adds in my html. This came to notice when I added HTML2CANVAS file for one particular html file and it is saying "html2canvas is not defined" in console
Edit:
Thanks for the help JkAlombro, I found that this project uses angular router($routeprovider) So I traced default html file(index.html in this case) and added my js scripts and css links. To know whether your project uses $routeprovider, goto app.js file and check for app.config(function($routeProvider). Just so it helps anyone.
The reason why you can't see any css/js imports to your other HTML files is because that app using an angular router (most probably $routeProvider) and I can confirm that in your index html file.
See that <div ng-view> in your index? That's where all of your other html files are being displayed depending on what route is being pointed. Other proofs that you are using angular router is this script
<script src="script/angular-route.min.js"></script>
Why you don't have to import your css and js in the rest of your html file?
Because everything is being rendered to your index.html (or whatever your default html file is named) so you only need to include all of your scripts and css links there and it will be used all over your app. That's how a Single Page Application works (at least for AngularJS).
If you wanna trace where the router is being configured, most probably you can find it in your app.js or displayController.js.
Make a common header and footer file. Include all your css file in header and javaScript file in footer.
eg:
header.file
- Only push your content here -
footer.file
This way the css and js will be common for every other file.

How do I use multiple templates in one Vuejs project?

I am having a bit of an issue in vuejs.
The thing is that i am trying to load more than one template in my vue project. Each component has to load his own css files.
To do that, all i could think of is to put each template css in a folder inside the static folder.
this is the index html
<div id="app"></div>
and in each component i loaded the head tag with css from the static folder
<template>
<html>
<head>
<title> site </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1,maximum-scale=1">
<link rel="shortcut icon" href="static/search/favicon.ico">
<link rel="apple-touch-icon-precomposed" href="static/search/favicon.ico">
<link rel="stylesheet" id="brk-direction-bootstrap" href="static/search/css/bootstrap.css">
<!-- etc etc -->
</head>
<body>
<!-- ... -->
</body>
</html>
</template>
And that's how i solved loading different css templates in one project.
But that made the page loading have an issue, it looks completely off before the css finish loading.
I ma not sure how i can fix! calling all the css files in the index.html does not work.
As #puddi says, use the <style> tags in your component. What would seem to suit your needs best would be to use scoped style, <style scoped> which means the css you include there only applies to that component, not globally.
Depending on how adventurous you want to get, you could build your project in Nuxt.js (a wrapper for vue) which allows you to define layouts that would do exactly what you're asking.

My html will not connect to Javascript

My HTML is not connecting to my javascript. I have run it in debugger several times and no matter what I have tried my HTML has not connected to my js. I have done this small piece of coding a fair few times now and am stumped at why it is not working.
Here is where my HTML is supposed to connect to my javascript.
<head>
<meta charset="utf-8">
<title>One Down</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="termFourMajorProject.js"></script>
<link rel="stylesheet" type="text/css" href="term 4 major project.css">
<link rel="shortcut icon" href="two_decks.png"/>
</head>
Please, can you tell me why my HTML is not connect ing to my javascript? (ignore the jQuery document)
Make sure that your. js file is in the same directory where your html file is present. And also you should add html tag to your code

JavaScript: JQuery UI Tabs won't load my other HTML pages

So problem is that i added Tabs from JQuery UI in my web, and now my tab which contains paragraphs loads fine but tabs on which i have linked to other html pages(which donot contain Tabs) , they wont load. here is the my .js file code and .html code:
$(function(){
$("#tabs").tabs();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title id="myTitle">Persistant Programmer: Testing Website</title>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="script17.js"></script>
<link rel="stylesheet" type="text/css" href="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.12.1/themes/excite-bike/jquery-ui.css" />
</head>
<body>
<div id="tabs">
<ul>
<li>About Me</li>
<li>Click-Picture Game</li>
<li>Feed the Cat Game</li>
</ul>
<div id="tabs-1">
<p>Hello there! Welcome to my Website. My name is Syed Hammad Jaffery, studying in FAST-NUCES. Purpose of this site is just a playground for my JavaScript Codes. JavaScript is something which is really basic need in today's world, there couldn't exist any web which only runs with HTML5 and CSS3. We need JavaScript to give some living feature to our webpages on which they can act and do stuff dynamically <br></br>I know this web is really newbie version and possibly not even shown on Search Engines but still Thanks for visiting.</p>
</div>
</div>
</body>
</html>
I have placed game.html in the same folder as my this html file and catGame.html in a folder named catgame which is present in the same directory as of my html file.
It's been one day i am stuck on it, and i am really new in JavaScript took some tutorials online. Tried everything as it is from here http://jqueryui.com/tabs/#ajax .
Thanks in Anticipation
As I know, it is not possible directly using jQuery UI tabs.
You can do it with some jQuery tricks as this answer

Views in play-framework 2.1 not handling javascript

I've come into a wall : Basically, Javascript doesn't seem to be working in my play pages.
So I have a view main.scala.html as a template for other views.
This file looks like that :
#(page : String, title: String)(content: Html)
<!DOCTYPE html>
<html lang="en">
<head>
<title>#title</title>
<link rel="stylesheet" media="screen" href="#routes.Assets.at("stylesheets/bootstrap.min.css")">
<link rel="stylesheet" media="screen" href="#routes.Assets.at("stylesheets/main.css")">
<link rel="shortcut icon" type="image/png" href="#routes.Assets.at("images/favicon.png")">
<script src="#routes.Assets.at("javascripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
<script src="#routes.Assets.at("javascripts/bootstrap.min.js")" type="text/javascript"></script>
</head>
<body>
<!--some stuff-->
#content
</body>
</html>
So I tried putting a simple thing in the body of the views.
-First in the main.scala.html template
-Then in a view that used this template
-Finally in a thing.html, with no links what so ever with Play! Framework, that I opened in my browser:
<html lang="en">
<head>
<title>title</title>
</head>
<body>
truc
</body>
Only the third option return the wanted result : A popup with thing in it.
My question is : Why is my javascript not handled by play? Do I have to "import" some global javascript feature in order to use it?
Thanks for your help, if you need more info, tell me.
Play produces normal HTML code - browser doesn't care what kind of soft produced it, so I suspect, that you have some mistake in path to some JS file in your head, so it avoids running other scripts, Use some kind of inspector in your browser, to validate, that all resources are downloaded properly. Also check JS console, most probably there are some errors shown.
On the other hand, placing simple JS directly in the views most often works correctly, however, keep in mind that, view's renderer may consider some JS typical syntax as a Play's tag, or something, therefore you need to control still if after rendering your JS is not 'damaged' by this process. For views where you want to use more advanced JS it's absolutely safer (and more comfortable) to include JS from static file(s) the same way as you are using for jquery.js or bootstrap.js
May be you forgot to write
#main(title = "my title") {
<h1>Other html<h1>
<p>My js here</p>
truc
}
P.S:
If it is helpfull don't forget that you shouldn't white head , html and body tags any more, it is included already. Otherwise you will have not valid html, and it will render bad in all browsers

Categories