I am following a tutorial and I am trying to create an svg element using d3. however when I run it and inspect the page on chrome, the svg element isnt showing up in the body. I'm sure that the .html file is referencing the correct js file, but I cant figure out why the element isn't appending
this is my html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>example</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="/text/javascript" src="d3.v3.min.js">
</script>
</head>
<body>
<script type="/text/javascript" src="shapes.js"></script>
</body>
</html>
and this is my js code
var dataArray = [2,13,15];
d3.select("body").append("svg");
It's your type attributes on your script tags:
/text/javascript
is not valid, it's:
<script type="text/javascript" src="shapes.js"></script>
With no leading slash...
Related
I am in the process of creating a shell script .sh.
I now need to create a html file and add the html of a whole html5 template and same it.
So...
sh myshfile.sh
touch index.html
...Add the html of a html5 template
For example...create a html file and add this:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/styles.css?v=1.0">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/scripts.js"></script>
</body>
</html>
...via a shell script.
How do I do this?
You could use one of the following methods.
If the content of the template is stored in a file,
cat template.html > index.html
If the content is to be stored in the script itself then,
echo "<html><h1>This is a test</h1></html>" > index.html
Don't forget to escape the quotes with \"
I'm working with libgdx 1.9.2 and gwt 2.6.1.
After the GWT-compilation of my java app, I get a JS script (html.nocache.js) that I can include in my html page, and visualisate in a web browser (inside a div, here it's "embed-html"). That part is working nicely.
Here's the code:
<!doctype html>
<html>
<head>
<title>my-gdx-game</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link href="styles.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="html/html.nocache.js"></script>
</head>
<body>
<div id="embed-html"></div>
</body>
</html>
My next goal is to use web components, and more precisely custom elements, to have a simple tag <my-app></my-app> in any web page to get my application.
my index.html:
<!doctype html>
<html>
<head>
<title>my-gdx-game</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="webcomponents.js/webcomponents.js"></script>
<link rel="import" href="component.html">
</head>
<body>
<my-app></my-app>
</body>
</html>
my component.html:
<template id="template">
<div id="embed-html"></div>
<link href="styles.css" rel="stylesheet" type="text/css">
</template>
<script>
var helloDoc = document._currentScript.ownerDocument;
var myApp = document.registerElement('my-app', {
prototype: Object.create(HTMLElement.prototype, {
createdCallback: {
value: function() {
var root = this.createShadowRoot();
var template = helloDoc.querySelector('#template');
var clone = document.importNode(template.content, true);
root.appendChild(clone);
}
}
})
});
</script>
<script type="text/javascript" src="html/html.nocache.js"></script>
But the JS script generated by GWT-compilation has some document.write(...) inside; so all that is included is my empty div, my style sheet correctly loaded, and warnings: "Warning: A call to document.write() from an asynchronously-loaded external script was ignored". Since it is generated, I don't think I can avoid using these document.write().
If I put the <script type="text/javascript" src="html/html.nocache.js"></script> in the head of index.html (where it was before I tried using webcomponents), the app is not added inside the div, as it should, but under (the div and style sheet are included as expected).
And if I put the script inside the template, nothing happens.
So I am wondering if there is a way to have a GWT application working with web components, or if I should search for another way to easily include my application into external websites.
(If you wonder the reasons why I want to do so, it's because I want clients to be able to add my app easily on their own website, with only an import and a tag, the same way I could import a YouTube video or a Google map.)
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="theme/myjquerystyle.css">
</head>
<body>
<iframe>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="plugin/myjquerystyle.css">
</head>
<body>
My Plugins page
</body>
</html>
</iframe>
</body>
</html>
As you can see above code i have create a html page inside the html page.
My problem is that theme/myjquerystyle.css override my plugin/myjquerystyle.css
How can I give a priority to my plugin/jquerystyle.css file apply to my page.
Any solution
I believe we cannot define inside iframe (never tried so) however we can acheive this via Javascript where we can append styles to iframe section via:
$('iframe').load( function() {
$('iframe').contents().find("head")
.append($("<style type='text/css'> .myclass{display:none;} </style>"));
});
Else you can also try by adding styles to individual elements inside
iframe as:
iframe.$('mydiv').addClassName('Tablewithborder');
Hope it helps.
I've written custom polymer element which works perfect in Chrome. But it's not even showing up in Firefox. I've use vulcanize to concatenate everything in one file even the platform and polymer. This is the main index file which I call for vulcanize.
<!DOCTYPE html>
<html>
<head>
<script src="bower_components/platform/platform.js"></script>
<link rel="import" href="bower_components/my_polymer/index.html">
</head>
</html>
This is my polymer element index file.
<!DOCTYPE html>
<html>
<head>
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="my-polymer-element.html">
</head>
</html>
Your setup is wrong.
You should not be importing index.html, but instead, import your element definitions in the main page. Your main page should look something like this:
<html>
<head>
<script src="bower_components/platform/platform.js"></script>
<link rel="import" href="my-polymer-element.html">
</head>
...
</html>
Note that polymer.html is listed as a dependency import at the top of your my-polymer-element.html definition file.
See http://www.polymer-project.org/docs/start/creatingelements.html#createpolyel and also the seed-element: http://www.polymer-project.org/docs/start/reusableelements.html for examples.
i have found a strange behavior when i was learning jQuery Mobile. below is my test code. the firebug shows the "test.js" was loaded twice if i put the script tag in body(even the "test.js" is empty). is this a bug or we could not put script tag in body when we are using jquery mobile?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<title>test</title>
<link href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
</head>
<body>
<script type="text/javascript" src="/test.js"></script>
</body>
</html>
I had the same problem, put all your javascript in the head. This solved the issue for me.
I've never ran into such issues, but try adding the script tag AFTER the element (but before the ) one), or even better, load it dymically after the pagecreate event.