In firefox, the localized html pages have to use xhtml, because localized variables are brought in as:
&blah.sub.name;
But an issue is, with frameworks like angular, we need to set attributes that don't have a value. Such as ngCsp:
https://docs.angularjs.org/api/ng/directive/ngCsp
<!doctype html>
<html ng-app ng-csp>
...
...
</html>
However xhtml doesn't agree with this and it throws errors. During runtime we can set these attributes with no value no problem, with javascript. However is there a way to do this not on runtime?
Related
I'm building a Gatsby app and I need to insert a few SSI lines (styled as HTML comments). Example
<!--#set var="section" value="#{section}"-->
<!--#include virtual="/virtual/3.0/script-app.inc"-->
I can't find how to do this.
I need to put these (and other scripts) before the head tag, inside the head tag, at the end of the body tag and directly after it.
I've tried a lot of ways but none of them work. I've tried changing html.js but it just strips the comments out of the outputted code. I also tried working with gatsby-ssr and gatsby-browser but I keep thinking I don't know exactly what to do in those documents.
What I expect the output to be (with the exemplified codes):
<!DOCTYPE html>
<!--#set var="section" value="#{section}"-->
<html>
<head>
<!--#include virtual="/virtual/3.0/script-app.inc"-->
[rest of head code]
</head>
<body>
</html>
What happens: my output page has no comments whatsoever OR has it stringified (as in <!--#include virtual="/virtual/3.0/script-app.inc"-->
I solved this using gatsby-node.js and onPostBuild(). Copying the html/js then adding custom components (like <ssi-code /> then replacing them using replace-in-file:
replace.sync({
files: ['./public/**/*.html', './public/*.html'],
from: /<SSI-before-html>(.*?)<\/SSI-before-html>/g,
to: '<!--#include virtual="/virtual/example.inc"-->',
});
I know that due to backwards compatibility with IE, Angular allows the use of an xmlns and using ng: instead of ng-, however it doesn't appear to be working with all directives in xhtml
<?xml version="1.0"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ng="http://angularjs.org">
<head>
<title>Test</title>
</head>
<body ng:app="MyApp">
<div ng:controller="FooController as foo">
<p>{{foo.text}}</p>
</div>
<script src="angular.min.js" />
<script>
var app = angular.module("MyApp", []);
app.controller("FooController", function () {
this.text = "Hello Angular!";
});
</script>
</body>
</html>
The above will just produce {{foo.text}}, but if I replace ng:app with ng-app (leaving ng:controller the way it is) everything works fine. I really like the consistency of using namespaces, so why doesn't ng:app work?
The ng:app syntax doesn't work due to the following:
The elements contained within the template are always created in the HTML namespace. Whilst this is probably fine for the fast majority of cases if someone ever uses AngularJS with another XML document like SVG this could cause some problems.
References
Directive templates are always created in the HTML namespace
XHTML pages with fail to load in Opera
AngularJS Developer Guide: Internet Explorer Compatibility
Your example works fine. Have a look here: http://plnkr.co/edit/mgUMZe09FSr1aALE6ddd?p=preview
Maybe your angular script is not included properly
<script/> should be <script></script> its not self closing html tag
I'm trying to get started with AngularJS using coffeescript and coffeekup.
AngularJS is capable of auto-bootstrapping itself when it detects the ng-app attribute on any HTML element. According to the docs, it should be placed on the <html> or <body> element. However, it will try to load any attribute value, if given, as the application root module.
When placed on the <html> element for example, the HTML should be
<html ng-app>
This output does not seem to be achievable using coffeekup. I tried the following things:
html 'ng-app': '' #prints <html></html>
html '': 'ng-app' #prints <html ="ng-app"></html>
html 'ng-app': ' ' #prints <html ng-app=" "></html> (still not what is wanted)
To clarify: What I do not want is the following:
html 'ng-app': 'ng-app' #prints <html ng-app="ng-app"></html>
since this causes AngularJS to look for a non-existent root module called ng-app.
Currently, I'm defining an empty root module as a workaround, but I still don't think that this is something coffeekup is not capable of.
I would like to set the title of each rendered page from the corresponding view. I would also like a default title to be set in my Master page. Here is the super-simple set up I am using.
Master Page
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>NancyFX is Splendid</title>
</head>
<body>
#Section['Content']
</body>
</html>
View
#Master['_Master']
#Section['Content']
<h1>Home</h1>
<p>Hello #Model.UserName</p>
#EndSection
I have tried a few of the more obvious guesses but no joy so far. Can you help?
On a more general note - is there any definitive help for Nancy's SSVE? I have read all the docs available on the site and GitHub but they are sparse. Just a list of all SSVE '#[]' keywords, would save me a lot of time.
Thanks
You can just render it from the model, same as anything else:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hello #Model.Name!</title>
</head>
<body>
<h1>Super Simple View Engine</h1>
<p>This text is in the master page, it has access to the model:</p>
<p>Hello #Model.Name!<p>
#Section['Content']
</body>
</html>
As for documentation, most of the tags are documented here: https://github.com/grumpydev/SuperSimpleViewEngine although it's slightly out of date now. It was initially designed purely for internal use, but obviously you are welcome to use it if you want to. The best place to look if you get stuck is the tests, there's samples for all the tags in there.
Does anybody can provide an answer to such issue? I`m trying to put some vector graphics into HTML. Actually it is not necessary in mine case, so I probably would resort to simple image for now, but I as encountered a problem, I couldn't resolve, it's became very interesting and relevant to the future to define what is going wrong. VML is absolutely new to me, by the way.
I tried to insert several vml-elements into a page, and some of them worked perfectly (in IE6, IE7) namely "oval", "rect". But when I've attempted to insert a shape or roundrect everything went wrong.
Actual question is: is there satisfactory VML support in IE6, IE7 or what I'm doing wrong? But as far as I'd examined my code everything is right in it. Below I'll put a sample, so everyone could test this in IE-browser:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1 /DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>sample</title>
<style>
v\:* { behavior: url(#default#VML); display:inline-block}
#div1 {
width:400px;
height:400px;
background-color:#e4fe56;
}
</style>
</head>
<body>
<div id="div1">
<v:shape style='width:100px;height:100px' fillcolor="red" path="m 0,0 l 30,0,30,30 xe" />
<v:rect style='width:100pt;height:75pt' fillcolor="blue" strokecolor="red" strokeweight="3.5pt"/>
<v:roundrect style='width:100pt;height:75pt" arcsize="0.3" fillcolor="yellow" strokecolor="red" strokeweight="2pt"/>
</div>
</body>
</html>
Additionally I found that it happens only in strict mode. When DOCTYPE removed or with other conditions when IE works in quirks mode everything works well.
You have mismatched quotes on your style attribute
<v:roundrect style='width:100pt;height:75pt"
You have whitespace in your doctype:
/xhtml1 /