I'm new to polymer. Below code is not displaying anything. Just a blank page. I'm running this on the default python server. Any idea why this is happening?
<!DOCTYPE html>
<html>
<head>
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"/>
<link rel="import" href="bower_components/polymer/polymer.html"/>
</head>
<body>
<hello-element></hello-element>
<dom-module id="hello-element">
<template>Hello World</template>
</dom-module>
<script>
HTMLImports.whenReady( function () {
Polymer({
is: "hello-element"
})
})
</script>
</body>
</html
First of all, your closing html tag is malformed. It should be </html> instead of <html. Perhaps you made a mistake while copying, but you should check just in case.
In addition, your script element should have a closing tag, like so:
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
Furthermore, the link tag should not have this slash / before closing it, like so:
<link rel="import" href="bower_components/polymer/polymer.html">
Try to use HTML tags Properly. In HTML5, so-called void elements (elements that can't have content -> link,meta) don't need the closing, but when comes to tag it must be closing tag. It takes content between takes as javascript code.
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
Try to use above format to get correct output. But avoid creating componments in Main document. Create in other file and import it
Related
Would pure angular and css/html work in a local machine?
In my case, I'm not getting any errors, but at the same time the messages won't show any output. Any idea why?
Some of the code:
<head>
<link rel="stylesheet" type="text/css" href="/C:somethinghere\style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="/C:somethinghere\app.js"></script>
</head>
<body class="parent" ng-app="myApp">
{{ messages }}
</div>
app:
var myApp = angular.module('myApp',[]);
myApp.controller('GreetingController', ['$scope', function($scope) {
$scope.messages = "hello";
$scope.ratings = [{test: 22},{test: 99}];
}]);
NOTE: the links are correct, i just changed the links to now show my username.
The answer is: Yes, angular works on a local machine.
The problem in your code is that you are not assigning the controller to the view, you are missing the ng-controller="GreetingController" inside your view.
So to fix that, just enclose {{ messages }} inside a div tag with ng-controller attribute.
A solution might look like that:
<body class="parent" ng-app="myApp">
<div ng-controller="GreetingController">
{{ messages }}
</div>
</body>
Also, please notice that in your HTML, you opened a <body> tag but you closed it with </div> tag. You missed the </body> enclosing tag and you missed a <div> opening tag.
Another small tip:
Try to use relative paths instead of absolute paths when you load CSS/JS files.
Just write <link href='styles/style.css'> instead of <link href='c:/.../styles/style.css'>. This path assumes that you have a styles folder in the same folder that your HTML file exists.
I would like to include a webix table such as this one into a sphinx document.
I've found that directive:
.. raw::
:file: data.html
Unfortunately it does not work because the head should be included into <head>. Also the relative links should be updated according to the sphinx generated html.
<head>
<title>"Find" API</title>
<link rel="stylesheet" href="webix.css" type="text/css" charset="utf-8">
<script src="webix.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="samples.css">
<script src="testdata.js" type="text/javascript" charset="utf-8"></script>
</head>
How to include a webix widget into a static sphinx page?
One possible solution would be to fully include the html using jquery:
<html>
<head>
<script src="jquery.js"></script>
<script>
$(function(){
$("#includedContent").load("b.html");
});
</script>
</head>
<body>
<div id="includedContent"></div>
</body>
</html>
However this requires to add stuff into the <head> of the page
It sounds like what you want to do is create a custom HTML theme for use in Sphinx. This is less work than it sounds like, since you can probably just inherit from an existing theme, and only override a small part of it in your new theme. See the Sphinx docs re: templating and theming
Also, see this answer, which might be helpful:
Adding a javascript script tag some place so that it works for every file in sphinx documentation
I'm making an SPA website using Polymer. My main HTML page looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="/bower_components/webcomponentsjs/webcomponents.js"></script>
<script src="/bower_components/system.js/dist/system.js"></script>
<script>
System.config({
map:{
traceur: '/bower_components/traceur/traceur.min.js'
}
});
</script>
<meta charset="UTF-8">
<link rel="import" href="/html/foobar-app.html">
</head>
<body>
<foobar-app></foobar-app>
</body>
</html>
with foobar-app defined as:
<link rel="import" href="/bower_components/polymer/polymer.html">
<link rel="import" href="/bower_components/iron-pages/iron-pages.html">
<link rel="import" href="/bower_components/paper-toast/paper-toast.html">
<link rel="import" href="/html/pages/all-territories.html">
<link rel="import" href="/html/pages/app-login.html">
<dom-module id="foobar-app">
<template>
<style></style>
<iron-pages id="pages" selected="1">
<app-login on-logged-in="onLoggedIn"></app-login>
<all-territories></all-territories>
</iron-pages>
<iron-ajax
url="http://api.foobar.com/data">
</iron-ajax>
</template>
<script>
(function() {
Polymer({
is: 'foobar-app',
// ...
});
})();
</script>
</dom-module>
When I make a change to foobar-app's code everything works fine and updates if I refresh the page. But if I make a change to one of its sub-components or to one of the sub-component's own sub-components, the related html doesn't refresh and I have to manually browse to the related HTML file and press refresh. Else, only the top HTML file is refreshed (foobar-app.html).
How can I ask Chrome to refresh the current page and all its imports, sub-imports etc. whatever the deepness?
I've tried the following without success:
Pressing CTRL + MAJ + R twice
Pressing CTRL + R twice
Try opening the inspector for this page (right click, inspect). Then right click on the refresh icon, finally select "Empty Cache and Hard Reload" from the refresh drop down.
I have had problems with IFrames doing this, but never ajax calls; but this fixed it for me.
I'm trying to use an HTML file with CSS throught this code:
<link rel="stylesheet" type="text/css" href="myfile.html" />
I cannot access to the server and make new files so the server provides the option to create HTML files and I wanna use them as CSS hosts. Is this possible?
you can try to include the html containing css in the other html so myCssfile.html is :
<style>
//enter CSS code here
</style>
and then your main html file:
<html>
<head>
<script src="jquery.js"></script>
<script>
$(function(){
$("#includedContent").load("myCssFile.html");
});
</script>
</head>
<body>
<div id="includedContent"></div>
</body>
</html>
I'm using here the JQuery function .load but it probably can be done with pure JS
If the file contents are valid CSS and the type attribute is set correctly, then the browser will believe you that it's a CSS file and will parse/use it as such.
Hi all I am trying to create a custom Polymer Element that uses the < x-flipbox > element inside its template tag.
However it seems that the < x-flipbox > tag it is only working on the index page and not inside my custom elements.
This is my custom element, what am I doing wrong?
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/x-tag-imports/x-tag-flipbox.html">
<polymer-element name="nautes-flipbox" attributes="">
<template>
<style>
:host {
display: block;
}
</style>
<x-flipbox>
<div>I'm the front face.</div>
<div>I'm the back face.</div>
</x-flipbox>
</template>
<script>
Polymer({
});
</script>
</polymer-element>
The element above is just showing the two divs.
<x-flipbox>
<div>I'm the front face.</div>
<div>I'm the back face.</div>
</x-flipbox>
This one pasted in the index.html shows only one div (as it should).
In addition, how can I debug this kind of issues? (I am new to polymer and the console is not giving me any error/warning)
You don't need to include it as a import, that's an old wrapper thing the Polymer folks wrote for including X-Tag elements (it's probably what's complicating this). You can simply include the JS (as a <script>) and CSS (as a <link rel="stylesheet">) inside of the x-flipbox repo's src directory where you have your <link rel="import"> for the flipbox
Repo: https://github.com/x-tag/flipbox/tree/master/src