Server side includes don't work here since it's not traditionally "served".
I'm trying to import the head content from a shared file to reduce shared code (I'm doing this with other shared elements across all pages just fine), but because it includes the styles, it's causing a flicker in the form of unstyled elements.
I'm using jQuery at present to load the content asynchronously (which isn't optimal, but I haven't found a synchronous solution that actually works), but I'm more than open to a vanilla JS solution so there's not the overhead of having to load jQuery first (to reduce the delay despite it being locally hosted).
Here is the existing code:
plan.html:
<head>
<script type="text/javascript" src="scripts/jquery-1.11.1.min.js"></script>
<script>$(function(){ $("head").load("head.html") }); </script>
</head>
head.html:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="noindex, nofollow">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--Styles/Fonts-->
<link href='//fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
<link href="styles/marketing-plan-normalize.css" rel="stylesheet" type="text/css">
<link href="styles/marketing-plan-styles.css" rel="stylesheet" type="text/css">
<!--IE Compatibility - Modernizr-->
<script type="text/javascript" src="scripts/modernizr.js"></script>
<!-- Adding the favicon -->
<link rel="shortcut icon" type="image/png" href="images/js-logo-small.png"/>
<title>Sales and Marketing Planner</title>
Use document.write()
<head>
<script type="text/javascript">
document.write('<link href="/use/abs/path/here/styles/marketing-plan-normalize.css" rel="stylesheet" type="text/css">');
</script>
</head>
It fails to work with <base> element in some browsers, so better use absolute urls.
In Chrome it triggers a console warning referring to https://developers.google.com/web/updates/2016/08/removing-document-write even if there's no script insertion. This situation may change in the future.
EDIT: Oops, I haven't paid enough attention to your case. I'm afraid it's not possible without combining document.write and sync AJAX. Please don't do that.
Related
A colleague of mine developped an html/javascript/css reporting module, independant from current application, that we would like to be part of the aplication.
To keep track of modules evolutions, we cloned his git repository into application's views folder, and declared a route to reach the page. This looks good, but the page does not fully work: the javascript console raises several http 404 - not found errors. The page does not find css and js resources, which are declared in the page:
v4_test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Reporting tool SIS - Test</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/dc.css">
<link rel="stylesheet" type="text/css" href="css/leaflet.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="js/downloadFile.js"></script>
</head>
<body>
---
</body>
</html>
Rails searches these elements from the root of the site instead of relatively to the current page. I tried to express the path as href="./css/dc.css" but this changes nothing.
Folder organisation:
views
|_governance
|_monitoring_pages
|_css
|_data
|_js
v4_test.html
route.rb
get 'test', to: "/governance/monitoring_pages#v4_test"
How can I update this page header section so that it finds relative resources?
In the head of my web page html document I have linked CSS and JavaScript files for the functionality and aesthetics of my page. They seemed to work fine, until I updated a JS file and it did not affect my page. Out of frustration, I eventually just added the script to the bottom of the page as part of script tags and forgot about it. However, when I wanted to update some CSS files, the same thing happened.
I am using xampp and Sublime text 3 as text editor. I have triple checked the file locations and directories and they all match up. I cant think of any other issue that could cause this. Does anybody have any ideas? At the bottom I have attached an example of the head tags.
<head>
<meta charset="UTF-8">
<meta http-equiv="refresh" content="30" >
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="../css/page_layout.css">
<link rel="stylesheet" type="text/css" href="../css/top_nav.css">
<link rel="stylesheet" type="text/css" href="../css/buttons.css">
<link rel="stylesheet" type="text/css" href="../css/tables.css">
<link rel="stylesheet" type="text/css" href="../css/side_nav.css">
<link rel="stylesheet" type="text/css" href="../css/modal.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="../java_script/top_nav.js"></script>
</head>
There is a bug with Sublime Text 3, not any directory issues. Somehow it does not update and link files as it should. Once I close and reopen ST3, the changes show. I am considering using another text editor if this issue continues.
I'm trying out vuejs by following along with the laracasts series of webcasts on this. I'm using netbeans 8.1 as my editor and you can see my file structure above. In https://laracasts.com/series/learning-vuejs/episodes/5 Jeffery Way shows the following code which I have adapted:
<head>
<title>Tasks</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.12/vue.js"></script>
<script type="text/javascript" src="Sources/app.js"></script>
</head>
In the console I see:
GET http://localhost:8383/vue1/Sources/app.js net::ERR_EMPTY_RESPONSE
I suspect I have the file path wrong. I've been reading http://www.jibbering.com/faq/faq_notes/script_tags.html but have not not come up with an answer. What am I doing wrong?
Is "Site Root" a subfolder on the same folder as "Sources"?
If yes, try it out:
<script type="text/javascript" src="../Sources/app.js"></script>
Or move Sources dir to inside Site Root.
What should I do to decrease load time?
<head>
<title>NCI SwitchGears</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap-3.3.4-dist/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="bootstrap-3.3.4-dist/js/bootstrap.min.js"></script>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="menu/styles.css">
<script src="bootstrap-3.3.4-dist/js/jquery-latest.min.js" type="text/javascript"></script>
<script src="menu/script.js"></script>
</head>
You're loading jQuery twice. Once locally, and once remotely.
Consider using Require.JS to load your JS on demand
Combine Style sheets to one request. Make sure you are using modular styles and again, load on demand.
JS move to footer where appropriate
Google provides a nice tool to help you speed up the loading times of your pages
https://developers.google.com/speed/pagespeed/insights/
Here's another nice online tool.
As a general rule:
load 1 js files and 1 CSS file - compressed
have your js at the bottom of the page, not in header
load social tools/scripts via ajax, after page has load
optimize the images/graphics you use on your template
set proper expiration headers and caching options
More specific instructions for your pages you can find in the above tools.
Whenever trying to open a page running a javascript code using FileReader and JSON upon page initialization, ie11 reports "FileReader is not defined", and later "JSON is not defined". The head of HTML file is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>LogViewer</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href="css/slick.grid.css" type="text/css"/>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript"></script>
</head>
Everything works fine in FF and Chrome. Any ideas?
Add <meta http-equiv="X-UA-Compatible" content="IE=edge" /> as the first tag of the header to be sure. IE loves to go to compatibility mode even if a HTML5 doctype is present under certain circumstances (especially on intranet files when the computer is in a domain).
You can use the developer tools (F12) to check what mode you are running in.