I want to external CSS files side by side of html code in the body.
Why?
I am developing some templates that get included inside a page, but from those templates I cannot modify the head or add JS/CSS references to the html head section.
What I currently have is:
<html>
<head>
<!-- this i cannot edit -->
</head>
<body>
<!-- some html code -->
<!-- now comes what i can edit -->
<style>
#mywidget {
color: red;
}
</style>
<div id="mywidget">
hello
</div>
<!-- end of section i can edit -->
<!-- other html code -->
</body>
</html>
I would like turn that into something like:
<html>
<head>
<!-- this i cannot edit -->
</head>
<body>
<!-- some html code -->
<!-- now comes what i can edit -->
<!-- LINK TO AN EXTERNAL CSS FILE -->
<div id="mywidget">
hello
</div>
<!-- end of section i can edit -->
<!-- other html code -->
</body>
</html>
But I dont want the overhead of loading all the css every time the page loads, so i want to put it into an external file.
I thought of loading the external css (it will be hosted within the same domain) using javascript, then create a element and insert the content somehow...
I think this should work, however if not I think I can hack some style parser together using jquery which applies the styles at least for basic definitions.
But I am sure there must be a better way!
Any hint is appriciated!
You can use CSS's #import rule
<style type="text/css">
#import url("external.css");
</style>
putting style tags inside the body is indeed invalid according to html standrds (though it might work in some browsers)
you can put script in the body though, and you can make the script insert the style link in your head. jquery pseudocode would look like this
<body>
...
<script type="text/javascript">
$(document).ready(function() {
$('head').append('<link rel="stylesheet" type="text/css" href="style.css">');
});
</script>
...
</body>
<link rel="stylesheet" type="text/css" href="style.css">-- you can put this in the <body> tag, too; it works just fine in chrome.
Related
I'm getting the error shown below from jquery when I try to used from a web page in a nested directory. How do I prevent this error.
This is what the directory structure looks like. (Using <script src="/fhir-to-omop/site_libs/jquery-1.11.3/jquery.min.js"></script> from the circled index page works)
I've tried referencing jquery using each of these from the circled StartHere.html page:
<script src="../../../../site_libs/jquery-1.11.3/jquery.min.js"></script>
OR
<script src="/fhir-to-omop/site_libs/jquery-1.11.3/jquery.min.js"></script>
This is the error I'm getting
jquery.min.js:5 GET https://nachc-cad.github.io/fhir-to-omop/pages/navbar/getting-started/start-here/site_libs/jquery-1.11.3/jquery.min.js?_=1646571234525 404
EDIT: Per the question in the comments: I am loading JQuery twice as shown below.
In the main file:
<html>
<head>
<!-- favicon link -->
<link rel="shortcut icon" type="image/x-icon" href="../../../../favicon.ico">
<!-- include lib code -->
<script src="../../../../site_libs/jquery-1.11.3/jquery.min.js"></script>
<div id="headerInclude"></div>
<script>$("#headerInclude").load("/fhir-to-omop/header.html");</script>
</head>
<body>
<div class="container-fluid main-container">
<!-- navbar -->
<div id="navbarInclude"></div>
<script>$("#navbarInclude").load("/fhir-to-omop/navbar.html");</script>
...
</div>
</body>
</html>
And then this exists at the top of the loaded navbar.html:
<!-- navbar -->
<head>
<!-- include lib code -->
<script src="site_libs/jquery-1.11.3/jquery.min.js"></script>
</head>
I did read a lot of the same questions and I did try all of them, but here is the problem. Be easy on please, I use PHP include on the index file to do it, but Plesk told me I will break the hosting server and I must use HTML index file.
I call the jQuery like this inside the head:
<!doctype html>
<html lang="en">
<!-- Head start -->
<head>
<title>Advertron ISP - Placeholder</title>
<!-- Custom stylesheets -->
<link href="https://fonts.googleapis.com/css?family=Ubuntu:400,700&display=swap" rel="stylesheet"/>
<!-- Advertron ISP CSS -->
<link rel="stylesheet" href="css/advertronisp.css"/>
<!-- Custom font kit -->
<script src="https://kit.fontawesome.com/f6b2049012.js" crossorigin="anonymous"></script>
<!-- jQuery for replacing content on main html page -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function() {
$("#header").load("templates/header-top.html");
$("#main").load("main.html");
$("#footer").load("footer.html");
});
</script>
</head>
<!--/ Head ends -->
<body>
<!-- Body start here -->
<div class="grid-container">
<!-- Header start here -->
<div id="header"></div>
<!--/ Header ends -->
<!-- Main content -->
<div id="main"></div>
<!--/ Main content ends -->
<!-- Footer start here -->
<div id="footer"></div>
<!--/ Footer ends -->
</div>
<!--/ Body ends-->
</body>
</html>
This work and then only load the header-top.html file, but the moment I insert (templates/) where I call from the folder before (main.html) or (footer.html)
Then it doesn't load and stop by searching kit.fontawesomesome.
I'm using my localhost as testing server and I'm on Linux and Apache server is running.
Then, I also like to replaceWith() when someone clicks on a link or tab inside the main.html file an element div on the main.html must be replaced with other content.
I read that I can use XML or ajax or jQuery to do it, but all my trying to do it just doesn't work. After I can solve the first issue then maybe that will solve the second issue too.
Blessings
Christo
I found a solution in https://www.w3schools.com/howto/howto_html_include.asp to address the problem to load header, main, and footer HTML files from folder to index HTML file.
It's much faster and it works. So if anyone else looking to do it, use the solution in W3Schools.
Blessings
Christo
Here is working example https://www.codeply.com/go/bp/lxa0FF9yhw# that I need to work in one html file.
I am using this template to merge HTML, Css and javascript:
<html>
<head>
<style type="text/css">
CSS goes here
</style>
<script type="text/javascript">
JS goes here
</script>
</head>
<body>
HTML goes here
</body>
</html>
But as a result I see all lines of table instead of pages.
Is this a problem with Bootstraping? I am including jQuery and javascript
<script src='http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.js'></script>
<script src='script.js' type="text/javascript"></script>
I still see all lines in a result. I tried this code in https://jsfiddle.net/tfyqwLkr/. It also shows all lines of table.
How to include all required elements in this case?
Try placing your Javascript just before the body end tag: </body>.
You might be calling DOM elements that haven't been parsed yet.
<html>
<head>
<style type="text/css">
/* CSS goes here */
</style>
</head>
<body>
<!-- HTML goes here -->
<script src='http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.js'></script>
<script src='script.js' type="text/javascript"></script>
<script type="text/javascript">
// JS goes here
</script>
</body>
</html>
EDIT: After posting your code, looks like you are trying to call size(), a deprecated method since jQuery 3.0.
Note: This method has been removed in jQuery 3.0. Use the .length property instead.
That throws some errors in the console. Change children.size() to children.length.
Check the updated Fiddle. (Line 23)
i am trying to implement a style switcher according to https://www.inetsolution.com/blog/march-2010/css-style-switcher-a-quick-and-dirty-how-to .
but as soon as i add a title="" to the css link, the css file won't get loaded on the page an the styles fall back to default bootstrap.
my external css files are added at the bottom of the body. the order is:
<link rel="stylesheet" href="css/bootstrap.min.css">
<style>
body {
padding-top: 50px;
padding-bottom: 0px;
}
</style>
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/my-styles.css">
<link rel="stylesheet" href="css/my-alternate-styles.css">
<link rel="stylesheet" href="fontello-xxxxxxxx/css/fontello.css">
is there something i miss?
You probably did everything right (except one thing, see below*), the code that's in the article is using curly quotes ‘’ “” when it should be using straight quotes '' "".
<a href=”#” onclick=”setActiveStyleSheet(‘default’); return false;”>Change style to default</a>
<a href=”#” onclick=”setActiveStyleSheet(‘alternate’); return false;”>Change style to alternate</a>
So if you copied and pasted this part, it won't be parse correctly. This is the correct way with straight quotes:
Change style to default
Change style to alternate
Review this PLUNKER instead of the Snippet. The Snippet won't work because of the multiple stylesheets involved.
SNIPPET (Not Functional, review PLUNKER instead.)
<!doctype html>
<html>
<head>
<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'>
<link href='default.css' title='default' rel='stylesheet'>
<link href='alt.css' title='alt' rel='alternate stylesheet'>
<style>
body {
padding-top: 50px;
padding-bottom: 0px;
}
</style>
</head>
<body>
<section>
<p>TEST</p>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script>
<script src='styleSwitcher.js'></script>
</body>
</html>
* I noticed you said:
...my external css files are added at the bottom of the body...
You should always place <link>s inside the <head>. Most often, JavaScript/jQuery needs the actual DOM to be loaded before it can do anything. So it's important in most situations to make sure your styling (<link> and <style>) go first and inside the <head>.
For <script>, it's best to place them at the bottom of <body> just before the closing tag </body>. See the Snippet and PLUNKER for example of <link>, <style>, and <script> layout.
I want to include a css file into the head section of a php file ?
Right now I am including css in this way:
<?php include('./includes.header.html'); ?>
<style><?php include('./test.css'); ?> </style>
What it does is it includes the css in the body section not in the head section.
I have no idea to add js file before the end of body tag.
Please tell me a way to include the css file in the head section and js file before the end of the body tag.
Thanks in advance.
According to default structure of a web page add css and js files like this
HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
//your other code here
<script src="test.js">
</body>
</html>
php include can be used to add php files but for css you should use this default method.
php include should only be used to include PHP files, not css. Edit the header HTML and add the css normally ie
<head>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
You can programatically add it using PHP anywhere ie
<?php print_r('<link rel="stylesheet" type="text/css" href="test.css">'); ?>
In response to your comment about adding the styles to a specific page header: you could use a conditional with isset and a variable to set section-specific styles to your header like so:
<?php
if (isset($section_specific_styles))
{
echo "<link rel=\"stylesheet\" href=\"css/{$section_specific_styles}.css\">";
}
?>
You would then set the variable $section_specific_styles in the relevant page to only add the stylesheet in that page's header (thus, other pages without the variable set would not add the additional stylesheet.)