I have 3 different links on my homepage. I am trying to have each link go to a page that looks something like this:
<link rel="stylesheet" href="/assets/common/temlate1.css">
</head>
<body>
<div ng-include="'/assets/common/template1.html'" ng-controller="ControlsCtrl"></div>
<script src="/assets/common/template1.js" type="text/javascript"></script>
</body>
I need each link on homepage to have different css, html and js files associated with it. For example:
If I click link 1: the file will look like the one above. If I click link 2, the file will look like this:
<link rel="stylesheet" href="/assets/common/temlate2.css">
</head>
<body>
<div ng-include="'/assets/common/template2.html'" ng-controller="ControlsCtrl"></div>
<script src="/assets/common/template2.js" type="text/javascript"></script>
</body>
And the third link will have the files:
template3.css
template3.html
template3.js
What is the best way to accomplish what I want. I do NOT want to include all css and js files together. What I mean is I do not want to have this at the bottom of my file: The same is true for the css files.
<script src="/assets/common/template1.js" type="text/javascript"></script>
<script src="/assets/common/template2.js" type="text/javascript"></script>
<script src="/assets/common/template3.js" type="text/javascript"></script>
I am only showing you a small portion of the website so that this question is easy to understand. I have a lot of other links in the head section and a lot of js links above the body tag. All of these are common to all 3 templates. Therefore, I would like to use the same file and just replace the 3 areas mentioned above.
How do I accomplish this? I am hoping for a solution in angular. Maybe someone can point me in the right direction.
I think you'll have to define different modules within AngularJS to accomplish this. They can each have their own template.
So in short:
angular.module('page1');
angular.module('page2');
angular.module('page3');
They can all have their own templates, respectively page1.html, page2.html, and so on ...
This looks like a good explanation: https://docs.angularjs.org/guide/module
Related
Im looking to figure out how to compile a couple of html pages into one page. like if i made a triangle in one html page, how would i link it with another html page that has a rectangle for example so that they both show up in one page. of course im not trying to figure out how to do this specifically but i want to generally know how to do it.
With jquery you can do it like so:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function(){
$("#includeContent").load("fileName.html");
});
</script>
</head>
<body>
<div id="includeContent"></div>
</body>
</html>
source: https://www.codegrepper.com/profile/abutahir
So I'm working on a project for school and want to include fontawesome-icons. My problem is that no icon, no matter which one I use, does show up. I tried it in an empty html-file with just a blank page and in that case it works. Can someone tell me why it doesn't show up in the image below? Thanks in advance!
Code of my website
...
<head>
<script src="https://kit.fontawesome.com/505871b650.js" crossorigin="anonymous"></script>
</head>
...
If you want things to be simple just put the following inside you <head> tag:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" crossorigin="anonymous">
And you don't need to use <script> tag to integrate fontawesome, take a look a this doc.
I know that it is best practice to have separate files for CSS and JS so that this:
<head>
<style>
<!--CSS code -->
<!--CSS code -->
</style>
</head>
<body>
<!--HTML code -->
<!--HTML code -->
<script>
<!--JS code -->
<!--JS code -->
</script>
</body>
becomes this:
<head>
<link rel="stylesheet" type="text/css" href="my-blackjack-file.css">
</head>
<body>
<!--HTML code -->
<!--HTML code -->
<script src="my-javascript-file.js"></script>
</body>
But is there an equally simple way to do this for the html portion of the code for the sake of better organization? I have seen some suggestions online for including html pages, but they seem to be talking about iframes and use some fairly complex (for me) javascript. Is there something more akin to
<body>
<link rel="stylesheet" type="html" href="my-html-file.html">
</body>
in order to separate a long document into several files that run as if they were on the same page?
This is work in progress and may (or may not) be supported in the next version.
Until then, unless you output the HTML through some server-side technology such as JSPs or Velocity, which support templating, you can only use iframes or AJAX as a workaround for including HTML.
Depending on the development environment you can use partial views.
<body>
#Html.RenderPartial("descriptiveNameHere.html");
<script src="my-javascript-file.js"></script>
</body>
Or something to that effect. There is additional syntax of course, but maybe this will put you on the track you're looking for.
Ultimately you will still have an html file with your "HTML Code". But if you're looking to reduce the complexity of a large file by moving chunks into external files, partial views are a way to do so.
This is the HTML code, i don't know if i'm making a mistake in those < link/>
<! DOCTYPE html>
<html lang="es">
<head>
<title>Appicua</title>
<link href="C:/Users/DAVID NEGRETE/Desktop/Portal web - Base code/portalWebStyle.css" rel="stylesheet" type="text/css" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<div class="test"></div>
<script src="C:/Users/DAVID NEGRETE/Desktop/web/js/jquery.js" type="text/javascript"></script>
<script src="C:/Users/DAVID NEGRETE/Desktop/Portal web - Base code/portalWebExt.js" type="text/javascript" </script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
</html>
And now this is the CSS code:
.test{
width:50px;
height:50px;
background-color:red;
border-color:black;
border-width:5px;
border-style:solid;
margin:5%;
}
As you can see is a simple red square, the problem is that all this code works perfect on Google Chrome and Internet Explorer, but on Firefox it's not even displayed on the screen.
Why is that happening?
Restructure your files into one directory:
- appicua
index.html
- css
main.css
- js
jquery.js
main.js
Then you can get main.css with href="./css/main.css", and main.js with src="./js/main.js". Relative paths are better here, and will probably work.
You also don't need to specify type="text/css" and type="text/javascript"; they're redundant as browsers pick CSS for style tags and JavaScript for script tags anyway, and there's confusion about the proper MIME type for JavaScript.
You can also remove the closing / before the > in the link tag. (Unless you're using XHTML.)
Your directory structure looks a little wonky. If I'm getting your links correct your working in a directory tree that looks like this:
If your HTML file lives in the web directory then you could create a css directory for your css (like the js folder that you already have) and reference the files relatively as suggested in other answers. The relative links would look like this:
<script src="/js/jquery.js" type="text/javascript"></script>
and
<link href="/css/portalWebStyle.css" rel="stylesheet" type="text/css" />
The linking style is called relative because the paths to the css and js files provided are relative to the position of the HTML file in the directory structure.
I'm guessing that firefox doesnt handle client-side files the same way. Try putting the css/js files as just src="portalWebStyle.css" as long as they are in the same directory as the file you have open.
I don't know if this will solve your issue, but you have forgotten a / at the end of your second link tag, and have also forgotten to close your second script tag.
How to use this ( https://github.com/silviomoreto/bootstrap-select ) twitter bootstrap plugin only for one element on the page? If I use it all my site use twitter bootstrap element (url are blue etc.)
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script type="text/javascript" src="bootstrap-select.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="bootstrap-select.css">
<script type="text/javascript">
$(window).on('load', function () {
$('.selectpicker').selectpicker({
'selectedText': 'cat'
});
});
</script>
From your comment you are including:
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js">
On your site. This means you're including the whole of twitter bootstrap which adds some styles to normal html elements.
Instead of this, why not download just the files you linked to on github and use those instead, i.e. (if you host them yourself):
<link href="path/to/bootstrap-select.min.css" rel="stylesheet">
<script src="path/to/js/bootstrap-select.min.js">
If you needed other features from bootstrap you could also create a custom build using this resource.
In that case, you have two solutions.
Take the .less sources from github and rebuild bootstrap with only the things you need. In other words you'll have to remove most .less files from the build process and take only the things you need.
Since you only have one element, add the selector to a page with bootstrap and extract all the css related to this element. Put this css in a different file and link it in your html. Once you copied all the required css declarations everything should look as expected.
You can then rename classes if needed.
To copy css declaration used in the browser you can use dev toolbars from firefox/chrome and so on. There might be good plugins that makes the job easier.