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.
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?
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.
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.
Here is my index.html for posterity's sake:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<base href="/" />
<title>Cart</title>
<link href="content/external/bootstrap.css" rel="stylesheet" />
<link href="content/external/bootstrap-theme.css" rel="stylesheet" />
<link href="content/external/font-awesome.css" rel="stylesheet" />
<link href="content/external/angular-toastr.css" rel="stylesheet" />
</head>
<body ng-app>
{{3+4}}
drfg
<script src="scripts/external/jquery-1.9.1.js"></script>
<script src="scripts/external/bootstrap.js"></script>
<script src="scripts/external/angular.js"></script>
<script src="scripts/external/angular-ui-router.js"></script>
<script src="scripts/external/angular-resource.js"></script>
<script src="scripts/external/angular-mocks.js"></script>
<script src="scripts/external/angular-toastr.tpls.js"></script>
<script src="scripts/external/angular-animate.js"></script>
</body>
</html>
Whenever I hit run in webstorm to open in chrome, I get a 404 for every single javascript and css file. However, if I scope to the project directory and run node's http-server, my site loads just fine. I can't seem to find anything in settings related to this. Any ideas?
the problem is caused by tag in index.html:
<base href="/"/>
that tells the browser to resolve all URLs in the page relative to the web server root (localhost:63342 when using built-in webserver). Obviously no resources can be found there, as the built-in webserver serves files from http://localhost:63342/<project root>
So, you need to comment out '<base href="/"/>' to get your code working. Or, modify your hosts file to make webserver serve files from http://<some name>:63342 - see http://youtrack.jetbrains.com/issue/WEB-8988#comment=27-577559
I was using an older version of less (1.2.1) by accident and when I updated the .js to the most recent version (1.3.3) it seems that Espresso, my html/css editor, now takes 40% cpu and up to 90% when in development/watch mode. I've tried other versions and it seems like it happens with 1.3.1+. I've tried different variations of the watch mode and even disabling it completely and it's still using 40-50% cpu. I basically can't work with it now.
edit: It seems like it's mostly being caused by watch mode, which I highly depend on :(
This is what my site head looks like. Any suggestions would be appreciated as I do not understand js at all.
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>Article Sample</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<!-- Adding "maximum-scale=1" fixes the Mobile Safari auto-zoom bug: http://filamentgroup.com/examples/iosScaleBug/ -->
<!-- Link directly to LESS stylesheet first -->
<link rel="stylesheet/less" href="style/default.less" type="text/css" media="screen" />
<link rel="stylesheet/less" href="style/tablet.less" type="text/css" media="screen" />
<link rel="stylesheet/less" href="style/mobile.less" type="text/css" media="screen" />
<link rel="stylesheet/less" href="style/wide-mobile.less" type="text/css" media="screen" />
<!-- Then link to LESS, and enable development watch mode -->
<script src="js/less-1.3.3.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
less.env = "development";
less.watch();
</script>
<!-- Voilà! Instant LESS previews in Espresso -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
I think it is better to precompile first and then make the site read the already-compiled .css instead.
You can use Koala app for precompiling the less file or you can use grunt too, and get rid of the less.js.