I'm trying to understand d3 via this tutorial
So, I've downloaded script, named it d3.js and put it in the same directory with index.html
Here is code of index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3 Test</title>
<script type="text/javascript" src="d3.js"></script>
<style type="text/css"></style>
</head>
<body>
<script type="text/javascript">
d3.select("body").append("p").text("New paragraph!");
</script>
</body>
</html>
However, when I load page, I don't see a new paragraph? What is wrong?
The snippet below is how jsFiddle sets up a working, d3-enabled page. I am not sure what exactly causes your problem, but maybe you could try copying the header.
I generally recommend including libs, like d3, via a CDN (e.g. cloudflare, or d3's own server, as in the fiddle), since the cached version can then be used across site domains (due to its absolute link), without being downloaded every time.
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script><style type="text/css"></style>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<script type="text/javascript">//<![CDATA[
window.onload=function(){
d3.select("body").append("p").text("New paragraph!");
}//]]>
</script>
</head><body></body></html>
You can keep your script tag at the bottom of the body though.
Related
I am trying to parse Ekonika, but when I am doing basic requests get, it gives me:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="referrer" content="no-referrer" />
<script src="/__qrator/qauth_utm_v2.js"></script>
</head>
<body>
</body>
</html>
I cant really get where information is? When I am adding "/__qrator/qauth_utm_v2.js" to the link it says The page is forbidden.
Can you please advice the right way to parse it?
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?
I have an Angular 6 project that references a custom Javascript file using the angular.json file. Everything works as expected, but I need to ensure that this custom.js file gets loaded in the body of the page as opposed to the head. Angular does not show this when I right-click on the page to view source. Is it correct to assume that scripts are loaded in the body by default?
This is what view source reveals:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>AngularJavascriptDemo</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
<script src="runtime.js" type="module"></script>
<script src="polyfills.js" type="module"></script>
<script src="styles.js" type="module"></script>
<script src="scripts.js" defer></script>
<script src="vendor.js" type="module"></script>
<script src="main.js" type="module"></script>
</body>
</html>
I need to ensure that the page loads optimally.
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 have this snippet loading to iframe of a bigger app, having scripts declarations in the <head>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script type="text/javascript" src="ext-all.js"></script>
<script type="text/javascript" src="my-script.js"></script>
...
But I'm getting 'Ext' is undefined error thrown from within my-script.js.
Dev tool revealed that both started to load in parallel and my-script.js has finished loaded first as it is much smaller.
So here is a question: why is that IE uses asynchronous mode by default for ordinal scripts definition?
And how could I fix the issue?
Try using defer on both script tags like
<script type="text/javascript" src="ext-all.js" defer></script>
<script type="text/javascript" src="my-script.js" defer></script>
If this won't help, try loading ext-all.js first and use
Ext.onReady(function() {
// load my-script.js
});
to load your own script.
More of "defer": http://www.w3schools.com/tags/att_script_defer.asp