There's nothing fancy about the HTML, JS or CSS code. It all works fine if I embed the css inside the HTML file, but when linking to the external file it doesn't work.
Just uploaded it all to Digital Ocean, so I'm not sure if there are any special configurations I need to make to enable these external files to work.
Here's the HTML file:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h2>v1</h2>
<script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
I have trouble with Polymer. I wanna use it in my PhoneGap project, but on the start, I met a problem. The simple paper-button is not rendering. Even in a browser, not only on device. I will grateful for the help and for some tutorials about using polymer.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
<link rel="import" href="bower_components/polymer/polymer-mini.html">
<link rel="import" href="bower_components/paper-button">
</head>
<body>
<p>Hello World!!!</p>
<paper-button>GO</paper-button>
</body>
</html>
The import of your paper-button is incorrect, you should use:
<link rel="import" href="bower_components/paper-button/paper-button.html">
I am learning polymer. Want to link paper-button, but doesn't work. where is the mistake?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Polymer</title>
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/paper-button/paper-button.html">
</head>
<body>
<paper-button>flat button</paper-button>
</body>
</html>
You code is working with a proper bower configuration. Here is the single module I installed, I guess this is your problem:
bower install Polymer/paper-elements
This is documented in the guide Using elements of the Polymer project.
Check here. it is working.
I make it using following way. I think your imported links are not loading.
<script src="https://www.polymer-project.org/0.5/components/webcomponentsjs/webcomponents.min.js?20150316"></script>
<link rel="import" href="https://www.polymer-project.org/0.5/components/polymer/polymer.html">
<link rel="import" href="https://www.polymer-project.org/0.5/components/paper-button/paper-button.html">
<body>
<paper-button>flat button</paper-button>
</body>
Considering this markup:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Page title</title>
<link rel="stylesheet" href="css/layouts.css" type="text/css" media="all">
<noscript>
<link rel="stylesheet" href="css/layouts_nojs.css" type="text/css" media="all">
</noscript>
<script src="js/jquery.min.js" charset="utf-8"></script>
</head>
<body>
I'm using Thymeleaf as the engine, but the output code results as this:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Page title</title>
<link rel="stylesheet" href="css/layouts.css" type="text/css" media="all">
</head>
<body>
<noscript>
<link rel="stylesheet" href="css/layouts_nojs.css" type="text/css" media="all">
</noscript>
<script src="js/jquery.min.js" charset="utf-8"></script>
How can I prevent this behaviour?
Thymeleaf last version, 2.1.3, use nekohtml library, this library for some versions previous to 1.9.14 has a bug that avoid the use of noscript in head, so probably you have using an older version, review your dependencies.
But, this is not all, all superior versions don't allow within head, the use of elements with children, so noscript in head can not support link tag inside it. Using your code the result must be this:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Page title</title>
<link rel="stylesheet" href="css/layouts.css" type="text/css" media="all">
<noscript>
</noscript><link rel="stylesheet" href="css/layouts_nojs.css" type="text/css" media="all">
<script src="js/jquery.min.js" charset="utf-8"></script>
</head>
<body>
This issue is more complicated to be resolved, it requires deeper changes.
Workarounds:
1 - Use a custom LegacyHtml5TemplateParser where you can set "http://cyberneko.org/html/features/parse-noscript-content" feature to false in the HTMLConfiguration of nekohtml library, this make not to parse the content of noscript elements, so is treated as text, to make use of dynamic code of thymeleaf, set th:inline attribute to text in the noscript start tag and use the markup inside like in
Tutorial: Using Thymeleaf, 12.1 Text inlining
An example:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Page title</title>
<link rel="stylesheet" href="css/layouts.css" type="text/css" media="all">
<noscript th:inline="text">
<link rel="stylesheet" href="[[#{css/layouts_nojs.css}]]" type="text/css" media="all">
</noscript>
<script src="js/jquery.min.js" charset="utf-8"></script>
</head>
<body>
2 - Another possibility, more complex, needs to use a custom LegacyHtml5TemplateParser for thymeleaf, and a custom HTMLTagBalancer for nekohtml, so you can control if head can contained elements with children. This involves creating a serial of classes to override the nekohtml behaviour, these classes are the following:
HTMLAugmentations, HTMLConfiguration, HTMLScanner, HTMLTagBalancer, LostText, ObjectFactory, SecuritySupport, SecuritySupport12.
You must copy the original sources from nekohtml library in your package an modify them accordingly to this package changes, and in LegacyHtml5TemplateParser use your new HTMLConfiguration class.
For this workaround, in HTMLTagBalancer, change these lines:
if ((fElementStack.top > 1 && fElementStack.peek().element.code == HTMLElements.SCRIPT)
|| (fElementStack.top > 2 && fElementStack.data[fElementStack.top-2].element.code == HTMLElements.HEAD)) {
with these others:
if (fElementStack.top > 1 && fElementStack.peek().element.code == HTMLElements.SCRIPT) {
//|| (fElementStack.top > 2 && fElementStack.data[fElementStack.top-2].element.code == HTMLElements.HEAD)) {
Pros: lets you define th:block tags within head for thymeleaf.
Cons: if you want to change nekohtml library version to a newer one, you must ensure that the changes do not affect your code.
move the script above the noscript stylesheet
Write a noscript into the document while a page parses html and executes javascript.
<script type="text/javascript">
document.write('<noscript><div>example</div></noscript>');
</script>
6 years later I've faced the same problem when trying to implement Facebook Pixel No Script Tag.
Well, here's my workaround:
fragments/general.html
<head th:fragment="headFragment">
<!-- [...] -->
<th:block th:insert="~{fragments/general :: fbpNoScriptFragment}" />
<!-- [...] -->
</head>
<!-- The noscript below will be inserted in the <head> fragment above, just not directly -->
<noscript th:fragment="fbpNoScriptFragment">
<img height="1" width="1" style="display:none"
th:attr="src='https://www.facebook.com/tr?id=' + ${fbp_id} + '&ev=PageView&noscript=1'"/>
</noscript>
And in my "main" template file:
<head>
<!-- [...] -->
<th:block th:include="fragments/general.html :: headFragment" />
<!-- [...] -->
</head>
And now it works, so it seems like whatever causes this error as #Jack Froilson explained, it doesn't "chain" the error, by inserting it indirectly it seems to work properly.
I have the following HTML in a web directory:
<!doctype html>
<html xmlns:ng='http://angularjs.org'>
<script src='lib/angular-0.9.18.min.js' ng:autobind></script>
<script src='angular-controller.js'></script>
<head>
<title>My Page</title>
<link rel='stylesheet' type='text/css' href='my.css'/>
</head>
<body>
Template stuff used by angular.
</body>
</html>
I would like something like:
<!doctype html>
<html xmlns:ng='http://angularjs.org'>
<script src='../web/lib/angular-0.9.18.min.js' ng:autobind></script>
<script src='angular-controller-stub.js'></script>
<head>
<title>My Page</title>
<link rel='stylesheet' type='text/css' href='../web/my.css'/>
</head>
<body>
Template stuff used by angular.
</body>
</html>
Note that the only differences are the .js and .css paths. If I were dealing with a language like Java, I would extract out a method and pass in the filepaths as arguments (or extract out a class and set the fields to the filepaths). How do I achieve a similar effect in HTML?
The second page is for testing the 'look' of the page. As such, allowing the page to be loaded via file:// allows for really quick turnaround. angular-controller.js does xhr stuff and fills in variables. angular-controller-stub.js just stubs those variables.